chartjs - 多轴折线图 - 无法读取未定义

Question

当运行以下代码而不} scales和yAxisID时，它会呈现一个2线图，同一轴上有两条线。

更新：仅从之前运行的代码中删除yAxisID值而没有错误 - 尽管仍然只有一个y轴。

添加这些元素以获得分割轴时，它会返回js错误cannot read property 'min' of undefined并且画布为空白。

不确定他是否应该有所作为，但data是通过vue.js方法通过ajax请求返回的json对象。

以下是data.sales变量在浏览器控制台中的外观示例：

  

销售：（187）[0,0,43.2874,10.276，...，23.834]

var ctx = document.getElementById("chart_canvas").getContext('2d')

    var basic_line = new Chart(ctx, {
      type: 'line',
      data: {
        labels: data.labels,
        datasets: [{
          label: 'Price',
          yAxisID: 'B',
          fill: false,
          borderColor: ["#668cff"],
          data: data.price
        }, {
          label: 'Sales',
          yAxisID: 'A',
          fill: false,
          borderColor: ["grey"],
          data: data.sales
        }],
        options: {
          scales: {
            yAxes: [{
              id: 'A',
              position: 'left',
              type: 'linear' 
            }, {
              id: 'B',
              position: 'right',
              type: 'linear'
            }]
          },
          responsive: true,
          maintainAspectRatio: false
        }
      }
    })

Answer 1

这个问题仅仅是因为您将options对象/属性放在data属性中，而它应该在外面。

以下是您的代码的修订版本：

var ctx = document.getElementById("chart_canvas").getContext('2d')

var basic_line = new Chart(ctx, {
   type: 'line',
   data: {
      labels: data.labels,
      datasets: [{
         label: 'Price',
         yAxisID: 'B',
         fill: false,
         borderColor: ["#668cff"],
         data: data.price
      }, {
         label: 'Sales',
         yAxisID: 'A',
         fill: false,
         borderColor: ["grey"],
         data: data.sales
      }]
   },
   options: {
      scales: {
         yAxes: [{
            id: 'A',
            position: 'left',
            type: 'linear'
         }, {
            id: 'B',
            position: 'right',
            type: 'linear'
         }]
      },
      responsive: true,
      maintainAspectRatio: false
   }
});