HighChart - Chemins personnalisés non liés au graphique

Question

J'ai un graphique HighStock qui extrait des données OHLC et crée un graphique avec 3 séries - 1 chandelier, 1 volume et 1 jeu de drapeaux. Tout cela fonctionne très bien.

Je souhaite ajouter des lignes de tendance personnalisées au graphique. Je vais déterminer les points et faire les chemins en fonction de la logique personnalisée.

Le problème est que lorsque j'utilise le Renderer du graphique pour dessiner mon chemin, le chemin n'est pas connecté au graphique sous-jacent. Lorsque la plage de dates du graphique est modifiée et/ou que de nouveaux points sont ajoutés au series principal, l'emplacement et la taille de mon chemin personnalisé restent inchangés. C'est constant.

J'ai besoin que l'emplacement/les points de terminaison du chemin personnalisé soient liés aux points de données du diagramme et non aux coordonnées du dessin svg. Y a-t-il un moyen d'accomplir cela?

Voici la partie du code qui ajoute un chemin simple de pointa à pointb. Le chemin rend comme prévu, mais est alors statique:

buildPath: function(pointa, pointb){ 
     this.myChart.renderer.path(this.buildPathArray(pointa,pointb)) 
      .attr({ 
       'stroke-width': 2, 
       stroke: 'red' 
      }).add(); 
    }, 
    buildPathArray: function(pointa, pointb){ 
     var pathArray = []; 
     pathArray.push('M'); 
     pathArray.push(pointa.plotX); 
     pathArray.push(pointa.plotClose); 
     pathArray.push('L'); 
     pathArray.push(pointb.plotX); 
     pathArray.push(pointb.plotClose); 
     pathArray.push('Z'); 
     return pathArray; 
    } 

par demande, j'ai créé a JS Fiddle that demonstrates the general issue.

Toute aide est très appréciée.

Answer 1

SOLVED

Cela ne semble pas venir gratuitement avec Highcharts. Ou si c'est le cas, je n'ai pas trouvé la technique.

J'ai dû utiliser à la fois les événements load et redraw de l'objet chart contenu dans mon StockChart.

Sur load, je dessine les chemins initiaux, alignés avec les objets Point impliqués dans mes lignes de tendance. Comme je construis ces objets path (SVGElement objets contenant les éléments authentiques SVG path) je garde la trace d'eux dans un tableau.

Sur redraw, je dois à la fois détruire les anciennes lignes de tendance et en créer de nouvelles. Donc, je boucle sur mon tableau d'anciens éléments et supprimer chacun de leur propre parentNode. Ensuite, je dessine une nouvelle version de mes lignes de tendance en fonction de l'emplacement nouvellement tracé de chacun de mes objets pertinents Point.

Le résultat final est que sur chaque événement redraw, les lignes semblent se déplacer avec le graphique, alors qu'elles sont réellement détruites et recréées.