reactjs - 反应图表“堆叠：真”不起作用

Question

我使用react-charts, 在 ReactJS 中创建了一个带有多个条形的图表。

这是我的组件：

import React, { Component } from "react";
import { Chart } from "react-charts";
import axios from "axios";
const qs = require("qs");

class Volume extends Component {
  state = {
    load_vol_chart: true,
    volume_chart_data: []
  };

  componentDidMount() {
    this.getVolumeChartData();
  }

  getVolumeChartData() {
    var name = this.props.name;
    axios
      .post(
        `http://api.mydomain.in/details/`,
        qs.stringify({ type: name })
      )
      .then(res => {
        if (res.data.result === 1) {
          this.setState({
            volume_chart_data: [
              {
                label: "Label1",
                data: res.data.data2.map(vol => ({
                  x: vol.created_at,
                  y: (vol.volume * vol.percentage) / 100
                }))
              },
              {
                label: "Label2",
                data: res.data.data2.map(vol => ({
                  x: vol.created_at,
                  y: vol.volume
                }))
              }
            ],
            load_vol_chart: false
          });
        }
      });
  }

  render() {
    return (
      <div className="inner-content" style={{ marginTop: "12px" }}>
        <h3>
          <i className="fa fa-caret-right" /> {"  "}
          {this.props.symbol}: Volume
        </h3>
        {this.state.load_vol_chart ? null : (
          <div
            style={{
              width: "100%",
              height: "400px",
              marginTop: "35px",
              marginBottom: "10px"
            }}
          >
            <Chart
              data={this.state.volume_chart_data}
              series={{ type: "bar" }}
              axes={[
                { primary: true, type: "ordinal", position: "left" },
                { position: "bottom", type: "linear" }
              ]}
              primaryCursor
              secondaryCursor
              tooltip
            />
          </div>
        )}
      </div>
    );
  }
}

export default Volume;

我想要的是：

1. Label1条形图是用一些公式计算的。在图表工具提示中，我想显示一个附加值，例如：vol.percent。我也可以在条上显示这个百分比作为标签吗？

2. 我希望这些图表堆叠起来。我试过stacked:true了，它不起作用。

我怎样才能实现这些？

提前致谢。

标签： reactjsbar-chartstackedreact-chartjs