Chart.js - 带有两个yAxis的折线图：＆＃34; TypeError：yScale未定义＆＃34;

Question

我尝试在Chart.js中显示带有两个yAxis的折线图。

我的代码：

＆＃13;

＆＃13;

 window.onload = function() {
   var ctx = document.getElementById("chart").getContext("2d");
   var myChart = new Chart(ctx, {
     type: "line",
     data: {
       "labels": [
         "01.12.2015",
         "02.12.2015",
         "03.12.2015",
         "04.12.2015",
         "30.12.2015"
       ],
       "datasets": [{
         "label": "DEA Burrweiler Druck Abgabe",
         "fill": "false",
         yAxisID: "y-axis-0",
         "data": [
           8.7913,
           8.6985,
           8.7914,
           8.7948,
           8.7882
         ]
       }, {
         "label": "DEA Burrweiler Druck Zulauf",
         "fill": "false",
         yAxisID: "y-axis-0",
         "data": [
           4.5997,
           4.5526,
           4.5915,
           4.5937,
           4.5795
         ]
       }, {
         "label": "DMS Flemlingen Durchfluss",
         "fill": "false",
         yAxisID: "y-axis-1",
         "data": [
           1.9588,
           2.4226,
           2.1392,
           2.223,
           1.9048
         ]
       }]
     },
     options: {
       yAxes: [{
         position: "left",
         "id": "y-axis-0"
       }, {
         position: "right",
         "id": "y-axis-1"
       }]
     }

   });
 };

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.0/Chart.min.js"></script>
<canvas id="chart" width="400" height="400"></canvas>

＆＃13;

＆＃13;

＆＃13;

错误说：＆＃34; TypeError：yScale未定义＆＃34;

当我删除数据集中的yAxisID选项时，会显示图表，但只显示一个yAxis。

＆＃13;

＆＃13;

    window.onload = function() {
      var ctx = document.getElementById("chart").getContext("2d");
      var myChart = new Chart(ctx, {
        type: "line",
        data: {
          "labels": [
            "01.12.2015",
            "02.12.2015",
            "03.12.2015",
            "04.12.2015",
            "30.12.2015"
          ],
          "datasets": [{
            "label": "DEA Burrweiler Druck Abgabe",
            "fill": "false",
            "data": [
              8.7913,
              8.6985,
              8.7914,
              8.7948,
              8.7882
            ]
          }, {
            "label": "DEA Burrweiler Druck Zulauf",
            "fill": "false",
            "data": [
              4.5997,
              4.5526,
              4.5915,
              4.5937,
              4.5795
            ]
          }, {
            "label": "DMS Flemlingen Durchfluss",
            "fill": "false",
            "data": [
              1.9588,
              2.4226,
              2.1392,
              2.223,
              1.9048
            ]
          }]
        },
        options: {
          yAxes: [{
            position: "left",
            "id": "y-axis-0"
          }, {
            position: "right",
            "id": "y-axis-1"
          }]
        }

      });
    };

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.0/Chart.min.js"></script>
<canvas id="chart" width="400" height="400"></canvas>

＆＃13;

＆＃13;

＆＃13;

我在图表选项中定义了yAxis。那问题是什么，我错过了什么？

Answer 1

yAxes应位于选项下的属性scales下，如此

...
options: {
  scales: {
      yAxes: [{
      ..

小提琴 - http://jsfiddle.net/dahd27d7/