<Recharts />

BarChart

Properties

• layout'horizontal' | 'vertical'

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

  默认值：'horizontal'

• syncIdStringoptional

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

  示例：

  • Two synchronized AreaChart

• syncMethod'index' | 'value' | functionoptional

  When syncId is provided, allows customisation of how the charts will synchronize tooltips and brushes. Using 'index' (default setting), other charts will reuse current datum's index within the data array. In cases where data does not have the same length, this might yield unexpected results. In that case use 'value' which will try to match other charts values, or a fully custom function which will receive tick, data as argument and should return an index.

  默认值：'index'

• widthNumber

  图表的宽度。

• heightNumber

  图表的高度。

• dataArray

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

  格式：

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

• marginObject

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

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

  格式：

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

• barCategoryGapPercentage | Number

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

  默认值：'10%'

• barGapPercentage | Number

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

  默认值：4

• barSizeNumber | Percentageoptional

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

  示例：

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

• maxBarSizeNumber

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

  默认值：

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

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

  默认值：'none'

  示例：

  • A barChart stacked by sign of value
  • D3 stackOffset

• reverseStackOrderBooleanoptional

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

  默认值：false

• onClickFunctionoptional

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

• onMouseEnterFunctionoptional

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

• onMouseMoveFunctionoptional

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

• onMouseLeaveFunctionoptional

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

• onDoubleClickFunctionoptional

  The customized event handler of dblclick in this chart.

• onContextMenuFunctionoptional

  The customized event handler of contextmenu in this chart.