reactjs - 如何在 Highcharts 的图表中呈现具有 x 和 y 值的对象数组“webdata”？

Question

链接中共享的代码中的getData()函数，其 x 和 y 轴的值显示在“webdata []”中，值如下所示

https://codesandbox.io/s/highcharts-react-demo-pe0tk?fontsize=14&hidenavigation=1&theme=dark

这些值没有显示在我使用 Highcharts 库的图表中。您能否让我知道代码中的更正，以便可以显示以下值

标签： reactjshighchartsaxios

Answer 1

您需要将数据调整为 Highcharts 要求的格式：

series: [{
    data: data.map((el) => ({
        x: new Date(el.timestamp).getTime(),
        y: Number(el.value)
    }))
}],
xAxis: {
    type: 'datetime'
}

---

现场演示：http: //jsfiddle.net/BlackLabel/soa25jhu/

API参考：

https://api.highcharts.com/highcharts/series.line.data

https://api.highcharts.com/highcharts/xAxis.type