BarChart

• pv
• uv

显示数据格式

<BarChart width={730} height={250} data={data}>
  <CartesianGrid strokeDasharray="3 3" />
  <XAxis dataKey="name" />
  <YAxis />
  <Tooltip />
  <Legend />
  <Bar dataKey="pv" fill="#8884d8" />
  <Bar dataKey="uv" fill="#82ca9d" />
</BarChart>

父组件

• <ResponsiveContainer />

子组件

• <XAxis />
• <YAxis />
• <ReferenceArea />
• <ReferenceDot />
• <ReferenceLine />
• <Brush />
• <CartesianGrid />
• <Legend />
• <Tooltip />
• <Bar />
• <Customized />
• validate svg elements…

Properties

• layout 'horizontal' | 'vertical'

布局类型，是横向的还是纵向的。

默认值：'horizontal'

• syncId String optional

如果任何两个或者多个类目型图表（LineChart, AreaChart, BarChart, ComposedChart）具有相同的 syncId，这两个图表可以联动，包括 Tooltip 以及 Brush 的联动。

示例：

• Two synchronized AreaChart

• width Number

图表的宽度。

• height Number

图表的高度。

• data Array

输入数据，现在支持的类型是对象数组。

格式：

[{ name: 'a', value: 12 }]
[{ name: 'a', value: [5, 12] }]

• margin Object

图表四周的留白大小，支持传入部分值（如： { top: 5 }）

默认值：{ top: 5, right: 5, bottom: 5, left: 5 }

格式：

{ top: 5, right: 5, bottom: 5, left: 5 }

• barCategoryGap Percentage | Number

两个类目之间的间隔距离，如果值为百分比，会根据类目宽度来计算实际值。

默认值：'10%'

• barGap Percentage | Number

某一个类目下，相邻的两个柱条的间隔大小。如果值为百分比，会根据类目宽度来计算实际值。

默认值：4

• barSize Number optional

柱条的宽度。如果指定这个值，会根据 barCategoryGap 和 barGap 来计算柱条的宽度，每组柱条的宽度是一样的。

示例：

• Tiny BarChart
• Mix BarChart with stacked bars and unstacked bars

• maxBarSize Number

当柱图的 layout 是 horizontal 时，表示柱子的最大宽度。当柱图的 layout 是 vertical 时，表示柱子的最大高度。

默认值：

• stackOffset 'expand' | 'none' | 'wiggle' | 'silhouette' | 'sign'

堆积柱图的偏移类型，这里提供的配置是 d3 支持的四种类型。

默认值：'none'

示例：

• A barChart stacked by sign of value
• D3 stackOffset

• reverseStackOrder Boolean optional

如果设置为false，堆叠的项目将从左到右呈现。如果真正设置，堆叠的项目将从右到左呈现。 （渲染方向影响SVG分层，而不影响x位置。）

默认值：false

• onClick Function optional

鼠标在图表图形区域 click 事件的回调函数。

• onMouseEnter Function optional

鼠标在图表图形区域 mouseenter 事件的回调函数。

• onMouseMove Function optional

鼠标在图表图形区域 mousemove 事件的回调函数。

• onMouseLeave Function optional

鼠标在图表图形区域 mouseleave 事件的回调函数。