Highcharts - redraw () vs. new Highcharts.chart

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/

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

Die setDataMethode selbst ruft die Redraw-Methode auf

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

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/

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