Ich habe Probleme zu verstehen, wie ein Highcharts-Diagramm richtig aktualisiert werden kann. Angenommen, ich habe ein Diagramm gerendert und möchte es dann auf irgendeine Weise aktualisieren. Beispielsweise möchte ich möglicherweise die Werte der Datenreihe ändern oder dataLabels aktivieren.
Im Moment kann ich nur herausfinden, wie das geht new Highcharts.chart
, indem ich die Diagrammoptionen ändere und Highcharts anweise, sie neu zu zeichnen.
Ich frage mich jedoch, ob dies möglicherweise ein Overkill ist und es möglich sein könnte, das Diagramm "in situ" zu ändern, ohne von vorne anfangen zu müssen new Highcharts.chart
. Ich stelle fest, dass es eine redraw()
Methode gibt, aber ich kann sie scheinbar nicht zum Laufen bringen.
Jede Hilfe wird sehr geschätzt.
Vielen Dank,
Robin
Der Beispielcode lautet wie folgt und unten befindet sich eine jsFiddle
$(document).ready(function() {
chartOptions = {
chart: {
renderTo: 'container',
type: 'area',
},
series: [{
data: [1,2,3]
}]
};
chart1 = new Highcharts.Chart(chartOptions);
chartOptions.series[0].data= [10,5,2];
chart1 = new Highcharts.Chart(chartOptions);
//The following seems to have no effect
chart1.series[0].data = [2,4,4];
chart1.redraw();
});
[bearbeiten]:
Für zukünftige Betrachter dieser Frage ist es erwähnenswert, dass es keine Methode zum Ausblenden und Anzeigen von dataLabels gibt. Das Folgende zeigt, wie es geht: http://jsfiddle.net/supertrue/tCF8Y/
quelle
Antworten:
chart.series[0].setData(data,true);
Die
setData
Methode selbst ruft die Redraw-Methode aufquelle
Sie müssen set aufrufen und Funktionen für das Diagrammobjekt hinzufügen, bevor Sie redraw aufrufen.
chart.xAxis[0].setCategories([2,4,5,6,7], false); chart.addSeries({ name: "acx", data: [4,5,6,7,8] }, false); chart.redraw();
quelle
var newData = [1,2,3,4,5,6,7]; var chart = $('#chartjs').highcharts(); chart.series[0].setData(newData, true);
Erläuterung: Die
Variable
newData
enthält einen Wert, der im Diagramm aktualisiert werden soll . Variablechart
ist ein Objekt eines Diagramms.setData
ist eine von Highchart bereitgestellte Methode zum Aktualisieren von Daten.Die Methode setData enthält zwei Parameter. Im ersten Parameter müssen wir einen neuen Wert als Array übergeben und im zweiten Parameter ist der Boolesche Wert. Wenn sich
true
dann das Diagramm selbst aktualisiert und wennfalse
dann müssen wir dieredraw()
Methode verwenden, um das Diagramm zu aktualisieren (dhchart.redraw();
)http://jsfiddle.net/NxEnH/8/
quelle
@RobinL Wie in den vorherigen Kommentaren erwähnt, können Sie chart.series [n] .setData () verwenden. Zuerst müssen Sie sicherstellen, dass Sie der Diagrammvariablen eine Diagramminstanz zugewiesen haben. Auf diese Weise werden alle Eigenschaften und Methoden übernommen, die Sie für den Zugriff auf und die Bearbeitung des Diagramms benötigen.
Ich habe auch den zweiten Parameter von setData () verwendet und ihn falsch angegeben, um das automatische Rendern des Diagramms zu verhindern. Dies lag daran, dass ich mehrere Datenreihen habe, daher aktualisiere ich lieber jede mit render = false und führe dann chart.redraw () aus. Diese multiplizierte Leistung (ich habe 10.000-100.000 Datenpunkte und aktualisiere den Datensatz alle 50 Millisekunden).
quelle