Ajout de données à un diagramme de haut diagramme à l'aide d'un tableau avec des ID

Question

Je souhaite ajouter une série à un diagramme de dispersion de haut diagramme dans lequel j'appelle chaque point de la série. Je crée un tableau de la façon suivante:

var chart; // globally available 

makeCharts = function(){ 

     chart = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'container1', 
      type: 'scatter' 
     },   
     series: [{ 
      name: 'a', 
       data: [{      
        'id': 'point1', 
        'x': 1, 
        'y': 2 
       }, { 
        'id': 'point2', 
        'x': 2, 
        'y': 5 
       }] 
      }] 

     }); 
} 

Je voudrais être en mesure de mettre à jour les points sur le graphique en utilisant quelque chose comme:

chart.series[0].setData([{id:['point3', 'point4', 'point5'], y:[0,1,2], x:[1,2,3]}]) 

mais ce n'est pas correct. Est-il possible de mettre à jour un graphique en utilisant cette approche où chaque point a un ID?

EDIT:

Juste pour clarifier les choses, je voudrais pouvoir passer les tableaux directement, plutôt que d'ajouter le point de données par point à l'aide addPoint(). Je pourrais boucle à travers un tableau et utiliser addPoint() faire quelque chose comme ceci:

id:['point3', 'point4', 'point5']; 
y:[0,1,2]; 
x:[1,2,3]; 

for (i=0; i<x.length; i++) 
    { 
    chart.series[0].addPoint({ 
    x: x[[i], 
    y: y[i], 
    id: id[i] 
}); 

    } 

Cependant, ce qui est très lent. Il est beaucoup plus rapide d'ajouter des données en utilisant l'approche suivante:

chart.series[0].setData([[1,0],[2,1],[3,2]]); 

J'ai trouvé que je peux ajouter des données comme ceci:

chart.series[0].setData([[1,0, 'point3'],[2,1, 'point4'],[3,2, 'point5']]); 

mais la seule façon que je peux accéder au id lorsque le point est sélectionné, passe par this.point.config[2]. Avec l'approche suivante, je suis incapable d'utiliser chart.get('pointID') pour identifier un point que je n'ai pas défini le ID. Je veux être en mesure d'identifier le point en utilisant seulement le ID.

Answer 1

bien d'une manière générale, il y a deux façons dont vous pouvez modifier les données du graphique dynamique

1. Series.setData() Utilisez cette méthode lorsque vous souhaitez remplacer complètement les données existantes avec de nouvelles données
2. Series.addPoint() Utilisez cette approche lorsque vous voulez ajouter dynamiquement un sous-ensemble de points.Cette méthode est non seulement d'ajouter un point à la fois, si vous lisez la documentation que vous trouverez bien plus que cette méthode prend un argument de redessiner booléen, et le détail de l'argument est le suivant

redessiner : Boolean
Par défaut à true. Si pour redessiner le graphique après le point est ajouté. Lors de l'ajout de plus d'un point, il est fortement recommandé que l'option de redraw asservie à false, et à la place chart.redraw() soit explicitement appelée après l'ajout de points est terminé.

Dans votre cas, puisque vous voulez ajouter quelques points dynamiquement, mais en conservant les points existants, vous devriez aller à l'approche 2. Mais vous devez l'utiliser dans une boucle, avec le redessiner étant défini sur false (résolution où le problème d'être lent), puis après la boucle, appelez la méthode redessiner explicitement

code

var id = ['point3', 'point4', 'point5'], 
    y = [0, 1, 2], 
    x = [1, 2, 3]; 

for (var i = 0; i < x.length; i++) { 
    chart.series[0].addPoint({ 
     x: x[i], 
     y: y[i], 
     id: id[i] 
    },false); 
} 
chart.redraw(); 

Adding multiple points dynamically | Highcharts and Highstock @ jsFiddle

Answer 2

Essayez d'utiliser series.addPoint.

chart.series[0].addPoint({ 
    x: 0, 
    y: 0, 
    id: 'anything' 
}); 

Mais si vous avez besoin de définir des données pour les séries, utilisez

chart.series[0].setData([{ 
    x: 0, 
    y: 0, 
    id: 'anything' 
},{ 
    x: 2, 
    y: 2, 
    id: 'another' 
}]); 

Answer 3

Dès que vous pouvez transmettre vos données comme ceci:

chart.series[0].setData([[1,0, 'point3'],[2,1, 'point4'],[3,2, 'point5']]); 

(comme vous l'avez dit en question) , Je peux vous suggérer d'utiliser un petit hack.

Nous allons devoir ajouter une autre instruction à la méthode applyOptions du prototype Highcharts.Point.

if (typeof options[0] === 'number' && options[2] && typeof options[2] === 'string') this.id = options[2]; 

Here vous pouvez le voir en action.