Geek Answers Handbook

Highcharts Animation Series Update

I can update the value of the spider chart data and see it animated using this method:

chart.series[i].setData(newSeries[i].data);

But, since the series in the spider diagram consists not only of data, but also of other fields, as in

series: [{
            name: 'Allocated Budget',
            data: [43000, 19000, 60000, 35000, 17000, 10000],
            pointPlacement: 'on'
        }, {
            name: 'Actual Spending',
            data: [50000, 39000, 42000, 31000, 26000, 14000],
            pointPlacement: 'on'
        }]

Along with the data, when I need to change a value name: 'Actual Spending', how can I update a series of animations?

Because, for example, if I call:

chart.series[i].update({series: newSeries[i] , name : newName});

There will be no animation.

If still unclear ... Well, sometimes jsfiddle is worth 100 words.

+4
source share
2 answers

Update name, then install datawith the desired animation:

chart.series[0].update({name:'new title'});
chart.series[0].setData(newData);

See a working script.

+5

, :

, .

// Pass false to skip redraw (since there are multiple operations, for better performance)
chart.series[0].update({name:'new title 0'}, false);
chart.series[1].update({name:'new title 1'}, false);
chart.series[2].update({name:'new title 2'}, false);
chart.series[3].update({name:'new title 3'}, false);

// Redraw the name changes before updating the data.
chart.redraw();

// Update the series data with animation, passing false to redraw here as well.
chart.series[0].setData(newData, false);
chart.series[1].setData(newData1, false);
chart.series[2].setData(newData2, false);
chart.series[3].setData(newData3, false);

// Now we redraw the series data
chart.redraw();
+1

More articles:


All Articles