在Chart.js中显示类别相对于堆叠条形图的百分比

// 引入Chart.js库
import Chart from 'chart.js';

// 创建canvas元素
const canvas = document.createElement('canvas');
document.body.appendChild(canvas);

// 定义数据集
const categories = ['Category 1', 'Category 2', 'Category 3'];
const dataset1 = [10, 20, 30];
const dataset2 = [20, 30, 40];
const dataset3 = [30, 40, 50];

// 计算每个类别的百分比
const totalValues = dataset1.map((value, index) => value + dataset2[index] + dataset3[index]);
const percentages = dataset1.map((value, index) => Math.round((value / totalValues[index]) * 100));

// 配置选项
const options = {
  responsive: true,
  scales: {
    x: {
      stacked: true,
    },
    y: {
      stacked: true,
      ticks: {
        callback: (value) => `${value}%`,
      },
    },
  },
};

// 创建条形图实例
new Chart(canvas, {
  type: 'bar',
  data: {
    labels: categories,
    datasets: [
      {
        label: 'Dataset 1',
        data: dataset1,
        backgroundColor: 'rgba(255, 99, 132, 0.5)',
      },
      {
        label: 'Dataset 2',
        data: dataset2,
        backgroundColor: 'rgba(54, 162, 235, 0.5)',
      },
      {
        label: 'Dataset 3',
        data: dataset3,
        backgroundColor: 'rgba(75, 192, 192, 0.5)',
      },
    ],
  },
  options: options,
});