如何在 React 中创建带有 Chart.js 的堆叠水平条形图？

Question

我真的很难找到这个问题的明确答案——尤其是在 React 中。我想为我的 React 应用程序创建一个堆叠的水平条形图组件。这是我要创建的图表类型：https://codepen.io/pen。下面粘贴的代码是我到目前为止尝试使用的代码，但目前未呈现。

import React, { Component } from 'react';
import Chart from 'chart.js/auto';

export default class LineChart extends Component {
  chartRef = React.createRef();

  componentDidMount() {
    const ctx = this.chartRef.current.getContext('2d');

    new Chart(ctx, {
      type: 'bar',
      data: {
        labels: [
          'Sunday',
          'Monday',
          'Tuesday',
          'Wednesday',
          'Thursday',
          'Friday',
          'Saturday',
        ],
      },
      options: {
        scales: {
          yAxes: [
            {
              stacked: true,
            },
          ],
        },
      },

      datasets: [
        {
          data: [86, 114, 106, 106, 107, 111, 133],
          label: 'Total',
          borderColor: '#3e95cd',
          backgroundColor: '#7bb6dd',
          // fill: False,
        },
        {
          data: [70, 90, 44, 60, 83, 90, 100],
          label: 'Accepted',
          borderColor: '#3cba9f',
          backgroundColor: '#71d1bd',
          // fill: False,
        },
        {
          data: [10, 21, 60, 44, 17, 21, 17],
          label: 'Pending',
          borderColor: '#ffa500',
          backgroundColor: '#ffc04d',
          // fill: False,
        },
        {
          data: [6, 3, 2, 2, 7, 0, 16],
          label: 'Rejected',
          borderColor: '#c45850',
          backgroundColor: '#d78f89',
          // fill: False,
        },
      ],
    });
  }
  render() {
    return (
      <div>
        <canvas id="myChart" ref={this.chartRef} />
      </div>
    );
  }
}

Answer 1

您在使用 V3 时使用了 Chart.js 的 V2 语法。 V3 有重大的突破性变化，包括所有规模都是他们自己的对象。对于所有更改，请阅读 migration guide.

当使用对象作为尺度时，你会得到你想要的：

const options = {
  type: 'bar',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        backgroundColor: 'orange'
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        backgroundColor: 'pink'
      }
    ]
  },
  options: {
    scales: {
      y: {
        stacked: true
      },
      x: {
        stacked: true
      }
    }
  }
}

const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.js"></script>
</body>

如何在 React 中创建带有 Chart.js 的堆叠水平条形图？

How do I create a stacked horizontal bar chart with Chart.js in React?

reactjs

chart.js