web-dev-qa-db-fra.com

Highcharts - redessiner () vs nouveau Highcharts.chart

J'ai du mal à comprendre la bonne façon de mettre à jour un graphique en hiérarchie. Supposons que j'ai rendu un graphique, puis je veux le mettre à jour d'une manière ou d'une autre. Par exemple, je souhaite peut-être modifier les valeurs de la série de données ou activer les étiquettes de données.

Pour le moment, le seul moyen de comprendre comment faire cela consiste à modifier les options du graphique et à utiliser new Highcharts.chart pour indiquer au Highcharts de redessiner.

Cependant, je me demande si cela pourrait être exagéré et qu'il pourrait être possible de modifier le graphique «in situ», sans avoir à repartir de zéro avec new Highcharts.chart. Je remarque qu'il existe une méthode redraw(), mais je ne parviens pas à la faire fonctionner.

Toute aide est fortement appréciée.

Merci,

Robin

Exemple de code est comme suit et au bas il y a un jsFiddle

$(document).ready(function() {

chartOptions = {
    chart: {
        renderTo: 'container',
        type: 'area',
    },
    series: [{
        data: [1,2,3]
    }]
};

chart1 = new Highcharts.Chart(chartOptions);


chartOptions.series[0].data= [10,5,2];
chart1 = new Highcharts.Chart(chartOptions);

//The following seems to have no effect
chart1.series[0].data = [2,4,4];
chart1.redraw();

});​

http://jsfiddle.net/sUXsu/18/

[modifier]:

Pour les futurs téléspectateurs de cette question, il convient de noter qu’il n’existe aucune méthode pour masquer et afficher les étiquettes de données. Ce qui suit montre comment faire: http://jsfiddle.net/supertrue/tCF8Y/

javascripthighcharts
73
RobinL

chart.series[0].setData(data,true);

La méthode setData elle-même appellera la méthode de redessinage

78
karthik - LK

vous devez appeler set et add fonctions sur l'objet graphique avant d'appeler redessiner.

chart.xAxis[0].setCategories([2,4,5,6,7], false);

chart.addSeries({
    name: "acx",
    data: [4,5,6,7,8]
}, false);

chart.redraw();
13
waqas
var newData = [1,2,3,4,5,6,7];
var chart = $('#chartjs').highcharts();
chart.series[0].setData(newData, true);

Explication:
La variable newData contient une valeur qui veut mettre à jour dans le graphique. La variable chart est un objet d'un graphique. setData est une méthode fournie par highchart pour mettre à jour les données.

La méthode setData contient deux paramètres. Dans le premier, nous devons passer la nouvelle valeur sous forme de tableau et dans le second, la valeur booléenne. Si true, le graphique se met à jour et si false, nous devons utiliser la méthode redraw() pour mettre à jour le graphique (i.e chart.redraw();).

http://jsfiddle.net/NxEnH/8/

6
Sandip

@RobinL Comme mentionné dans les commentaires précédents, vous pouvez utiliser chart.series [n] .setData (). Tout d’abord, vous devez vous assurer que vous avez affecté une instance de graphique à la variable de graphique afin qu’elle adopte toutes les propriétés et méthodes dont vous avez besoin pour accéder au graphique et le manipuler.

J’ai également utilisé le deuxième paramètre de setData () et l’avait mis à false pour empêcher le rendu automatique du graphique. C’est parce que j’ai plusieurs séries de données. Je préfère donc mettre à jour chacune d’elles, avec render = false, puis exécuter chart.redraw (). Cette performance multipliée (j'ai entre 10 000 et 100 000 points de données et actualise le jeu de données toutes les 50 millisecondes).

0
lauri108