如何將小時和分鐘數據輸入到chartJS

Question

我正在嘗試使用Chart.js製作折線圖。我的數據的形式如下：

var result = [{x:"18:00",y:"230"},{x:"19:00",y:"232"},{x:"20:00",y:"236"},{x:"22:00",y:"228"}]; 

其中x代表小時和分鐘的時間。我喂這樣的數據

var ctx = document.getElementById("myChart").getContext('2d'); 
    var myChart = new Chart(ctx, { 
     type: 'line', 
     data: { 
      labels: ["00:00","01:00","02:00","03:00","04:00","05:00","06:00","07:00","08:00","09:00","10:00","11:00","12:00","13:00","14:00","15:00","16:00","17:00","18:00","19:00","20:00","21:00","22:00","23:00","24:00"], 
      datasets: [{ 
       label: 'Voltage Fluctuation', 
       data: result, 
       borderWidth: 1 
      }] 
     }, 
     options: { 
      scales: { 
       xAxes: [{ 
        type: 'time', 
        position: 'bottom', 
        unit: 'minute', 
     time: { 
      displayFormats: { 
      hour: 'HH:mm' 
      } 
     } 
     }], 
    }, 
    } 
}); 

而且我得到一個空的圖表。我哪裏錯了？我覺得我在標籤上做錯了什麼，因爲它們沒有顯示在圖表上，但我不明白。有沒有什麼辦法可以用momentjs提供數據標籤？

Answer 1

您不能將result數組傳遞到data，因爲它格式不正確。 data屬性期望一個數字數組。因此，在將它們用於圖表之前，您需要解析標籤（使用moment.js）和result數組中的數據。

下面是如何標籤和數據應該從result陣列進行解析，並送入圖表：

var result = [{ x: "18:00", y: "230" }, { x: "19:00", y: "232" }, { x: "20:00", y: "236" }, { x: "22:00", y: "228" }]; 
 

 
// parse labels and data 
 
var labels = result.map(e => moment(e.x, 'HH:mm')); 
 
var data = result.map(e => +e.y); 
 

 
var ctx = document.getElementById("myChart").getContext('2d'); 
 
var myChart = new Chart(ctx, { 
 
    type: 'line', 
 
    data: { 
 
     labels: labels, 
 
     datasets: [{ 
 
     label: 'Voltage Fluctuation', 
 
     data: data, 
 
     borderWidth: 1 
 
     }] 
 
    }, 
 
    options: { 
 
     scales: { 
 
     xAxes: [{ 
 
      type: 'time', 
 
      time: { 
 
       unit: 'hour', 
 
       displayFormats: { 
 
        hour: 'HH:mm' 
 
       } 
 
      } 
 
     }] 
 
     }, 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script> 
 
<canvas id="myChart"></canvas>