0

再会。我试图将插件chartjs-plugin-stacked100与 chart.js vs3 一起使用，但我没有任何运气。它保持正常的堆叠水平条形图。

我认为我在导入或注册 i 时做错了，但不知道我做错了什么。

这是我做我的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" type="module"></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
            },
        },
    tooltips: {
      callbacks: {
        label: (tooltipItem, data) => {
          const datasetIndex = tooltipItem.datasetIndex;
          const datasetLabel = data.datasets[datasetIndex].label;
          // You can use two type values.
          // `data.originalData` is raw values,
          // `data.calculatedData` is percentage values, e.g. 20.5 (The total value is 100.0)
          const originalValue = data.originalData[datasetIndex][tooltipItem.index];
          const rateValue = data.calculatedData[datasetIndex][tooltipItem.index];
          return `${datasetLabel}: ${rateValue}% (raw ${originalValue})`;
        }
      }
    },
    plugins: {
      plugins:[ChartDataLabels],
      stacked100: { enable: true, replaceTooltipLabel: false }
    }
  }
});

如果有人能指导我正确地做到这一点，将不胜感激。

这是一个带有它的jsbin，例如

谢谢你的时间。

4

0 回答 0