Bar

父组件

• <BarChart />
• <ComposedChart />

子组件

• <Cell />
• <LabelList />
• <ErrorBar />

Properties

• layout 'horizontal' | 'vertical' optional

布局类型，通常继承父组件的布局类型。

• dataKey String | Number

每组柱图对应一个唯一的 key，需要在 BarChart 中保证唯一。

• xAxisId String | Number

柱图对应的 x 轴的 id 。

默认值：0

• yAxisId String | Number

柱图对应的 y 轴的 id 。

默认值：0

• legendType 'line' | 'square' | 'rect'| 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye' | 'none' optional

对应的图例 icon 的类型。

默认值：'rect'

• label Boolean | Object | ReactElement | Function

图形上的文本标签。当值为 false ，不展示文本标签。当值为 true，会根据 Bar 的属性配置来展示文本标签。当值为一个对象的时候，会把这个对象解析为 文本标签 的属性，来覆盖默认属性。当值是一个 React Element ，会克隆这个 React Element 来渲染“文本标签”。当值是一个 函数 时，会调用这个函数去渲染自定义的“文本标签”。

默认值：false

格式：

<Bar dataKey="value" label />
<Bar dataKey="value" label={{ fill: 'red', fontSize: 20 }} />
<Bar dataKey="value" label={<CustomizedLabel />} />

• data Array

描述所有柱条的坐标、尺寸数据。

• barSize Number optional

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

• maxBarSize Number

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

默认值：

• minPointSize Number

当柱图的 layout 是 "horizontal" 时，表示柱子的最小高度。当柱图的 layout 是 "vertical" 时，表示柱子的最小高度。默认情况下，如果数值为 0，那么相应的柱条的高度（宽度）也会为0，为了让这种高度（宽度）为0或者高度（宽度）非常小的柱条能够展示更加明显，我们会设置一个最小高度（宽度），比如说 3。在堆积柱图中，不推荐设置这个值。

默认值：0

示例：

• A BarChart with non-zero minPointSize

• background Boolean | Object | ReactElement | Function

是否显示背景柱条。当值为 false ，不展示背景柱条。当值为 true，会根据 RadialBar 的属性配置来展示背景柱条。当值为一个对象的时候，会把这个对象解析为 背景柱条 的属性，来覆盖默认属性。当值是一个 React Element ，会克隆这个 React Element 来渲染“背景柱条”。当值是一个 函数 时，会调用这个函数去渲染自定义的“背景柱条”。

默认值：false

示例：

• BarChart has background

• shape ReactElement | Function optional

柱条的图形配置，接收多种配置。当值是一个 React Element ，会克隆这个 React Element 来渲染“柱条”。当值是函数时，会调用这个函数去渲染自定义的“柱条”。

格式：

<Bar dataKey="value" shape={<CustomizedShape/>}/>
<Bar dataKey="value" shape={renderShape}/>

示例：

• A bar chart with customized shape

• stackId String | Number optional

堆积id，当两组及以上的柱图有相同的数值轴以及相同的 stackId 时，这些柱图会按照顺序堆积展示。

格式：

<BarChart data={data} width={400} height={300}>
  <Bar stackId="pv" dataKey="pv01" />
  <Bar stackId="pv" dataKey="pv02" />
  <Bar stackId="uv" dataKey="uv01" />
  <Bar stackId="uv" dataKey="uv02" />
</BarChart>

示例：

• A stacked bar chart
• A bar chart with stacked bars and unstacked bars

• unit String | Number optional

对应数据的单位，这个单位会展示在 Tooltip 的数值后面。

• name String | Number optional

对应数据的名称，这个名称会展示在 Tooltip 以及 Legend 中用来表示这个区域图。如果名称为空，我们会使用 dataKey 替代。

• isAnimationActive Boolean

当值为 false，不开启动画。

默认值：true in CSR, and false in SSR

• animationBegin Number

声明组件挂载或更新���，开始运行动画的间隔时长，单位为毫秒。

默认值：0

• animationDuration Number

声明动画的运行时长，单位为毫秒。

默认值：1500

• animationEasing 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear'

动画缓动函数的类型。

默认值：'ease'

• id String optional

唯一的id，会用于生成内部的clip path id 等，建议使用SSR的时候设置这个属性。

• onAnimationStart Function optional

区域图动画 start 事件的回调函数。

• onAnimationEnd Function optional

区域图动画 end 事件的回调函数。

• onClick Function optional

柱条 click 事件的回调函数。

示例：

• A BarChart with customized click event handler

• onMouseDown Function optional

柱条 mousedown 事件的回调函数。

• onMouseUp Function optional

柱条 mouseup 事件的回调函数。

• onMouseMove Function optional

柱条 mousemove 事件的回调函数。

• onMouseOver Function optional

柱条 mouseover 事件的回调函数。

• onMouseOut Function optional

柱条 mouseout 事件的回调函数。

• onMouseEnter Function optional

柱条 moustenter 事件的回调函数。

• onMouseLeave Function optional

柱条 mouseleave 事件的回调函数。