React：如何在 highchart 中绘制 API 响应

Question

您好，我有这个 reacr/flask 应用程序，当您输入关键字时，它会将其发送到烧瓶检查一些数据，然后将其发送回以做出以下 json 响应：

我希望能够使用“highcharts-react-official”包绘制这些值。

到目前为止，我可以在控制台上看到我的回复，但图表上什么也没有。我将日期更改为该时间戳，但不确定是否更好或者我应该使用日期时间，如有必要，我可以将其更改回来。

我的代码如下：

import React, { Component } from 'react';
import axios from 'axios';
import Highcharts from 'highcharts'
import HighchartsReact from 'highcharts-react-official'


class Keyword extends Component {

  state = {
    kws :[]
  }


keyword = e => {
    e.preventDefault();
    axios.post("/trends",{search_keyword: document.getElementById("keywords").value})
    .then((res) => {
    

      const data = res.data

      const keyword = data.data
  
      console.log("first index", keyword[1])


       this.setState({kws: keyword})
      

    }
    )}



  render() {

    const {kws =[]} = this.state

    const options = {
  title: {
    text: 'My chart'
  },
  xAxis: {
    type: 'datetime'
  },
  series: [{
    data: kws
  }]
}

    return (


<HighchartsReact
    highcharts={Highcharts}
    options={options}
  />
);
  }
}

我想画这样的东西：

更新：我已将 JSON 响应更新为如下：

这会是一个更好的绘图结构吗？如果是这样，我该怎么做才能像上图一样绘制每个关键字及其值？

UPDATE2：我已经更新了我的 Json 文件

Answer 1

您需要将数据解析为 Highcharts 能够识别的正确格式。根据您的屏幕更新，它应该如下所示：

series: [{
  name: 'ps2',
  data: [
    [1579996800, 67],
    [1580601600, 70],
    [1581206400, 68],
    [1581811200, 72],
    etc...
  ]
}, {
  name: 'ps2 emulator',
  data: [
    [1579996800, 59],
    [1580601600, 69],
    [1581206400, 71],
    [1581811200, 63],
    etc...
  ]
}]