无法使用react-chartsjs-2 Charts.js检索堆叠的水平图

Question

我有一个react应用程序，其中我想创建堆叠的水平条形图，该条形图还将在条形图上显示该值。

这里是一个codepen.io的示例，但是它是使用纯JavaScript开发的，但需要在ReactJS中提供类似的输出。

这是我尝试过的，但无法成功：

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

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

  componentDidMount() {
    this.getVolumeChartData();
  }

  getVolumeChartData() {
    var stock = this.props.symbol;
    axios
      .post(
        `http://api.mydomain.in/myapidetails/`,
        qs.stringify({ symbol: stock })
      )
      .then(res => {
        if (res.data.result === 1) {
          this.setState({
            volume_chart_data: {
              labels: res.data.data2.map(lbl => lbl.created_at),
              datasets: [
                {
                  label: "VolumePercent",
                  data: res.data.data2.map(
                    datavol =>
                      (datavol.volume * datavol.percentage) / 100
                  ),
                  fill: true,
                  borderColor: "#EC932F",
                  backgroundColor: "#EC932F",
                  pointBorderColor: "#EC932F",
                  pointBackgroundColor: "#EC932F",
                  pointHoverBackgroundColor: "#EC932F",
                  pointHoverBorderColor: "#EC932F"
                },
                {
                  label: "Volume",
                  data: res.data.data2.map(datavol => datavol.volume),
                  fill: true,
                  backgroundColor: "#71B37C",
                  borderColor: "#71B37C",
                  hoverBackgroundColor: "#71B37C",
                  hoverBorderColor: "#71B37C"
                }
              ]
            },
            vol_options: {
              responsive: true,
              scales: {
                xAxes: [
                  {
                    display: true,
                    stacked: true,
                    gridLines: {
                      display: false
                    }
                  }
                ],
                yAxes: [
                  {
                    type: "linear",
                    display: true,
                    stacked: true,
                    position: "left",
                    gridLines: {
                      display: false
                    },
                    ticks: {
                      fontFamily: "'Open Sans Bold', sans-serif",
                      fontSize: 11
                    }
                  }

                ]
              }
            },
            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
              type="horizontalBar"
              data={this.state.volume_chart_data}
              options={this.state.vol_options}
            />
          </div>
        )}
      </div>
    );
  }
}

export default Horizontal;

上面的代码没有显示任何图表。

我还希望显示在VolumePercent栏上的标签不应该是数据，而应该在栏上显示不同的值，例如：vol.percent，而不是填充在其中的数据图表。

编辑： 下面是显示堆叠图表的示例代码，但是我可以找到一种水平显示它的方法，并且还可以在条形图上显示标签。

import React, { Component } from "react";
import axios from "axios";
import { Bar } from "react-chartjs-2";
const qs = require("qs");

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

  componentDidMount() {
    this.getVolumeChartData();
  }

  getVolumeChartData() {
    var stock = this.props.symbol;
    axios
      .post(
        `http://api.domain.in/api/`,
        qs.stringify({ symbol: stock })
      )
      .then(res => {
        if (res.data.result === 1) {
          this.setState({
            volume_chart_data: {
              labels: res.data.data2.map(lbl => lbl.created_at),
              datasets: [
                {
                  label: "Volumepercent",
                  type: "bar",
                  data: res.data.data2.map(
                    datavol =>
                      (datavol.volume * datavol.delivery_percentage) / 100
                  ),
                  fill: true,
                  borderColor: "#EC932F",
                  backgroundColor: "#EC932F",
                  pointBorderColor: "#EC932F",
                  pointBackgroundColor: "#EC932F",
                  pointHoverBackgroundColor: "#EC932F",
                  pointHoverBorderColor: "#EC932F"
                  //   yAxisID: "y-axis-2"
                },
                {
                  label: "Volume",
                  data: res.data.data2.map(datavol => datavol.volume),
                  type: "bar",
                  fill: true,
                  backgroundColor: "#71B37C",
                  borderColor: "#71B37C",
                  hoverBackgroundColor: "#71B37C",
                  hoverBorderColor: "#71B37C",
                  yAxisID: "y-axis-1"
                }
              ]
            },

            vol_options: {
              responsive: true,
              scales: {
                xAxes: [
                  {
                    display: true,
                    stacked: true,
                    gridLines: {
                      display: false
                    }
                    // scaleLabel: {
                    //   display: true,
                    //   labelString: "Date"
                    // }
                  }
                ],
                yAxes: [
                  {
                    type: "linear",
                    display: true,
                    stacked: true,
                    position: "left",
                    id: "y-axis-1",
                    gridLines: {
                      display: false
                    }

                    // labels: {
                    //   show: true
                    // }

                    // scaleLabel: {
                    //   display: true,
                    //   labelString: "Y text"
                    // }
                  }
                  //   {
                  //     type: "linear",
                  //     display: true,
                  //     stacked: true,
                  //     position: "right",
                  //     id: "y-axis-2",
                  //     gridLines: {
                  //       display: false
                  //     }
                  //   }
                ]
              }
            },
            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"
            }}
          >
            <Bar
              data={this.state.volume_chart_data}
              options={this.state.vol_options}
            />
          </div>
        )}
      </div>
    );
  }
}

export default TempVolume;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.5.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.5.2/umd/react-dom.production.min.js"></script>

请建议我如何使用reactjs实现这一目标。

谢谢。