如何使用 json 响应数据创建简单折线图

Question

我正在从 API 端点获取价格变化数据，并且我正在从 axios

收到此响应

0: (2) [1639382650242, 48759.49757943229]
1: (2) [1639386250855, 49131.24712464529]
2: (2) [1639389730718, 48952.65930253478]
3: (2) [1639393442318, 48821.67463307133]
4: (2) [1639396908986, 48835.214009032316]
5: (2) [1639400493105, 48618.25814914513]
6: (2) [1639404186695, 48572.06354948456]
7: (2) [1639407821756, 47974.48879991822]
8: (2) [1639411648037, 47105.42054562465]
9: (2) [1639414998352, 47176.56337927206]

我尝试使用文档中的示例代码来呈现一个简单的折线图，但它说我必须至少有 2 列数据：

                         <Chart
                            width={'600px'}
                            height={'400px'}
                            chartType="Line"
                            loader={<div>Loading Chart</div>}
                            data={
                                historicData.prices
                            }
                          />

有没有办法让它与 google-react-charts 一起工作？

Answer 1

请检查您是否遗漏了上图中数据部分中的此标签？

Answer 2

将 time 和 price 作为标签添加到第一个条目。您可以将时间戳转换为实际日期对象。

export default function App() {
  const data = [
    [1639382650242, 48759.49757943229],
    [1639386250855, 49131.24712464529],
    [1639389730718, 48952.65930253478],
    [1639393442318, 48821.67463307133],
    [1639396908986, 48835.214009032316],
    [1639400493105, 48618.25814914513],
    [1639404186695, 48572.06354948456],
    [1639407821756, 47974.48879991822],
    [1639411648037, 47105.42054562465],
    [1639414998352, 47176.56337927206]
  ];

  const processedData = [[{ type: "date", label: "time" }, "price"]].concat(
    data.map(([timestamp, price]) => {
      return [new Date(timestamp), price];
    })
  );

  return (
    <div className="App">
      <Chart
        width={"600px"}
        height={"400px"}
        chartType="Line"
        loader={<div>Loading Chart</div>}
        data={processedData}
      />
    </div>
  );
}

代码沙箱 => https://codesandbox.io/s/busy-johnson-1xc0w?file=/src/App.js

如何使用 json 响应数据创建简单折线图

How to create simple line chart with json response data

javascript

charts

reactjs

next.js