Chart.js的多轴折线图 [英] Multi-axis line chart with Chart.js

问题描述

以下代码试图在折线图上显示两个y轴，并且在两个数据源中都添加了yAxisID.但是，没有任何显示.我可以知道我的代码有什么问题吗?谢谢.

The following code I tried to display two y-axis on the line chart and I added yAxisID in both the data source. However, it is nothing to shown. May I know what's wrong with my code? Thank you.

function BuildChart(labels, valuesa, valuesb, chartTitle) {
  var ctx = document.getElementById("myChart").getContext('2d');
  var myChart = new Chart(ctx, {
    type: 'line',
    data: {
      labels: labels,
      datasets: [{
        label: 'Temperature',
        fill: false,
        data: valuesa,
        yAxisID: 'y1',
        backgroundColor: 'red',
        borderColor: 'red',
      }, {
        label: 'Relative Humidity',
        fill: false,
        data: valuesb,
        yAxisID: 'y2',
        backgroundColor: 'blue',
        borderColor: 'blue',
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      scales: {
        y1: {
          type: 'linear',
          display: true,
          position: 'left',
          },
        y2: {
          type: 'linear',
          display: true,
          position: 'right',
        },
        xAxes: [{
          ticks: {
            beginAtZero: true,
            scaleLabel: {
              display: false,
              labelString: ''
            }
          }
        }],
        yAxes: [{
            scaleLabel: {
            display: false,
            labelString: '',
          }
        }]

      }
    }
  })
  return myChart;
};


var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    var json = JSON.parse(this.response);

    // Map json labels  back to values array
    var labels = json.feed.entry.map(function(e) {
      return e.gsx$tag.$t;
    });

    // Map json values back to values array
    var valuesa = json.feed.entry.map(function(e) {
      return e.gsx$dailytemperature.$t
    });

    // Map json values back to values array
    var valuesb = json.feed.entry.map(function(e) {
      return e.gsx$dailyrh.$t
    });

    BuildChart(labels, valuesa, valuesb, "Temperature", "Relative Humidity");
  }
};
xhttp.open("GET", "https://spreadsheets.google.com/", false);
xhttp.send();

推荐答案

在代码的图表options中，yAxes的定义太多(在xAxis之前和之后).

Within the chart options of your code, there are too many definitions of yAxes (before and after xAxis).

要使其正常工作，基本上可以将整个图表options缩小为您在下面看到的内容.

To make it work, the entire chart options can basically be reduced to what you see below.

options: {
  responsive: true,
  maintainAspectRatio: false,
  scales: {
    yAxes: [{
        type: 'linear',
        position: 'left',
        id: 'y1',
      },
      {
        type: 'linear',
        position: 'right',
        gridLines: {
          drawOnChartArea: false
        },
        id: 'y2',
      }
    ]
  }
}

有关更多信息，请查阅创建多轴 Chart.js文档.

For further information, please consult Create Multiple Axis from the Chart.js documentation.

这篇关于Chart.js的多轴折线图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！