Ich verwende das morris.js-Diagramm zusammen mit dem Bootstrap-Schieberegler.
Was ich machen möchte:
Wenn der Schieberegler verschoben wird, möchte ich eine Ereigniszeile in das Diagramm an der Position des Schiebereglers einfügen. Nichts besonderes.
Das Problem:
Das Diagramm wird nach dem Festlegen des Ereignisses nicht neu gezeichnet. Beim Einfügen neuer Daten wird das Diagramm automatisch neu gezeichnet. Also habe ich versucht, auf die korrekte Syntax zu aktualisieren, indem ich die vorhandenen Daten wie folgt an das Diagramm übergebe:
Das funktioniert! Das neue Ereignis wird in das Diagramm gezogen. Leider hat dies eine schlechte Leistung, da das Diagramm alle Daten neu zeichnet.
In der Dokumentation steht chart.redraw() . Es funktioniert einfach nicht für mich. Vielleicht kann jemand von euch herausfinden warum.
Führen Sie einfach das Snippet aus und wechseln Sie die Optionsfelder, um beide Methoden zu testen, und Sie werden das Problem sehen.
Ich schätze jede Hilfe hier. Vielen Dank!
Wichtige Änderung:
Sobald ich ein Kopfgeld (+1 Stunde) setzen kann, werde ich es tun. Ein sehr wichtiger zusätzlicher Teil dieser Frage ist, wie man den Slider an das einzelne Chart-Event bindet, ohne zu zögern. Derzeit ist die Leistung sehr niedrig, wenn das Ereignis slide anstelle von slideStop verwendet wird.
Es funktioniert nicht, weil intern chart.events nicht gesetzt wird, wenn Sie chart.redraw() aufrufen. Diese Eigenschaft wird in setData mit der Zeile this.events = this.options.events festgelegt.
Um dies zu korrigieren: Verwenden Sie in Ihrem Code chart.events = [val] anstatt chart.options.events = [val];
Ich würde sie beide für den Fall einstellen, dass setData erneut aufgerufen wird, aber das liegt an dir.
Also in deiner Demo:
%Vor%BEARBEITEN:
Hinzugefügt eine chart.quickRedraw Funktion. Dadurch werden unnötige Neuberechnungen aus der Neuzeichnungsfunktion entfernt (siehe den auskommentierten Code für das, was jetzt ausgeschlossen ist):
Demo wurde mit der dritten Option aktualisiert.
Tags und Links javascript jquery charts morris.js bootstrap-slider