reactjs - 如何使 rechart 的 lineChart DOT 像滑块的拇指一样移动?
问题描述
目前,lineChart 的标签和点连接到 rc 滑块,并且随着滑块的拇指移动标签和点移动并相应地显示相应的数据。
我还希望线条的 DOT 像滑块的拇指一样工作(DOT 应该在线上可拖动)
图表和滑块的数据长度相同
在 CustomizedLabel 和 CustomizedDot 函数中,如果图表的数据索引 === 滑块的数据索引,我只是渲染它们
如果不可能,请有人建议另一个库或可能的方法。谢谢你。
折线图代码
<LineChart data={sliderChartData}>
<XAxis tick={false} dataKey="name" />
<YAxis tick={false} />
<ReferenceLine
y={0}
strokeWidth={2}
stroke={dashedLineColor}
strokeDasharray="3 3"
/>
<Line
type="monotone"
activeDot={false}
dot={<CustomizedDot />}
dataKey="tranchA"
stroke={lightBlueColor}
strokeWidth={4}
>
<LabelList
dataKey="tranchA"
content={renderCustomizedLabelTrancheA}
/>
</Line>
<Line
type="monotone"
activeDot={false}
dot={<CustomizedDot />}
dataKey="tranchB"
stroke={lightBlueColor}
strokeWidth={4}
>
<LabelList
dataKey="tranchB"
content={renderCustomizedLabelTrancheB}
/>
</Line>
</LineChart>
解决方案
推荐阅读
- ionic3 - Ionic 3:从 ion-header 更改边框颜色
- node.js - 如何在 Jest 中监视导出和模拟的函数
- mamp-pro - MAMP Pro - 缺少主机数据库
- node.js - 我想在nodejs中删除文件时发出警报
- python - 您可以从变量中导入另一个脚本/模块吗?
- python - Flask-SQAlchemy with_for_update() returning old data
- python - 将 ImageGrab 与 pywin32 的 GetWindowRect 中的 bbox 一起使用
- django - 检查标签在模板中只使用一次
- sql - sql中的求和
- java - 数据表 Gherkin/Cucumber 中的换行符