如何仅用JavaScript（无TypeScript）在Chart.js v3中使用chartjs-plugin-stacked100插件

存在的问题 #

• 核心配置拼写错误：stacked100插件的启用字段为enabled，你的代码写成了enable，少了末尾的d，导致插件未激活
• 版本适配错误：Chart.js v3 中tooltip配置必须放在options.plugins层级下，你当前写在options根目录是v2版本的用法，无法生效
• 配置层级错误：你在options.plugins下额外嵌套了一层plugins字段，属于无效冗余配置
• 依赖缺失报错：你配置了ChartDataLabels相关内容，但未引入对应插件的CDN资源也未完成注册，会触发控制台报错
• 回调参数适配错误：v3版本的tooltip回调参数结构和v2不同，你原来的参数写法无法正确获取插件暴露的originalData和calculatedData属性
• 加载模式不匹配：你给JS引入标签加了type="module"属性，模块模式下会隔离全局变量，导致你通过CDN引入挂载到全局的插件无法被正常访问

修改后的完整代码 #

HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.0/dist/chart.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-stacked100@1.0.0"></script>
</head>
<body>
    <div id="my-chart-container" style="height:400px;">
        <canvas id="my-chart"></canvas>
    </div>
    <script src="./index.js"></script>
</body>
</html>

JS代码 #

Chart.register(ChartjsPluginStacked100);
new Chart(document.getElementById("my-chart"), {
  type: "bar",
  data: {
    labels: ["2010-2015", "2016", "2017", "2018", "2019"],
    datasets: [
      { label: "IG", data: [0, 250, 7417.5, 650, 1455], backgroundColor: "rgba(244, 143, 177, 0.6)" },
      { label: "HY", data: [0, 0, 0, 1000, 0], backgroundColor: "rgba(255, 235, 59, 0.6)" },
      { label: "NR", data: [0, 675, 4182.5, 1505, 1735], backgroundColor: "rgba(100, 181, 246, 0.6)" }
    ]
  },
  options: {
    indexAxis: 'y',
    scales: {
      xAxis: {
        stacked: true
      },
      yAxis: {
        stacked: true
      }
    },
    plugins: {
      tooltip: {
        callbacks: {
          label: (context) => {
            const datasetLabel = context.dataset.label;
            const originalValue = context.chart.data.originalData[context.datasetIndex][context.dataIndex];
            const rateValue = context.chart.data.calculatedData[context.datasetIndex][context.dataIndex];
            return `${datasetLabel}: ${rateValue.toFixed(1)}% (原始值 ${originalValue})`;
          }
        }
      },
      stacked100: { enabled: true, replaceTooltipLabel: false }
    }
  }
});

修改后即可正常渲染100%堆叠横向柱状图，X轴会自动显示0-100%的占比刻度，tooltip也能正确输出百分比和原始数值。

内容的提问来源于stack exchange，提问作者garbanm