chartjs:无法创建堆叠图表

rjjhvcjd  于 2023-06-22  发布在  Chart.js
关注(0)|答案(1)|浏览(186)

我觉得自己很笨,但我不明白我错在哪里:)
我试图通过chartjs构建一个堆叠条形图,但我只获得了一个带有分组标签的图表:

const ctx = document.getElementById('bar-chart')
var chart = new Chart(ctx, {
    type: 'bar',
  options: {
    responsive: true,
    scales: {
      y: {
        stacked: true
      },
      x: {
        stacked: true
      }
    }
  },
  data: {
    labels: ['A','B','C'],
    datasets: [{
      label: 'Year 2020',
      data: [10,20,25],
      backgroundColor: '#ff0000'
    },{
      label: 'Year 2021',
      data: [15,30,10],
      backgroundColor: '#00ff00'
    },{
      label: 'Year 2022',
      data: [30,5,25],
      backgroundColor: '#0000ff'
    }]
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.min.js"></script>
<canvas id="bar-chart" width="600" height="350"></canvas>

但我得到了这个...

...而我的目标是获得3条数据堆叠(垂直)。
我哪里做错了?

sxpgvts3

sxpgvts31#

我使用的是一个旧的chartjs版本,它没有实现分组图表功能。
指的是…

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

问题就解决了

相关问题