AreaChart

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

父组件

AreaChart consumes context provided by 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位置。)

    默认值:false

  • baseValueNumber | 'dataMin' | 'dataMax'

    区域图的基准值。