<Recharts />

AreaChart

AreaChart 支持添加任何类型的 svg 元素作为子节点，包括 defs、linearGradient 等等。

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 }

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

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

  默认值：'none'

  示例：

  • An AreaChart with stackOffset specified to 'expand'
  • D3 stackOffset

• baseValueNumber | 'dataMin' | 'dataMax' | 'auto'

  区域图的基准值。

  默认值：auto

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