ChartJS：图表未显示全部数据答案

【问题标题】：ChartJS: Chart not displaying full range of dataChartJS：图表未显示全部数据
【发布时间】：2020-09-03 12:15:12
【问题描述】：

我的 ChartJS 图表未显示所有数据。这是我的问题的closest question on SO。实现这个问题的答案并没有帮助（我尝试了[{display: false}] 和[{display: true}]）。

我是 chartjs 的新手，大约 5 天前才开始使用它。任何帮助或建议将不胜感激。

基本上，我正在编写一个图表，将 Raspberry Pi 收集的数据绘制出来。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Harp comfort</title>
    <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
  </head>
  <body>
    <h1>Temperature data</h1>
    <canvas id="myChart"></canvas>

    <script>
      // Data from: Raspberry Pi Hat     

      window.addEventListener('load', setup);      
      var ops = {
        scales: {
            xAxes: [{
                display: false
                  }],
                yAxes: [{
                        ticks: {
                            beginAtZero: true
                               }
                       }]
               }
              };
      async function setup() {
        const ctx = document.getElementById('myChart').getContext('2d');
        const dataTemp = await getData();
        const myChart = new Chart(ctx, {
          type: 'line',
          data: {            
            datasets: [
              {
                label: 'Temperature',
                data: dataTemp.temp,        
                fill: false,
                borderColor: 'rgba(255, 99, 132, 1)',
                backgroundColor: 'rgba(255, 99, 132, 0.85)',
                borderWidth: 2
              }              
            ]
          },
         options: ops
        });
      }

      async function getData() {        
        const response = await fetch('./sample.csv');
        const data = await response.text();        
        const temp = [];        
        const rows = data.split('\n').slice(1);
        rows.forEach(row => {
          const col = row.split(',');          
          temp.push(parseFloat(col[0]))
          //console.log(col[0]) //for debugging purpose
        });
        return { temp };
      }
      //getData(); for debugging purpose
    </script>
  </body>
</html>

CSV 数据 (sample.csv) 可通过此PasteBin page

获得

【问题讨论】：

标签： javascript chart.js

【解决方案1】：

我正在回答我自己的问题。

我能够通过确保 CSV 数据有 2 列来解决这个问题。单列数据不起作用。两列数据文件 (PasteBin Link) 以及修改后的代码可以正常工作：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Harp Temperature and RH</title>
    <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
  </head>
  <body>
    <h1>Harp comfort</h1>
    <canvas id="myChart" width="400" height="200"></canvas>



    <script>
      // Data from: Raspberry Pi Hat     

      window.addEventListener('load', setup);      
      var ops = {
        scales: {
            xAxes: [{
                display: false
                  }],
                yAxes: [{
                        ticks: {
                            beginAtZero: true
                               }
                       }]
               }
              };
      async function setup() {
        const ctx = document.getElementById('myChart').getContext('2d');
        const dataTemp = await getData();
        const myChart = new Chart(ctx, {
          type: 'line',
          data: {   
        labels: dataTemp.timestamp,
            datasets: [
              {
                label: 'Temperature',
                data: dataTemp.temp,        
                fill: false,
                borderColor: 'rgba(255, 99, 132, 1)',
                backgroundColor: 'rgba(255, 99, 132, 0.85)',
                borderWidth: 2
              }              
            ]
          },
         options: ops
        });
      }

      async function getData() {        
        const response = await fetch('./sample.csv');
        const data = await response.text();     
    const timestamp = [];
        const temp = [];        
        const rows = data.split('\n').slice(1);
        rows.forEach(row => {
          const col = row.split(',');
      timestamp.push(col[0])
          temp.push(parseFloat(col[1]))
          //console.log(col[0]) //for debugging purpose
        });
        return { temp, timestamp };
      }
      //getData(); for debugging purpose
    </script>
  </body>
</html>

如果发布更精致的答案（比我的新手解决方案！），我会很高兴。

【讨论】：