如何在（chart.js）中用简单的折线图显示堆叠条形图的总数

Question

如何在 chart.js 中用折线图显示堆叠条形图的总数据总和？

像这样的东西：

我找不到解决问题的方法。

Answer 1

可以使用for循环简单地计算和，如下所示： （或工作示例：codepen）

    <script>
      const ctx = document.getElementById('myChart');

      const chartData = {
        labels: [
          "April",
          "Mai",
          "Juni",
          "Juli",
        ],
        datasets: [{
            label: "black",
            backgroundColor: "black",
            data: [0, 20, 0, 20],
            stack: 'combined',
            type: 'bar'
          }, {
            label: "red",
            backgroundColor: "red",
            data: [0, 0, 0, 25],
            stack: 'combined',
            type: 'bar'
          },
          {
            label: "green",
            backgroundColor: "green",
            data: [10, 20, 10, 25],
            stack: 'combined',
            type: 'bar'
          },
        ],
      }

      var lineData = {
        label: "line",
        backgroundColor: "blue",
        data: [],
        borderColor: "blue",
        // stack: 'combined',
        type: 'line',
        tension: 0,
      }
      for (let i = 0; i < chartData.datasets[0].data.length; i++) {
        let sum = 0 //or 10
        for (let j = 0; j < chartData.datasets.length; j++) {
          sum += chartData.datasets[j].data[i]

        }
        lineData.data.push(sum)
      }

      chartData.datasets.unshift(lineData)
      console.log(chartData)


      new Chart(ctx, {
        type: 'bar',
        data: chartData,
        options: {
          plugins: {
            title: {
              display: true,
              text: "dvtq chart",
              position: "top",
              align: "start",
              font: {
                size: 20,
                weight: "bold",
              },
            },
          },
          responsive: true,
          maintainAspectRatio: true,
          scales: {
            x: {
              stacked: true,
            },
            y: {
              stacked: true,
            },
          },
        },
      });
    </script>