Comment formater les axes en temps réel hh: mm?

Question

J'utilise amchart, je veux créer un graphique en temps réel, et définir minDate, maxDate pour l'axe x, et le formater en hh: mm. J'ai essayé d'utiliser minimumDate, maximumDate, "minPeriod" : "hh", mais il échoue.

Mon code: demo1.

Je veux utiliser amchart pour construire un graphique en temps réel comme: demo2 (utilisez un graphique en flot).

Les étiquettes xaxis ne sont pas statiques et permettent d'accumuler des données. Aidez-moi, s'il vous plaît! Merci!

Answer 1

Lors de la mise à jour de l'heure, vous devez définir une nouvelle instance de date ou une valeur distincte. La mise à jour de la variable startDate met à jour tous les points de données qui partagent cet objet date comme AmCharts ne clone pas les objets de date dans votre fournisseur de données. Une solution rapide est d'utiliser le résultat d'horodatage milliseconde des setMinutes appeler, par exemple:

var newDate = startDate.setMinutes(startDate.getMinutes() + 10); 
var visits = randomIntFromInterval(50, 100); 

chartData.push({ 
    date: newDate, 
    visits: visits 
}); 

AmCharts convertit en interne les valeurs milliseconde à un nouvel objet Date. Cela devrait être appliqué à vos méthodes de génération et de mise à jour.

minPeriod doit être définie sur la période minimale entre vos points de données. Lorsque vous ajoutez des données par incréments de 10 minutes, cela doit être "mm", et non"hh".

Par défaut, le categoryAxis ne supporte pas la fixation d'un minimumDate et maximumDate, cependant, vous pouvez utiliser pour ajouter cette fonctionnalité datePadding plugin AmCharts. Ce plugin vous permettra de définir un minimumDate et maximumDate propriété dans votre categoryAxis lorsque vous ajoutez la balise de script après votre AmCharts comprend:

<script src="//www.amcharts.com/lib/3/plugins/tools/datePadding/datePadding.min.js"></script> 

Afin de maintenir votre gamme de date après la mise à jour du graphique, vous devez appeler la méthode AmCharts.datePaddingProcess du plugin pour mettre à jour la gamme avant de redessiner le graphique.

Voici ce que votre méthode de updateChart ressemblera après avoir utilisé le plugin datePadding:

function updateChart() { 
    var newDate = startDate.setMinutes(startDate.getMinutes() + 10); 
    var visits = randomIntFromInterval(50, 100); 
    chart.dataProvider.push({ 
    date:newDate, 
    visits:visits 
    }); 
    AmCharts.datePaddingProcess(chart, true); 
    chart.validateData(); 
} 

Et voici ce que vos CategoryAxis ressemblera:

"categoryAxis": { 
    "parseDates": true, 
    "gridAlpha": 0.15, 
    "axisColor": "#DADADA", 
    "minPeriod" : "mm", 
    "minimumDate": min, 
    "maximumDate": max 
    }, 

Updated fiddle