Annotation der Länge einer geplotteten Linie anzeigen, wenn sie über

liegt. Mit dygraphs werde ich eine Serie zeichnen, die wie eine Treppe aussieht: konsekutive horizontale und vertikale Linien. (Mit unterschiedlicher Breite und konstanter Höhe).Annotation der Länge einer geplotteten Linie anzeigen, wenn sie über

Ich möchte eine Anmerkung oder ein Etikett haben, die die Länge einer horizontalen Linie zeigen, wenn es über es schwebt. Wie könnte dies geschehen? Vielleicht gibt es eine Möglichkeit:

einen Rückruf bereitstellt, die aufgerufen wird, wenn ein Liniensegment über
Verwendung schwebt ist, die eine temporäre Anmerkung hinzuzufügen Rückruf (mit den dokumentierten Anmerkungen verfügen)

Oder vielleicht gibt es einen besseren Weg?

Beispiel:

<head><script 
    type="text/javascript" 
    src="http://dygraphs.com/dygraph-combined.js"></script> 
</head> 
<body> 
    <div id="graphdiv"></div> 
    <script type="text/javascript"> 
    var g = new Dygraph(document.getElementById("graphdiv"), 
    [ 
     [0, 1],  // Starts at height 1, step width is 2 
     [2, 2],  // step width is 1 
     [3, 3],  // step width is 0.5 
     [3.5, 4], // step width is 0.25 
     [3.75, 5], // remainder is at height 5 
    ], 
    { 
     stepPlot: true 
    }); 
</script> 
</body>

See here for further examples of step plots auf der Dygraphs Website

Fortschritt:

ich um ein Verfahren bin ich mit Schwerpunkt in the source code of dygraph.js gefunden: findClosestPoint(). Leider macht es eine lineare (Brute-Force) Suche nach Punkten, auf der sichtbaren Leinwand (glaube ich), aber es wird reichen. Also muss ich trainieren:

Was es nennt,
Welche dieser Anrufer, was ich tippen sollte in
Wie einen Rückruf, um es zu befestigen

Quelle

2016-08-04 Jodes

Können Sie mit dem, was Sie bisher haben, eine Fiedel geben? –

@JonasGrumann, Ich habe ein paar Beispielcode hinzugefügt - konnte es nicht auf jsfiddle arbeiten, ich vermute, weil es https benötigt? – Jodes

Sie können die js von cdnjs.com verwenden. Link steht auf dygraphs downloadpage oder ihr könnt die fiddles in meinem Antwort-Post sehen. – Swippen

Sie annotate verwenden können dies anständig zu lösen ich denke, (http://dygraphs.com/annotations.html)

hier ein jsfiddle mit möglicher Lösung ist: Example fiddle

Grundsätzlich fügen Sie anotations wie folgt aus:

g.setAnnotations([ 
    {  
     series: "seriesX", 
     x: 0, 
     shortText: "2" 
    }, 
    ...

, die eine 2 zu Beginn der ersten Zeile gesetzt würde .. dann können Sie eine 1 für die Länge der seconf Linie mit einem anderen den Vermerk dort haben und so auf:

... 
{  
    series: "seriesX", 
    x: 2, 
    shortText: "1" 
} 
...

ich verstehe, dass dies nicht der Fall, wenn Sie die Linie schweben, aber das ist so nah wie Sie dygraphs ich denke, erhalten werden. Eine andere Option ist, Mauszeiger zu hören und ein Div über dem Graphen zu verwenden, um basierend auf Mauskoordinaten/Graphenkoordinaten korrekt zu positionieren, aber das ist viel mehr Code.

Bearbeiten: Ok, ich verstehe, wenn es viele Punkte zusammen gibt, die schrecklich aussehen würde. Sie können die Annotation auf Hover wie folgt ein- und ausblenden: Updated fiddle

Ich habe jQuery verwendet, um die Annotation auszuwählen, änderte auch den Text etwas, um es leichter zu wählen, wenn viele Punkte denselben Titel haben. Sie können die Auswahl auf andere Weise manuell durchführen, wenn Sie jQuery nicht verwenden.

Und erstellen Sie auch die Annotation-Array mit einer Schleife, so dass es nicht zu viel Code ist.

Quelle

2016-08-10 14:33:19 Swippen

Danke ... Ich dachte dasselbe wie dein erster Vorschlag. Das Problem ist, dass das Diagramm enorm ist, weshalb ich Dygraphs gewählt habe, da es Zoomen und Schwenken aus der Box ermöglicht. Alle Anmerkungen würden ein Durcheinander verursachen und möglicherweise die Leistung beeinträchtigen. Ich könnte versuchen, den Quellcode zu durchsuchen, um nach einem möglichen Hack zu suchen. Es findet bereits die nächste Reihe und Punkte, also muss es sicher einfach sein, wenn du weißt wie! – Jodes

@Jodes Bearbeitet mit einem möglichen Weg, um die Mausereignisse zu behandeln, um es weniger überladen zu machen, wenn viele Punkte. Sie können auch anpassen, wie die Annotation mit einer zusätzlichen Klasse aussieht, die sich immer auf der Annotation befindet, indem Sie die cssClass-Eigenschaft einer Annotation verwenden. – Swippen

Brilliant! Ich danke dir sehr! Haben Sie darüber nachgedacht, zur Dokumentation von Dygraphs beizutragen? Es werden 4 weitere Personen benötigt, die über das Tag verfügen, um Beiträge zu aktivieren. Es ist keine bekannte Bibliothek, aber sehr nützlich! Das Out-of-the-Box-Zoom und Panning ist etwas, das ich in keiner anderen Bibliothek gesehen habe – Jodes

Annotation der Länge einer geplotteten Linie anzeigen, wenn sie über

Antwort

Verwandte Themen