0

我是新反应，想在我的组件中显示图表，其中数据应该从 API 响应中填充。

我的示例 API 响应是：

{
    "result": 1,
    "data": [
        {
            "data1": "1272.00",
            "data2": "1183.00",
            "price": "131.00"
        },
        {
            "data1": "1328.00",
            "data2": "1468.00",
            "price": "132.00"
        },
        {
            "data1": "1829.00",
            "data2": "1445.00",
            "price": "133.00"
        },
        {
            "data1": "1089.00",
            "data2": "968.00",
            "price": "134.00"
        },
        {
            "data1": "16700.00",
            "data2": "20901.00",
            "price": "135.00"
        },
        {
            "data1": "804.00",
            "data2": "1110.00",
            "price": "136.00"
        },
    ]
}

我想price在 YAxis 和多个数据中，即XAxis 上data1的data2字段。

React 代码：（只实现一个）

import React, { Component } from "react";
import Sidebar from "./Sidebar";
import { Chart } from "react-charts";
import axios from "axios";

const qs = require("qs");

class Home extends Component {
  state = {
    datelist: [],
    chart_data: []
  };

  componentDidMount() {
    this.getDatesList();
  }

  getDatesList() {
    axios.get("http://127.0.0.1:8000/dateslist/").then(res => {
      if (res.data.result === 1) {
        this.setState({ datelist: res.data.data });
      } else {
        this.setState({ datelist: [] });
      }
    });
  }

  handleChange = event => {
    var dateval = event.target.value;
    axios
      .post(`http://127.0.0.1:8000/pricedata/`, qs.stringify({ date: dateval }))
      .then(res => {
        if (res.data.result === 1) {
          this.setState({
            chart_data: [
              {
                label: "Strike",
                data: res.data.data
              }
            ]
          });
        } else {
          this.setState({ chart_data: [] });
        }
      });
  };

  render() {
    return (
      <div className="container container_padding">
        <div className="row">
          <Sidebar />
          <div className="col-md-9 col-sm-9 col-xs-12">
            <select
              className="form-control"
              style={{ width: "120px", marginBottom: "10px" }}
              onChange={this.handleChange}
            >
              {this.state.datelist.map((date, i) => (
                <option value={date} key={i}>
                  {date}
                </option>
              ))}
            </select>
            <div
              style={{
                width: "400px",
                height: "300px"
              }}
            >
              <Chart
                data={this.state.chart_data}
                series={{ type: "bar" }}
                axes={[
                  { primary: true, type: "ordinal", position: "bottom" },
                  { type: "linear", position: "left", stacked: true }
                ]}
                primaryCursor
                tooltip
              />
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default Home;

状态已更新，但图表未显示。

注意：我已将图表库安装为 -npm i --save react-chartjs-2 chart.js

我错过了什么？我应该如何正确填充要显示的数据？

提前致谢。

4

1 回答 1

1

我查看了响应，发现您正在将数据道具传递给图表，如下所示：

{
    label: "Strike",
    data: [
    {
        "data1": "1272.00",
        "data2": "1183.00",
        "price": "131.00"
    },
    {
        "data1": "1328.00",
        "data2": "1468.00",
        "price": "132.00"
    },
  ]
}

这显然是不正确的，在 react-charts 文档中您可以看到它接受以下模式的数据：

 [
    {
      label: "Series 1",
      data: [[0, 1], [1, 2], [2, 4], [3, 2], [4, 7]]
    },
    {
      label: "Series 2",
      data: [[0, 3], [1, 1], [2, 5], [3, 6], [4, 4]]
    }
  ]

因此，要使您的代码正常工作，您需要操纵 API 调用的响应以匹配模式。

可以通过更改以下代码行来完成：

handleChange = event => {
    var dateval = event.target.value;
    axios
      .post(`http://127.0.0.1:8000/pricedata/`, qs.stringify({ date: dateval }))
      .then(res => {
        if (res.data.result === 1) {
          this.setState({
            chart_data: [
              {
                label: "Strike",
                data: res.data.data.map(Object.values)
              }
            ]
          });
        } else {
          this.setState({ chart_data: [] });
        }
      });
  };
于 2019-01-15T10:43:46.340 回答