BarChart

Properties

• layout'horizontal' | 'vertical'

  图表的布局决定了坐标轴、图形元素以及提示信息的方向。

  默认值："horizontal"

• syncIdStringoptional

  具有相同 syncId 的图表会同步显示提示信息和刷选区域。

  示例：

  • Two synchronized AreaChart

• syncMethod'index' | 'value' | functionoptional

  自定义图表同步提示信息和刷选区域的方式。`index`：通过数据在数据数组中的索引进行同步。使用索引时，要求所有图表的数据长度相同。`value`：通过类目轴上的数据值进行同步（类目轴指的是水平布局下的 X 轴，或垂直布局下的 Y 轴）。function：自定义同步方法，该方法会接收刻度值和数据作为参数，并返回一个索引值。

  默认值："index"

• widthPercent | Number

  图表的宽度。

• heightPercent | Number

  图表的高度。

• 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 }

• 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.

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

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

  默认值："none"

  示例：

  • A barChart stacked by sign of value
  • D3 stackOffset

• reverseStackOrderBooleanoptional

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

  默认值：false

• 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 时，表示柱子的最大高度。