Line

父组件

• <LineChart />
• <ComposedChart />

子组件

• <LabelList />
• <ErrorBar />

Properties

• type 'basis' | 'basisClosed' | 'basisOpen' | 'linear' | 'linearClosed' | 'natural' | 'monotoneX' | 'monotoneY' | 'monotone' | 'step' | 'stepBefore' | 'stepAfter' | Function

曲线的插值类型，可以接收自定义的函数。折线对应的 type 为 “linear” 。

默认值：'linear'

示例：

• d3-shape interpolation
• An AreaChart which has two area with different interpolation.

• dataKey String | Number | Function

每个区域图对应一个唯一的 key，需要在 LineChart 中保证唯一。

• xAxisId String | Number

区域图对应的 x 轴的 id 。

默认值：0

• yAxisId String | Number

区域图对应的 y 轴的 id 。

默认值：0

• legendType 'line' | 'square' | 'rect'| 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye' | 'none' optional

对应的图例 icon 的类型。

默认值：'line'

• dot Boolean | Object | ReactElement | Function

曲线上的点，接收多种配置。当值为 false ，不渲染点。当值为 true ，点会继承 Line 的属性配置，例如配置了 Area 的 stroke 为 "red"， 点会继承这个属性。当值为一个对象的时候，会把这个对象解析为点的属性，来覆盖默认属性。当值是一个 React Element ，会克隆这个 React Element 来渲染“点”。当值是一个 函数 时，会调用这个函数去渲染自定义的“点”。

默认值：true

格式：

<Line dataKey="value" dot={false} />
<Line dataKey="value" dot={{ stroke: 'red', strokeWidth: 2 }} />
<Line dataKey="value" dot={<CustomizedDot />} />
<Line dataKey="value" dot={renderDot} />

示例：

• A line chart with customized dot

• activeDot Boolean | Object | ReactElement | Function

当图表触发mouseenter事件，并且需要展示 Tooltip 的时候，会展示一个“激活状态的点”。当值为 false ，不渲染“激活状态的点”。当值为 true ，点会继承 Line 的属性配置，例如配置了 Line 的 stroke 为 "red"， 点会继承这个属性。当值为一个对象的时候，会把这个对象解析为点的属性，来覆盖默认属性。当值是一个 React Element ，会克隆这个 React Element 来渲染“点”。当值是一个 函数 时，会调用这个函数去渲染自定义的“点”。

默认值：true

格式：

<Line dataKey="value" activeDot={false} />
<Line dataKey="value" activeDot={{ stroke: 'red', strokeWidth: 2, r: 10 }} />
<Line dataKey="value" activeDot={<CustomizedActiveDot />} />
<Line dataKey="value" activeDot={renderDot} />

示例：

• A simple line chart

• label Boolean | Object | ReactElement | Function

图形上的文本标签。当值为 false ，不展示文本标签。当值为 true，会根据 Line 的属性配置来展示文本标签。当值为一个对象的时候，会把这个对象解析为 文本标签 的属性，来覆盖默认属性。当值是一个 React Element ，会克隆这个 React Element 来渲染“文本标签”。当值是一个 函数 时，会调用这个函数去渲染自定义的“文本标签”。

默认值：false

格式：

<Line dataKey="value" label />
<Line dataKey="value" label={{ fill: 'red', fontSize: 20 }} />
<Line dataKey="value" label={<CustomizedLabel />} />
<Line dataKey="value" label={renderLabel} />

示例：

• A line chart with customized label

• points Array

曲线上点的坐标。当使用 LineChart 或者 ComposedChart 作为父组件的时候，不需要自己计算，父组件会计算好。

格式：

[{x: 12, y: 12, value: 240}]

• layout 'horizontal' | 'vertical' optional

布局类型，通常继承父组件的布局类型。

• connectNulls Boolean

当遇到 null、undefined 等非法输入的时候，是否跳过这个值，让前后连接起来。

默认值：false

示例：

• A lineChart connect nulls and a lineChart disconnect nulls

• unit String | Number optional

• name String | Number optional

对应数据的名称，这个名称会展示在 Tooltip 以及 Legend 中用来表示这个趋势图。如果名称为空，我们会使用 dataKey 替代。

• isAnimationActive Boolean

当值为 false，不开启动画。

默认值：true in CSR, and false in SSR

• animationBegin Number

声明组件挂载后，开始运行动画的间隔时长，单位为毫秒。

默认值：0

• animationDuration Number

声明动画的运行时长，单位为毫秒。

默认值：1500

• animationEasing 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear'

动画缓动函数的类型。

默认值：'ease'

• id String optional

唯一的id，会用于生成内部的clip path id 等，建议使用SSR的时候设置这个属性。

• onAnimationStart Function optional

区域图动画 start 事件的回调函数。

• onAnimationEnd Function optional

区域图动画 end 事件的回调函数。

• onClick Function optional

曲线 click 事件的回调函数。

示例：

• A BarChart with customized click event handler

• onMouseDown Function optional

曲线 mousedown 事件的回调函数。

• onMouseUp Function optional

曲线 mouseup 事件的回调函数。

• onMouseMove Function optional

曲线 mousemove 事件的回调函数。

• onMouseOver Function optional

曲线 mouseover 事件的回调函数。

• onMouseOut Function optional

曲线 mouseout 事件的回调函数。

• onMouseEnter Function optional

曲线 moustenter 事件的回调函数。

• onMouseLeave Function optional

曲线 mouseleave 事件的回调函数。