it-swarm.com.de

Highcharts - Neuzeichnen () vs. neues Highcharts.chart

Ich habe Schwierigkeiten, die richtige Methode zur Aktualisierung eines Highcharts-Diagramms zu verstehen. Angenommen, ich habe ein Diagramm gerendert und möchte es irgendwie aktualisieren. Ich möchte zum Beispiel die Werte der Datenreihe ändern oder DataLabels aktivieren.

Im Moment kann ich nur herausfinden, wie ich dies tun kann, indem Sie die Diagrammoptionen ändern und mit new Highcharts.chart den Neucharts von Highcharts anweisen.

Ich frage mich jedoch, ob dies möglicherweise übertrieben ist und es möglich ist, die Tabelle in situ zu ändern, ohne mit new Highcharts.chart von vorne beginnen zu müssen. Ich stelle fest, dass es eine redraw()-Methode gibt, aber es scheint nicht, dass sie funktioniert.

Jede Hilfe wird sehr geschätzt.

Vielen Dank,

Robin

Beispielcode lautet wie folgt und am Ende befindet sich ein 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 zu beachten, dass es keine Methode gibt, DataLabels ein- und auszublenden. Das Folgende zeigt, wie es geht: http://jsfiddle.net/supertrue/tCF8Y/

73
RobinL

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

Die setData -Methode selbst ruft die Redraw-Methode auf

78
karthik - LK

sie müssen set und add - Funktionen am Diagrammobjekt aufrufen, 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();
13
waqas
var newData = [1,2,3,4,5,6,7];
var chart = $('#chartjs').highcharts();
chart.series[0].setData(newData, true);

Erläuterung:
Variable newData enthält einen Wert, der im Diagramm aktualisiert werden soll . Die Variable chart 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 der zweite Parameter ist ein Boolescher Wert. Wenn true dann aktualisiert sich das Diagramm von selbst und wenn false dann müssen wir redraw() Methode verwenden, um das Diagramm zu aktualisieren (d. H. chart.redraw();)

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

9
Sandip

@RobinL Wie in vorherigen Kommentaren erwähnt, können Sie chart.series [n] .setData () verwenden. Zunächst müssen Sie sicherstellen, dass Sie der Diagrammvariablen eine Diagramminstanz zugewiesen haben. Auf diese Weise werden alle Eigenschaften und Methoden übernommen, die Sie zum Zugreifen und Bearbeiten des Diagramms benötigen.

Ich habe auch den zweiten Parameter von setData () verwendet und hatte den Wert false, um das automatische Rendern des Diagramms zu verhindern. Dies liegt daran, dass ich mehrere Datenserien habe. Daher werde ich jede von ihnen mit render = false aktualisieren und dann chart.redraw () ausführen. Dies vervielfachte die Leistung (ich habe 10.000-100.000 Datenpunkte und aktualisiere den Datensatz alle 50 Millisekunden).

0
lauri108