Javascript 带chart.js的多轴折线图

Javascript 带chart.js的多轴折线图,javascript,charts,chart.js,yaxis,Javascript,Charts,Chart.js,Yaxis,下面的代码我试图在折线图上显示两个y轴,并在两个数据源中添加了yAxisID。然而,这是什么显示。我可以知道我的密码有什么问题吗?多谢各位 function BuildChart(labels, valuesa, valuesb, chartTitle) { var ctx = document.getElementById("myChart").getContext('2d'); var myChart = new Chart(ctx, { type: 'line',

下面的代码我试图在折线图上显示两个y轴,并在两个数据源中添加了
yAxisID
。然而,这是什么显示。我可以知道我的密码有什么问题吗?多谢各位

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

在代码的图表
选项
中,
yax
的定义太多(在
xAxis
之前和之后)

为了使其正常工作,整个图表
选项
基本上可以简化为您在下面看到的内容

options: {
  responsive: true,
  maintainAspectRatio: false,
  scales: {
    yAxes: [{
        type: 'linear',
        position: 'left',
        id: 'y1',
      },
      {
        type: 'linear',
        position: 'right',
        gridLines: {
          drawOnChartArea: false
        },
        id: 'y2',
      }
    ]
  }
}
有关更多信息,请咨询 Chart.js文档