Highcharts – redraw() vs. nieuwe Highcharts.chart

Ik heb moeite om de juiste manier te begrijpen om een ​​highcharts-diagram bij te werken. Stel dat ik een grafiek heb gerenderd en dan wil ik deze op de een of andere manier bijwerken. Ik wil bijvoorbeeld de waarden van de gegevensreeksen wijzigen of ik wil misschien dataLabels inschakelen.

Op dit moment kan ik er alleen achter komen hoe ik dit kan doen door de kaartopties te wijzigen en new Highcharts.chartte gebruiken om highcharts te vertellen dat ze opnieuw moeten tekenen.

Ik vraag me echter af of dit misschien overdreven is en dat het misschien mogelijk is om de kaart ‘in situ’ te wijzigen, zonder helemaal opnieuw te hoeven beginnen met new Highcharts.chart. Ik zie dat er een redraw()-methode is, maar ik krijg het niet voor elkaar.

Alle hulp wordt zeer op prijs gesteld.

Bedankt,

Robin

Voorbeeldcode is als volgt en onderaan staat een 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/

[bewerken]:

Voor toekomstige kijkers van deze vraag is het vermeldenswaard dat er geen methode is om dataLabels te verbergen en weer te geven. Hieronder ziet u hoe u dit doet: http://jsfiddle.net/supertrue/tCF8Y/

Antwoord 1, autoriteit 100%

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

De setDatamethode zelf zal de hertekenmethode aanroepen

Antwoord 2, autoriteit 15%

u moet functies seten addaan het kaartobject aanroepen voordat u redraw aanroept.

chart.xAxis[0].setCategories([2,4,5,6,7], false);
chart.addSeries({
    name: "acx",
    data: [4,5,6,7,8]
}, false);
chart.redraw();

Antwoord 3, autoriteit 12%

var newData = [1,2,3,4,5,6,7];
var chart = $('#chartjs').highcharts();
chart.series[0].setData(newData, true);

Uitleg:
Variabele newDatabevat waarde die in de grafiek wil bijwerken. Variabele chartis een object van een grafiek. setDatais een methode van highchart om gegevens bij te werken.

Methode setData bevat twee parameters, in de eerste parameter moeten we een nieuwe waarde doorgeven als array en de tweede parameter is de Booleaanse waarde. Als truedan werkt de kaart zichzelf bij en als falsedan moeten we de redraw()methode gebruiken om de kaart bij te werken (dwz chart.redraw();)

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

Antwoord 4

@RobinL zoals vermeld in eerdere opmerkingen, kunt u chart.series[n].setData() gebruiken. Eerst moet je ervoor zorgen dat je een instantie van een grafiek aan de grafiekvariabele hebt toegewezen, zodat deze alle eigenschappen en methoden overneemt die je nodig hebt om de grafiek te openen en te manipuleren.

Ik heb ook de tweede parameter van setData() gebruikt en deze was onwaar, om automatische weergave van de grafiek te voorkomen. Dit kwam omdat ik meerdere gegevensreeksen heb, dus ik zal ze liever allemaal bijwerken met render=false en vervolgens chart.redraw() uitvoeren. Deze vermenigvuldigde prestaties (ik heb 10.000-100.000 datapunten en ververs de dataset elke 50 milliseconden).