如何使用 chart.js 显示分组条形图？

Question

我目前正在构建一个分组条形图，其中包含两个使用 chart.js 的不同数据集。 component.js 文件中的代码如下：

createChart(){
    var lbls = ['Selling', 'Cost', 'Gross'];
    var curYearData = [2345, 1234, 1111];
    var preYearData = [3456, 2345, 1111];

    var ctx = document.getElementById(‘barChart') as HTMLCanvasElement;
    var barChart = new Chart(ctx, {
      type: 'bar',
      data: {
        labels: lbls,
        datasets: [
        {
          label: ‘2020',
          data: curYearData,
          backgroundColor: 'blue',
        },
        {
          label: ‘2019',
          data: preYearData,
          backgroundColor: 'red',
        }]
      },
      options: {
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero: true
            }
          }]
        }
      }
    });
  }

但是，我没有看到任何数据显示，而是出现了一个空白屏幕。如何在chart.js中创建分组条形图？

Answer 1

你的代码有两个问题。

首先，您没有正确检索 2D 上下文。

var ctx = document.getElementById('barChart').getContext('2d');

还有一些奇怪的撇号需要更改。

请在下面查看您修改后的代码。

var lbls = ['Selling', 'Cost', 'Gross'];
var curYearData = [2345, 1234, 1111];
var preYearData = [3456, 2345, 1111];

var ctx = document.getElementById('barChart').getContext('2d');
var barChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: lbls,
    datasets: [{
        label: '2020',
        data: curYearData,
        backgroundColor: 'blue',
      },
      {
        label: '2019',
        data: preYearData,
        backgroundColor: 'red',
      }
    ]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="barChart"></canvas>