AreaChart
AreaChart 支持添加任何类型的 svg 元素作为子节点,包括 defs、linearGradient 等等。
子组件
AreaChart provides context for these components:
Properties
layout'horizontal' | 'vertical'
图表的布局决定了坐标轴、图形元素以及提示信息的方向。
默认值:
"horizontal"syncIdStringoptional
具有相同 syncId 的图表会同步显示提示信息和刷选区域。
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"reverseStackOrderBooleanoptional
如果设置为false,堆叠的项目将从左到右呈现。如果真正设置,堆叠的项目将从右到左呈现。 (渲染方向影响SVG分层,而不影响x位置。)
默认值:
falsebaseValueNumber | 'dataMin' | 'dataMax'
区域图的基准值。