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

我的代码:

 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"
       }]
     }

   });
 };
<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>


该错误显示:“TypeError:yScale未定义”

当我删除数据集中的yAxisID选项时,将显示图表,但仅包含一个yAxis。

    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"
          }]
        }

      });
    };
<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>


我在图表选项中定义了yAxis。那么问题是什么,我想念什么呢?

最佳答案

yAxes应该在选项下的scales属性下,例如

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

fiddle -http://jsfiddle.net/dahd27d7/

关于Chart.js-带有两个yAxis : "TypeError: yScale is undefined"的折线图,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/37028536/

10-10 17:18