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

Question

I'm really struggling to find a clear answer to this question - especially in React.我真的很难找到这个问题的明确答案——尤其是在 React 中。 I'd like to create a stacked horizontal bar chart component for my React application.我想为我的 React 应用程序创建一个堆叠的水平条形图组件。 This is the type of chart I'm trying to create: https://codepen.io/pen .这是我要创建的图表类型： https://codepen.io/pen 。 The code pasted below is what I've tried to use so far but it isn't rendering currently.下面粘贴的代码是我到目前为止尝试使用的代码，但目前未呈现。

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

You are using V2 syntax of Chart.js while using V3.您在使用 V3 时使用 Chart.js 的 V2 语法。 V3 has major breaking changis inclusing all scales are their own object. For all changes please read the migration guide . V3 有重大的突破性变化，包括所有规模都是他们自己的 object。对于所有变化，请阅读迁移指南。

When using objects for scales you get what you want:当使用对象作为尺度时，你会得到你想要的：

 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 的堆叠水平条形图？

问题描述

1 个解决方案

解决方案1
2 已采纳 2022-04-02 14:16:49

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

问题描述

1 个解决方案

解决方案1 2 已采纳 2022-04-02 14:16:49

解决方案1
2 已采纳 2022-04-02 14:16:49