将JavaScript数组值转换为堆叠图形式的chart.js图

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

<canvas id="myChart"></canvas>

// 获取Canvas元素
var ctx = document.getElementById('myChart').getContext('2d');

// 定义数组值
var data = {
  labels: ['标签1', '标签2', '标签3', '标签4', '标签5'],
  datasets: [
    {
      label: '数据集1',
      data: [10, 20, 30, 40, 50],
      backgroundColor: 'rgba(255, 99, 132, 0.2)', // 设置背景颜色
      borderColor: 'rgba(255, 99, 132, 1)', // 设置边框颜色
      borderWidth: 1 // 设置边框宽度
    },
    {
      label: '数据集2',
      data: [20, 30, 40, 50, 60],
      backgroundColor: 'rgba(54, 162, 235, 0.2)',
      borderColor: 'rgba(54, 162, 235, 1)',
      borderWidth: 1
    }
  ]
};

// 创建堆叠图形
var myChart = new Chart(ctx, {
  type: 'bar', // 指定图表类型为堆叠条形图
  data: data,
  options: {
    scales: {
      x: { // x轴设置
        stacked: true // 堆叠x轴数据
      },
      y: { // y轴设置
        stacked: true // 堆叠y轴数据
      }
    }
  }
});