提问人：Maulik Patel 提问时间：9/18/2023 更新时间：9/18/2023 访问量：55
使用 ReactJS 的 HighCharts 散点图中不一致的数据点
Inconsistent Data Points in HighCharts Scatter Plot with ReactJS
问：
以前，我使用的是折线图。但现在，我希望在同一个 X 轴上使用工具提示的多个数据点，并根据 HighCharts 的行为 -
“在折线图中，默认情况下，当多个数据点共享相同的 x 轴值时，Highcharts 将显示最后一个数据点的工具提示。”
为了实现这种行为，我已将我的图表转换为“散点”。
=> 我有一个散点图（用系列线连接的数据点）。页面加载始终正确绘制，但使用新的序列数据进行更新会在图形中出现意外的数据点。
预期行为：使用新序列数据进行更新时，绘图一致
实际行为：根据先前的系列数据，会出现不一致的数据点。
我已经对此进行了研究，并发现了以下链接，这表明这是HighCharts的问题以及解决该问题的方法：
但是，我无法弄清楚如何使用 ReactJS 解决这个问题。这是我的代码：https://stackblitz.com/edit/react-9wsnd9?file=index.js
答：
2赞
ppotaczek
9/18/2023
#1
要在 React 中使用建议的解决方法，您需要获取图表实例并调用 series。例如：setData
useEffect(() => {
const chart = chartRef.current.chart;
if (chart) {
chart.series[0].setData(mainData, true, true, false);
}
}, [data]);
现场演示：https://stackblitz.com/edit/react-jiva32?file=index.js
文档：https://github.com/highcharts/highcharts-react#how-to-get-a-chart-instance
API 参考： https://api.highcharts.com/class-reference/Highcharts.Series#setData
评论
0赞
Maulik Patel
9/27/2023
谢谢，它奏效了。将答案标记为已接受。
评论