如何显示叠线图js

Question

我尝试显示堆积的折线图，但不起作用。您能否用以下代码建议我应该在哪里更改？

window.onload=function(){
  var ctx = document.getElementById("myChart").getContext("2d");
  var data = {
     labels: {{subcategories|tojson}},
     datasets: [
           {
              1st_sample_dataset
           },
           {
              2nd_sample_dataset
           }
     ]
  },
  options = {
     scales: {
        yAxes: [{
           stacked: true
        }]
     }
  };
  new Chart(ctx).Line(data, {
     onAnimationComplete: function () {
           var sourceCanvas = this.chart.ctx.canvas;
           var targetCtx = document.getElementById("myChartAxis").getContext("2d");
           targetCtx.canvas.width = copyWidth;
           targetCtx.drawImage(sourceCanvas, 0, 0, copyWidth, copyHeight, 0, 0, copyWidth, copyHeight);
     }
  });

}

这是实际显示。

Answer 1

[根据您的代码，我想您正在使用旧版本的chart.js。

new Chart(ctx).Line(data, {
  ...

现在以不同的方式创建图表。

var myChart = new Chart(ctx, {
    type: 'line',
    ...

如果切换到版本2.9.3，则可以正常工作，如以下代码示例所示。

new Chart(document.getElementById('myChartAxis'), {
  type: 'line',
  data: {
    labels: ['A', 'B', 'C', 'D'],
    datasets: [
      {
        label: 'WARNINGS',
          data: [1, 2, 3, 2],
          borderColor: 'rgb(255, 159, 64)',
          backgroundColor: 'rgba(255, 159, 64, 0.2)'
      },
      {
        label: 'ERRORS',
          data: [1, 2, 3, 2],
          borderColor: 'rgb(255, 99, 132)',
          backgroundColor: 'rgba(255, 99, 132, 0.2)'
      }
    ]
  },
  options: {
    scales: {
      yAxes: [{
        stacked: true
      }]
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="myChartAxis" height="90"></canvas>