Comment faire pour alimenter les données d'heure et de minute en chartJS

Question

J'essaye de créer un graphique linéaire en utilisant Chart.js. Mes données est de la forme:

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

Où x représente le temps avec des heures et des minutes. J'ai alimenté les données comme ceci

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' 
      } 
     } 
     }], 
    }, 
    } 
}); 

Et je reçois un tableau vide. Où vais-je mal? Je sens que je fais quelque chose de mal avec mes étiquettes car elles n'apparaissent pas sur le tableau mais je ne comprends pas comment. Y at-il un moyen de nourrir les datalabels avec des moments?

Answer 1

Vous ne pouvez pas simplement passer le tableau result à data, car il n'est pas au format correct. La propriété data attend un tableau de nombres. Donc, vous devez analyser les étiquettes (en utilisant moment.js) et les données du tableau result avant de les utiliser pour le graphique.

Voici comment les étiquettes et les données doivent être analysées à partir du tableau result et nourris au tableau:

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>