ReferenceLine
显示数据格式
<AreaChart width={730} height={250} data={data}
margin={{ top: 20, right: 30, left: 0, bottom: 0 }}>
<XAxis dataKey="name" />
<YAxis />
<CartesianGrid strokeDasharray="3 3" />
<Tooltip />
<ReferenceLine x="Page C" stroke="green" label="Min PAGE" />
<ReferenceLine y={4000} label="Max" stroke="red" strokeDasharray="3 3" />
<Area type="monotone" dataKey="uv" stroke="#8884d8" fill="#8884d8" />
</AreaChart>
父组件
子组件
Properties
- xAxisId String | Number
参考线对应的 x 轴的 id。
默认值:0
- yAxisId String | Number
参考线对应的 y 轴的 id。
默认值:0
- x Number | String optional
用来描述一条垂直于 x 轴的线,当 x 轴是数值类型的坐标轴时,这个值必须为数值类型。当 x 轴为类目轴时, 这个值必须为 x 轴 domain 中的一个元素。
- y Number | String optional
用来描述一条垂直于 y 轴的线,当 y 轴是数值类型的坐标轴时,这个值必须为数值类型。当 y 轴为类目轴时, 这个值必须为 y 轴 domain 中的一个元素。
- alwaysShow Boolean
是否根据整参考线的值调整相应的坐标轴 domain,来保证参考线一定在可视区域内。
默认值:false
示例:
- viewBox Object
图表的可视区域
- xAxis Object
x 轴配置。
- yAxis Object
y 轴配置。
- label String | Number | ReactElement | Function optional
当值为简单类型的数值或者字符串时,这个值会被渲染成文字标签。当值为 React element,会克隆这个元素来渲染文字标签。
格式:
<ReferenceLine x="05" label="Middle" />
<ReferenceLine y={400} yAxisId="left" label={<CustomizedLabel />} />
示例:
- isFront Boolean
是否展示在图表的最上层。
默认值:false