<Recharts />

Bar

父组件

子组件

Properties

layout'horizontal' | 'vertical'optional
布局类型，通常继承父组件的布局类型。
dataKeyString | Number | Function
每组柱图对应一个唯一的 key，需要在 BarChart 中保证唯一。
xAxisIdString | Number
柱图对应的 x 轴的 id 。
默认值：0
yAxisIdString | Number
柱图对应的 y 轴的 id 。
默认值：0
legendType'line' | 'plainline' | 'square' | 'rect'| 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye' | 'none'optional
对应的图例 icon 的类型。
默认值：'rect'
labelBoolean | 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 />} />
```
dataArray
描述所有柱条的坐标、尺寸数据。
barSizeNumber | Percentageoptional
柱条的宽度。如果指定这个值，会根据 barCategoryGap 和 barGap 来计算柱条的宽度，每组柱条的宽度是一样的。
maxBarSizeNumber
当柱图的 layout 是 "horizontal" 时，表示柱子的最大宽度。当柱图的 layout 是 "vertical" 时，表示柱子的最大高度。
默认值：
minPointSizeNumber | Function
当柱图的 layout 是 "horizontal" 时，表示柱子的最小高度。当柱图的 layout 是 "vertical" 时，表示柱子的最小高度。默认情况下，如果数值为 0，那么相应的柱条的高度（宽度）也会为0，为了让这种高度（宽度）为0或者高度（宽度）非常小的柱条能够展示更加明显，我们会设置一个最小高度（宽度），比如说 3。在堆积柱图中，不推荐设置这个值。
默认值：0
示例：
- A BarChart with non-zero minPointSize
backgroundBoolean | Object | ReactElement | Function
是否显示背景柱条。当值为 false ，不展示背景柱条。当值为 true，会根据 RadialBar 的属性配置来展示背景柱条。当值为一个对象的时候，会把这个对象解析为背景柱条的属性，来覆盖默认属性。当值是一个 React Element ，会克隆这个 React Element 来渲染“背景柱条”。当值是一个函数时，会调用这个函数去渲染自定义的“背景柱条”。
默认值：false
示例：
- BarChart has background
shapeReactElement | Functionoptional
柱条的图形配置，接收多种配置。当值是一个 React Element ，会克隆这个 React Element 来渲染“柱条”。当值是函数时，会调用这个函数去渲染自定义的“柱条”。
格式：
```
<Bar dataKey="value" shape={<CustomizedShape/>}/>
<Bar dataKey="value" shape={renderShape}/>
```
示例：
- A bar chart with customized shape
activeBarBoolean | Object | ReactElement | Functionoptional
当用户输入柱形图且该图表有工具提示时，将显示活动柱形图。如果设置为 false，则不会绘制活动条形图。如果设置为 true，将使用内部计算的道具绘制活动条形图。如果传递的是一个对象，则将绘制活动条形图，并将内部计算的道具与传递对象的键值对合并。如果传递的是 ReactElement，该选项可以是自定义的活动条元素。如果传递的是函数，则将调用该函数来渲染自定义的活动条。
默认值：true
格式：
```
<Bar dataKey="value" activeBar={false} />
<Bar dataKey="value" activeBar={{ stroke: 'red', strokeWidth: 2 }} />
<Bar dataKey="value" activeBar={<CustomizedBar />} />
<Bar dataKey="value" activeBar={renderBar} />
```
示例：
- A bar chart with active bar
stackIdString | Numberoptional
堆积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
unitString | Numberoptional
对应数据的单位，这个单位会展示在 Tooltip 的数值后面。
nameString | Numberoptional
对应数据的名称，这个名称会展示在 Tooltip 以及 Legend 中用来表示这个区域图。如果名称为空，我们会使用 dataKey 替代。
isAnimationActiveBoolean
当值为 false，不开启动画。
默认值：true in CSR, and false in SSR
animationBeginNumber
声明组件挂载或更新��，开始运行动画的间隔时长，单位为毫秒。
默认值：0
animationDurationNumber
声明动画的运行时长，单位为毫秒。
默认值：1500
animationEasing'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear'
动画缓动函数的类型。
默认值：'ease'
idStringoptional
唯一的id，会用于生成内部的clip path id 等，建议使用SSR的时候设置这个属性。
onAnimationStartFunctionoptional
区域图动画 start 事件的回调函数。
onAnimationEndFunctionoptional
区域图动画 end 事件的回调函数。
onClickFunctionoptional
柱条 click 事件的回调函数。
示例：
- A BarChart with customized click event handler
onMouseDownFunctionoptional
柱条 mousedown 事件的回调函数。
onMouseUpFunctionoptional
柱条 mouseup 事件的回调函数。
onMouseMoveFunctionoptional
柱条 mousemove 事件的回调函数。
onMouseOverFunctionoptional
柱条 mouseover 事件的回调函数。
onMouseOutFunctionoptional
柱条 mouseout 事件的回调函数。
onMouseEnterFunctionoptional
柱条 mouseenter 事件的回调函数。
onMouseLeaveFunctionoptional
柱条 mouseleave 事件的回调函数。