折线图高于 Chart.JS 中的数据集

Question

所以我有这张图表，其中我将 bar/line 个图表堆叠在一起，但我做错了，因为即使是 5 的数据值也可以像它在 y=如果之前的堆叠折线图是 300，则为 300。

// Create a canvas into the loaded .php page
  var canvas = document.createElement('canvas');
  div = document.getElementById('container');
  canvas.id = "myChart";
  canvas.style.zIndex = 8;
  div.appendChild(canvas);
  const labels = [
      '8',
      '9',
      '11',
      '14',
      '17',
      '21',
      '8',
      '9',
      '11',
      '14',
      '17',
      '21',
  ];

  const data = {
      labels: labels,
      datasets: [{
              label: 'My Fourth dataset',
              backgroundColor: 'rgb(255,0,0)',
              borderColor: 'rgb(255,0,0)',
              data: [3, 2, 5, 2, 2, 5, 8, 3, 2, 5, 2, 2, 5, 8],
              stack: 'combined',
              type: 'bar'
          },
          {
              label: 'My Fifth dataset',
              backgroundColor: 'rgb(255,255,0)',
              borderColor: 'rgb(255,255,0)',
              data: [3, 2, 5, 2, 2, 5, 8, 3, 2, 5, 2, 2, 5, 8],
              stack: 'combined',
              type: 'bar'
          },
          {
              label: 'My Sixth dataset',
              backgroundColor: 'rgb(255,159,64)',
              borderColor: 'rgb(255,159,64)',
              data: [3, 2, 5, 2, 2, 5, 8, 3, 2, 5, 2, 2, 5, 8],
              stack: 'combined',
              type: 'bar'
          },
          {
              label: 'My Seventh dataset',
              backgroundColor: 'rgb(224,224,224)',
              borderColor: 'rgb(224,224,224)',
              data: [3, 2, 5, 2, 2, 5, 8, 3, 2, 5, 2, 2, 5, 8],
              stack: 'combined',
              type: 'bar'
          },
          {
              label: 'My First dataset',
              backgroundColor: 'rgb(30,144,255)',
              borderColor: 'rgb(30,144,255)',
              data: [1, 10, 5, 2, 20, 30, 145, 1, 10, 5, 2, 20, 30, 45],
              stack: 'combined',
          },
          {
              label: 'My Secound dataset',
              backgroundColor: 'rgb(165,42,42)',
              borderColor: 'rgb(165,42,42)',
              data: [1, 10, 5, 2, 20, 30, 145, 1, 10, 5, 2, 20, 30, 45],
              stack: 'combined',
          },
          {
              label: 'My Third dataset',
              backgroundColor: 'rgb(80,80,80)',
              borderColor: 'rgb(80,80,80)',
              data: [3, 2, 5, 2, 2, 5, 5, 3, 2, 5, 2, 2, 5, 8],
              stack: 'combined',
          }
      ]
  };

  const config = {
      type: 'line',
      data: data,
      options: {
          plugins: {
              title: {
                  display: true,
                  text: 'Chart'
              }
          },
          scales: {
              y: {
                  stacked: true
              }
          }
      },
  };
  const myChart = new Chart(
      document.getElementById('myChart'),
      config
  );

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<div id="container" class="wdc-canvas-size">
</div>

我的值怎么显示成这样？我只想让每个数据集代表图表中的实际数据。

Answer 1

如果我理解的很好，你不想把所有的数据堆叠在同一组中，但是'stack'参数对于每个数据集都是相同的。在 docs 中，'stack' 参数标识用于组合多个数据的组 ID。我建议你把数据分成不同的组。

// Create a canvas into the loaded .php page
  var canvas = document.createElement('canvas');
  div = document.getElementById('container');
  canvas.id = "myChart";
  canvas.style.zIndex = 8;
  div.appendChild(canvas);
  const labels = [
      '8',
      '9',
      '11',
      '14',
      '17',
      '21',
      '8',
      '9',
      '11',
      '14',
      '17',
      '21',
  ];

  const data = {
      labels: labels,
      datasets: [{
              label: 'My Fourth dataset',
              backgroundColor: 'rgb(255,0,0)',
              borderColor: 'rgb(255,0,0)',
              data: [3, 2, 5, 2, 2, 5, 8, 3, 2, 5, 2, 2, 5, 8],
              stack: 'combined',
              type: 'bar'
          },
          {
              label: 'My Fifth dataset',
              backgroundColor: 'rgb(255,255,0)',
              borderColor: 'rgb(255,255,0)',
              data: [3, 2, 5, 2, 2, 5, 8, 3, 2, 5, 2, 2, 5, 8],
              stack: 'combined',
              type: 'bar'
          },
          {
              label: 'My Sixth dataset',
              backgroundColor: 'rgb(255,159,64)',
              borderColor: 'rgb(255,159,64)',
              data: [3, 2, 5, 2, 2, 5, 8, 3, 2, 5, 2, 2, 5, 8],
              stack: 'combined',
              type: 'bar'
          },
          {
              label: 'My Seventh dataset',
              backgroundColor: 'rgb(224,224,224)',
              borderColor: 'rgb(224,224,224)',
              data: [3, 2, 5, 2, 2, 5, 8, 3, 2, 5, 2, 2, 5, 8],
              stack: 'combined',
              type: 'bar'
          },
          {
              label: 'My First dataset',
              backgroundColor: 'rgb(30,144,255)',
              borderColor: 'rgb(30,144,255)',
              data: [1, 10, 5, 2, 20, 30, 145, 1, 10, 5, 2, 20, 30, 45],
              stack: 'combined_first',
          },
          {
              label: 'My Secound dataset',
              backgroundColor: 'rgb(165,42,42)',
              borderColor: 'rgb(165,42,42)',
              data: [1, 10, 5, 2, 20, 30, 145, 1, 10, 5, 2, 20, 30, 45],
              stack: 'combined_second',
          },
          {
              label: 'My Third dataset',
              backgroundColor: 'rgb(80,80,80)',
              borderColor: 'rgb(80,80,80)',
              data: [3, 2, 5, 2, 2, 5, 5, 3, 2, 5, 2, 2, 5, 8],
              stack: 'combined_third',
          }
      ]
  };

  const config = {
      type: 'line',
      data: data,
      options: {
          plugins: {
              title: {
                  display: true,
                  text: 'Chart'
              }
          },
          scales: {
              y: {
                  stacked: true
              }
          }
      },
  };
  const myChart = new Chart(
      document.getElementById('myChart'),
      config
  );

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<div id="container" class="wdc-canvas-size">
</div>

折线图高于 Chart.JS 中的数据集

line charts is higher that the dataset in Chart.JS

javascript

chart.js