reactjs - 如何从 React 中的单个组件创建多个折线图

Question

我正在尝试从单个组件创建多个折线图，并且似乎迷失了很多。

我的 API 向我返回了看起来像这样的数据。

[
 {
        "price": 6500,
        "expiration": "10",
        "bid": 86.44,
        "mark": 89.74,
        "ask": 95.94,
        "dif": -0.01575
      },
      {
        "price": 6750,
        "expiration": "10",
        "bid": 74.09,
        "mark": 78.77,
        "ask": 82.52,
        "dif": -0.02023
      },
      {
        "price": 7000,
        "expiration": "20",
        "bid": 69.28,
        "mark": 70.67,
        "ask": 74.62,
        "dif": -0.03171
      },
      {
        "price": 7250,
        "expiration": "20",
        "bid": 68.06,
        "mark": 67.44,
        "ask": 71.08,
        "dif": -0.06388
      }
]

我要做的是创建一个组件，它将获取这些数据并使用 Chart.Js 将其映射到两个单独的折线图。

每张图表都应按expiration. X 轴是价格，Y 轴应该是标记。我找到了一个很好的例子来实现接近我想要在这里做的事情——> 如何在 react 中使用 chart.js 映射多个图表

但我想从这些数据中创建 2 个图表。图表按到期分组的位置。我不确定我从上面的例子中遗漏了什么，我需要改变才能做到这一点。任何帮助都会很棒。

import React, { Component } from "react";
import ReactDOM from "react-dom";
import { Line } from "react-chartjs-2";
import axios from "axios";

export default class Chart extends Component {
  constructor(props) {
    super(props);
    this.state = {
      chartData: [],
      data: []
    };
  }

  componentDidMount() {
   fetch(API, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({query: query}),
            })
      .then(res => res.json())
      .then(
        (res)=>{
        const x = res.data;
        let chartData = [];
        x.forEach(element => {
          chartData.push({
            labels: element.expiration,
            datasets: [{ data: element.price}]
          });
        });
        this.setState({ chartData });
      });
  }

  render() {
    return (
      <div className="chart">
        {this.state.chartData.map((n, index) => {
          return <Line key={index} data={n} />;
        })}
      </div>
    );
  }
}

标签： reactjschart.js