使用ReactJS的HighCharts散点图中的不一致数据点

yyhrrdl8 于 2023-10-20 发布在 Highcharts

关注(0)|答案(1)|浏览(153)

以前，我用的是折线图。但现在，我想要多个数据点在同一个X轴与工具提示，并根据HighCharts的行为-
在折线图中，默认情况下，当多个数据点共享相同的x轴值时，Highcharts将显示最后一个数据点的工具提示。
为了实现这种行为，我已经将我的图表转换为“分散”。
=>我有一个散点图（数据点与一系列线相连）。页面加载始终正确绘图，但使用新系列数据更新会在图形中带来意外的数据点。

**预期行为：**在使用新系列数据更新时始终绘制曲线
**实际行为：**不一致的数据点显示取决于以前的系列数据。

我已经研究过这个问题，并发现了这个链接，它表明这是HighCharts的问题，也是解决这个问题的方法：

https://github.com/highcharts/highcharts/issues/9184
https://github.com/highcharts/highcharts/issues/9037
但是，我不知道如何用ReactJS解决这个问题。下面是我的代码：https://stackblitz.com/edit/react-9wsnd9?file=index.js

highcharts

来源：https://stackoverflow.com/questions/77124423/inconsistent-data-points-in-highcharts-scatter-plot-with-reactjs

1条答案

按热度按时间

agxfikkp1#

要在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）回复(0）举报 2023-10-20

我来回答

使用ReactJS的HighCharts散点图中的不一致数据点

1条答案

相关问题

热门标签

最新问答