ChartJS：图表不能显示全部数据范围。

问题描述 投票：0回答：1

我的ChartJS图表没有显示所有数据。 这就是 最接近的问题 的问题。 实施这个问题的答案并没有帮助（我尝试了两个问题的答案。[{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/[email protected]"></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数据(示例.csv)可以通过这个 PasteBin页面

javascript chart.js
1个回答
0
投票

我在回答自己的问题。

我能够通过确保CSV数据有2列来解决这个问题。单一列的数据是不行的。 一个两列的数据文件(粘贴栏链接)以及修改后的代码都能正常工作。

<!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/[email protected]"></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>

enter image description here

我希望能有更多的精炼答案（比我的新手解决方案更精炼！）被发布出来。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.