具有Chart.js和来自Google表格的JSON数据的多轴折线图

Question

[我试图通过Chart.js在多轴折线图中可视化存储在Google表格中的数据。

我的数据看起来像这样：

我尝试了以下代码，但是只显示了前两个数据（0:00和1:00），而不是整个集合数据。另外，它只有一个Y轴。我可以知道我的代码出什么问题吗？

function BuildChart(labels, valuesa, valuesb, chartTitle) {
    var data = {
        labels: labels,
        datasets: [{
            label: 'Temperature', // Name the series
            data: valuesa,
            },
           {
            label: chartTitle, // Name the series
            data: valuesb,
            }]
    };

    var ctx = document.getElementById("myChart").getContext('2d');
    var myChart = new Chart(ctx, {
            type: 'line',
        data: {
        datasets: [{
            label: 'Temperature',
            fill: false,
            data: valuesa,
            backgroundColor: ['rgb(255, 99, 132, 0.8)']
          },{
            label: 'Relative Humidity',
            fill: false,
            data: valuesb,
            backgroundColor: ['rgb(255, 99, 132, 0.8)'],
        options: {
            responsive: true, // Instruct chart js to respond nicely.
            maintainAspectRatio: false, // Add to prevent default behaviour of full-width/height
            scales: {
                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);
      console.log(json);

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

非常感谢您的帮助。谢谢。

Answer 1

您忘记定义data.labels

data: {
  labels: labels,
  ...

另外图表options嵌套在第二个dataset内。请查看下面的更正代码。

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,
        backgroundColor: 'red',
        borderColor: 'red'
      }, {
        label: 'Relative Humidity',
        fill: false,
        data: valuesb,
        backgroundColor: 'blue',
        borderColor: 'blue'
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      scales: {
        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/feeds/list/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx/x/public/full?alt=json", false);
xhttp.send();

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script> 
<canvas id="myChart""></canvas>