且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

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

更新时间:2023-11-23 23:35:10

修改以下几行:

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
/>