2016-12-17 1 views
2

Je veux créer en utilisant Flot Charts un graphique à barres de 24 heures qui a une valeur pour chaque heure. D'après ma compréhension Flot utilise le temps de l'époque pour les valeurs d'heure. Cependant, si vous exécutez le code suivant, le graphique n'affiche aucune valeur ni aucune erreur.Flot Javascript - dessiner un graphique à barres de 24 heures avec des valeurs toutes les heures

//Data for 12am and 5pm respectively in epoch time 
var data = [[43200000, 20], [61200000, 50]]; 

var dataset = [ 
{ 
    label: "amount", 
    data: data, 
    color: "#FF0000", 
    bars: { 
    show: true, 
    align: "center", 
    barWidth: 2 * 60 * 60 * 600, 
    lineWidth:1 
    } 
} 
]; 

var options = { 
yaxis: {}, 
xaxis: { 
    mode: "time", 
    //timeformat: "%H", 
    tickSize: [1, "hour"], // tick every hour 
    min: (new Date(0, 0, 0, 00, 00, 00, 00)).getTime(), 
    max: (new Date(0, 0, 0, 24, 00, 00, 00)).getTime() 
    } 
}; 

$.plot($("#flot-placeholder"), dataset, options); 

enter image description here

Comment puis-je remplir des valeurs sur le graphique?

Répondre

0

L'heure commence à 1970-1-1 (voir here). Modifier vos valeurs min/max à

min: (new Date(1970, 0, 1, 00, 00, 00, 00)).getTime(), 
max: (new Date(1970, 0, 1, 24, 00, 00, 00)).getTime() 

et il fonctionne avec vos données. Voir ceci fiddle.

Mais si vous vous souciez seulement des heures et non de la date, pensez à utiliser categories mode, voir cette fiddle.