Bar

Properties

• dataKeyString | Number | Function

  决定如何从数据中提取柱图的数值：字符串：数据中字段的名称；数字：数据中字段的索引；函数：一个接收数据对象并返回柱图数值的函数。

• xAxisIdString | Number

  柱图对应的 x 轴的 id 。当存在多个 x 轴时需要指定。

  默认值：0

• yAxisIdString | Number

  柱图对应的 y 轴的 id 。当存在多个 y 轴时需要指定。

  默认值：0

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

  对应的图例 icon 的类型。

  默认值："rect"

• labelBoolean | Object | ReactElement | Function

  为每个柱条渲染一个标签。配置项包括：true：渲染默认标签；false：不渲染标签；对象：LabelList 组件的属性；ReactElement：自定义标签元素；函数：自定义标签的渲染函数。

  默认值：false

  格式：

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

• 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，该选项可以是自定义的活动条元素。如果传递的是函数，则将调用该函数来渲染自定义的活动条。

  默认值：false

  格式：

  <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 | "auto"optional

  当值为 false，不开启动画。

  默认值："auto"

• animationBeginNumber

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

  默认值：0

• animationDurationNumber

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

  默认值：400

• 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 事件的回调函数。