2016-10-14 5 views
0

Beliebiger Weg, um einen Punkt zu markieren, indem Tooltip angezeigt wird, Hover-Status gesetzt wird und Fadenkreuz durch Koordinate xData mit Diagrammlayout in Zeile gezeichnet wird, nicht in Spalte?Highcharts Synchronisierte Diagramme

http://jsfiddle.net/HappyFX/wt91mbvf/

Lösung von https://stackoverflow.com/a/37565667/4262914 basierend auf statische Grafik Breite:

event.chartX = (event.chartX+600) % 200; 

nicht gut, wenn:

.chart{ 
    position: absolute; 
    height: 50%; 
    width: 50%; 
    margin: 0 auto; 
} 

Antwort

1

Das Problem ist, dass searchPoint sucht nach dem nächsten Punkt an den Mauszeiger. Und tatsächlich ist es geschafft: Der erste Punkt auf dem zweiten Diagramm ist hervorgehoben.

Sie können dies ein wenig ändern:

  • Satz Ereignis auf .chart, nicht auf #container
  • Fund schwebte Diagramm und Abrufen den nächsten Punktes
  • diesen Punkt Position als gefälschtes Ereignis verwenden bei der Suche entsprechende Punkte

Und Demo: http://jsfiddle.net/v2t171og/

+0

Funktioniert nicht mit invertierten Diagrammen: http://jsfiddle.net/v2t171og/11/ – melloc

+0

Diese Lösung ist für invertierte Diagramme nicht sinnvoll. Bei dieser Lösung wird die Beziehung zwischen den Punkten von der xy-Position auf der Diagramm. Diese Demo kann dies besser demonstrieren: http://jsfiddle.net/BlackLabel/v2t171og/12/ - Schweben Sie das erste Diagramm und überprüfen Sie die Position des roten Punktes. Sie können versuchen, die Zeichenposition zu skalieren, um den nächsten Marker zu finden, oder den Punkt "index.index" verwenden, um den entsprechenden Punkt auf dem anderen Diagramm zu finden. Zweite Lösung: http://jsfiddle.net/BlackLabel/v2t171og/13/ - Hinweis: Anzahl der Punkte muss übereinstimmen. –