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

本文介绍了如何使用反应图在同一图表上配置多个条形图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我有一个反应，可以显示.为此，我正在使用react-charts库.

I have a react wherein I am able to display the. For this i am using react-charts library.

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

To populate chart data I am making a API call and thereafter updating the state. I want to display multiple values for YAxis.

我的示例API响应是:

My sample API response is:

{ "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的data1和data2值以及XAxis的价格.

I want data1 and data2 values forYAxis and price for 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( `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("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(`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;

我该如何实现?

谢谢.

推荐答案

修改以下几行:

handleChange = event => { var dateval = event.target.value; axios .post(`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 />