Reactjs 如何使用react图表在同一图表上配置多个条形图

我有一个react，我可以在其中显示。为此，我使用了

react图表

库

为了填充图表数据，我正在进行API调用，然后更新状态。我想为YAxis显示多个值

我的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"
    },
 ]
}

我想要yaxis的数据1和数据2值以及XAxis的价格

反应代码：

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();
    axios
      .post(
        `http://127.0.0.1:8000/pricedata/`,
        qs.stringify({ date: "2019-01-11" })
      )
      .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: [] });
        }
      });
  }

  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.map(Object.values)
              }
            ]
          });
        } 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;

import React，{Component}来自“React”；
从“/Sidebar”导入侧栏；
从“反应图表”导入{Chart}；
从“axios”导入axios；
常量qs=要求（“qs”）；
类Home扩展组件{
状态={
日期列表：[]，
图表数据：[]
};
componentDidMount（）{
这是.getDatesList（）；
axios
.邮政(
`http://127.0.0.1:8000/pricedata/`,
严格化（{日期：2019-01-11}）
)
。然后（res=>{
如果（res.data.result==1）{
这是我的国家({
图表数据：[
{
标签：“罢工”，
数据：res.data.data.map（Object.values）
}
]
});
}否则{
this.setState（{chart_data:[]}）；
}
});
}
getDatesList（）{
axios.get（“http://127.0.0.1:8000/dateslist/）然后（res=>{
如果（res.data.result==1）{
this.setState（{datelist:res.data.data}）；
}否则{
this.setState（{datelist:[]}）；
}
});
}
handleChange=事件=>{
var dateval=event.target.value；
axios
.邮政(`http://127.0.0.1:8000/pricedata/`，qs.stringify（{date:dateval}））
。然后（res=>{
如果（res.data.result==1）{
这是我的国家({
图表数据：[
{
标签：“罢工”，
数据：res.data.data.map（Object.values）
}
]
});
}否则{
this.setState（{chart_data:[]}）；
}
});
};
render（）{
返回(
{this.state.datelist.map（（date，i）=>(
{date}
))}
);
}
}
导出默认主页；

我怎样才能做到这一点

---

提前感谢。

修改以下行：

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: "bar1",
                data: res.data.data.map((d) => ({ x: d.price, y: d.data1 })
              },
              {
                label: "bar2",
                data: res.data.data.map((d) => ({ x: d.price, y: d.data2 })
              }
            ]
          });
        } else {
          this.setState({ chart_data: [] });
        }
      });
  };

和内部渲染：

<Chart
  data={this.state.chart_data}
  series={{ type: 'bar' }}
  axes={[
    { primary: true, position: 'bottom', type: 'ordinal' },
    { position: 'left', type: 'linear', min: 0 },
  ]}
  primaryCursor
  secondaryCursor
  tooltip
/>

这里到底有什么问题？@FortyTwo我的图表只显示一个条形图，其中包括所有3个值，即data1、data2和price，但我想要-XAxis应该有price，YAxis应该有data1和data2（多种类型）@ReemaParakh，回答了您的问题，请看一看，并让我们知道这是否有助于感谢您的回答。请您也检查一下：