散点图无法正确更新同一位置的多个值

Question

我有两个团队，team1 和 team2，每个团队都包含以下链接中提到的结构中的绘图数据。

这是我的代码：https://codesandbox.io/p/sandbox/react-counter-function-component-forked-3pm6x4

我面临的问题：

1. 我创建了一个散点图，其中两个团队复选框最初都默认选中，一切看起来都很好。

2. 但是，当我取消选中其中一个复选框时，另一个图也会受到影响并改变其形状。令人惊讶的是，这种情况只发生在散点图上。如果我切换到折线图，一切正常，但我无法在同一位置显示不同值的工具提示。

预期行为：

当选中或取消选中一个复选框时，其他图不应受到影响并应保持不变。

我怎样才能实现这个目标？请修改代码并帮助我解决这个问题。或者，如果有一种方法可以在轴有多个值时在所有位置显示工具提示，我可以使用图表类型线而不是散点图。

谢谢你。

Answer 1

这是 Highcharts 库中的一个已知错误。您可以在这里阅读有关此错误的更多信息：https://github.com/highcharts/highcharts/issues/18400

当前解决这个问题的方法是为你的所有点添加一个 id 参数。这样，每次更新系列时，线条就不会重新绘制。 这是演示：https://codesandbox.io/p/sandbox/react-counter-function-component-forked-y2whfq?file=%2Fsrc%2FCharts.js