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轴为标记。我找到了一个很好的例子来实现我在这里想要做的事情-> How to map multiple charts with chart.js in react

但是我想根据此数据创建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>
    );
  }
}

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

0 个答案: