Highcharts - redraw () vs. new Highcharts.chart

78

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();

});​

http://jsfiddle.net/sUXsu/18/

[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/

RobinL
quelle
4
Für den Link zu Ihrem Beispiel zum Anzeigen / Ausblenden von dataLabels musste die HighCharts-Quell-URL aktualisiert werden (es war 404ing), und jQuery musste aktualisiert werden. Ich habe dies in jsfiddle.net/supertrue/tCF8Y
supertrue

Antworten:

81

chart.series[0].setData(data,true);

Die setDataMethode selbst ruft die Redraw-Methode auf

karthik - LK
quelle
1
Der Tooltip wird nicht aktualisiert. Beim Mouseover-Tooltip werden nur alte Daten angezeigt
Saurabh Sinha
Das Update für mehrere Serien dauert ungefähr 13-15 Sekunden
Aatif Bandey
1
Für weitere Informationen: api.highcharts.com/class-reference/…
Nguyen Tran
funktioniert auch in HighMaps - Beispielcode mit Angular this.map.series [0] .setData (changes.options.currentValue.series [0] .data, true)
danday74
12

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();
waqas
quelle
Es funktioniert für mich Danke .. !! Dies ist eine bessere Möglichkeit, Diagramme zu aktualisieren, wenn Sie mit vielen Diagrammen mit vielen Daten auf einer einzelnen Seite arbeiten. Das Aufrufen von Redraw für jede Serie kann zum Absturz von Browsern führen.
Ritesh
Ich arbeite an einer Echtzeitanwendung und möchte eine Update-Highmap, deren Browser jedoch abstürzt, wenn die Update-Häufigkeit zunimmt.
Dipak Telangre
10
var newData = [1,2,3,4,5,6,7];
var chart = $('#chartjs').highcharts();
chart.series[0].setData(newData, true);

Erläuterung: Die
Variable newDataenthält einen Wert, der im Diagramm aktualisiert werden soll . Variable chartist ein Objekt eines Diagramms. setDataist 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 truedann das Diagramm selbst aktualisiert und wenn falsedann müssen wir die redraw()Methode verwenden, um das Diagramm zu aktualisieren (dh chart.redraw();)

http://jsfiddle.net/NxEnH/8/

Sandip
quelle
0

@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).

lauri108
quelle