import { ChartOptions } from 'chart.js'; import React from 'react'; import { ChartContainerProps } from '../components'; import { StatisticConfigType } from '../hooks/useChartStatistic'; import { ChartDataItem } from '../utils'; /** * 柱状图数据项类型 * * 继承自 ChartDataItem,用于柱状图的数据表示。 * * @typedef {ChartDataItem} BarChartDataItem * @since 1.0.0 */ export type BarChartDataItem = ChartDataItem; /** * 柱状图配置项接口 * * 定义了柱状图的配置选项,包括数据集、主题、图例、网格等设置。 * * @interface BarChartConfigItem * @since 1.0.0 * * @example * ```typescript * const config: BarChartConfigItem = { * datasets: [data1, data2], * theme: 'light', * showLegend: true, * legendPosition: 'top', * showGrid: true, * xAxisLabel: '类别', * yAxisLabel: '数值', * stacked: false, * indexAxis: 'x' * }; * ``` */ export interface BarChartConfigItem { /** 数据集数组 */ datasets: Array<(string | { x: number; y: number; })[]>; /** 图表主题 */ theme?: 'light' | 'dark'; /** 是否显示图例 */ showLegend?: boolean; /** 图例位置 */ legendPosition?: 'top' | 'left' | 'bottom' | 'right'; /** 图例水平对齐方式 */ legendAlign?: 'start' | 'center' | 'end'; /** 是否显示网格线 */ showGrid?: boolean; /** X轴标签 */ xAxisLabel?: string; /** Y轴标签 */ yAxisLabel?: string; /** X轴最小值 */ xAxisMin?: number; /** X轴最大值 */ xAxisMax?: number; /** Y轴最小值 */ yAxisMin?: number; /** Y轴最大值 */ yAxisMax?: number; /** X轴步长 */ xAxisStep?: number; /** Y轴步长 */ yAxisStep?: number; /** 是否堆叠显示 */ stacked?: boolean; /** 索引轴方向 */ indexAxis?: 'x' | 'y'; /** 柱子最大宽度 */ maxBarThickness?: number; } export interface BarChartProps extends ChartContainerProps { /** 扁平化数据数组 */ data: BarChartDataItem[]; /** 图表标题 */ title?: string; /** 图表宽度,默认600px */ width?: number | string; /** 图表高度,默认400px */ height?: number | string; /** 自定义CSS类名 */ className?: string; /** 数据时间 */ dataTime?: string; /** 图表主题 */ theme?: 'dark' | 'light'; /** 自定义主色(可选),支持 string 或 string[]; * - 非正负图:数组按序对应各数据序列 * - 正负图:取数组前两位分别作为正/负色;仅一位则全用同色 */ color?: string | string[]; /** 是否显示图例,默认true */ showLegend?: boolean; /** 图例位置 */ legendPosition?: 'top' | 'left' | 'bottom' | 'right'; /** 图例水平对齐方式 */ legendAlign?: 'start' | 'center' | 'end'; /** 是否显示网格线,默认true */ showGrid?: boolean; /** X轴位置 */ xPosition?: 'top' | 'bottom'; /** Y轴位置 */ yPosition?: 'left' | 'right'; /** 是否隐藏X轴,默认false */ hiddenX?: boolean; /** 是否隐藏Y轴,默认false */ hiddenY?: boolean; /** 是否启用堆叠显示,将多个数据集叠加显示 */ stacked?: boolean; /** 图表轴向,'x'为垂直柱状图,'y'为水平柱状图 */ indexAxis?: 'x' | 'y'; /** 柱子最大宽度 */ maxBarThickness?: number; /** 是否显示数据标签,默认false */ showDataLabels?: boolean; /** 数据标签格式化函数 */ dataLabelFormatter?: (params: { value: number; label: string | number; datasetLabel: string; dataIndex: number; datasetIndex: number; }) => string; /** 外部传入的 Chart.js 选项,会与默认选项合并 */ chartOptions?: Partial>; /** 头部工具条额外按钮 */ toolbarExtra?: React.ReactNode; /** 是否将过滤器渲染到工具栏 */ renderFilterInToolbar?: boolean; /** ChartStatistic组件配置:object表示单个配置,array表示多个配置 */ statistic?: StatisticConfigType; /** 是否显示加载状态(当图表未闭合时显示) */ loading?: boolean; } declare const BarChart: React.FC; export default BarChart;