Highcharts: Updating a Pie Chart with setData()

问题

I am trying to work out how to update a Highcharts pie chart but for the life of me cannot seem to get it working right.

I have looked over the documentation and have been able to get a bar and line and spline graph to update fine but when using this function for pie charts it just does not work.

I am currently feeding in:

item.setData([["none", 100]], true);

Where item equals the series like so:

$.each(browser_chart.series, function(i, item){
    if(item.name == 'Browser share'){
        console.log(data.browsers);
        item.setData([["none", 100]], true);
    }
});

Which as shown in the demos is how the data for a pie chart is formatted. Problem is it cannot seem to read the series correctly. I try:

item.setData([\"none\", 100], true);

And it seems to do something but cannot read the x and y values right (which of course means it's wrong).

Can anyone here point me in the direction to get this working?

Thanks,

回答1:

Edited:
When you set a new data you have to set as array of arrays for all pie parts in this case.
In my Example I have six categories, so I've to set data for all of them.

So, in this case you have to do something like:

var seriesData = [];
$.each(browser_chart.series, function(i, item) {
    if(item.name == 'Browser share'){
        seriesData.push(["serie"+i, someNumber]);
    }
});
chart.series[0].setData(seriesData, true);

回答2:

I have marked Ricardos answer however my question involved a tad more that I didn't explain properly.

I was updating the pie chart through AJAX from JSON generated by a PHP Backend. When I applied new data to the pie chart it would break.

Using Ricardos answer I was able to find out it is because I have a different number of points so I cannot just update the pie chart I must remake it like so:

browser_chart_config.series[0].data = data.browsers;
browser_chart = new Highcharts.Chart(browser_chart_config);

This will allow you to update a chart when you have a different number of points.

Hope it helps,

EDIT: I also found out that this is a known issue with HighCharts: https://github.com/highslide-software/highcharts.com/issues/542

回答3:

 //initialise
        var new_data;
            new_data = [{ name: 'load percentage', y: 10.0, color: '#b2c831' },{ name: 'rest', y: 60.0, color: '#3d3d3d' }];
	function requestData() 
        {             
			$.ajax({
				url: 'live-server-data.php', 
				success: function(point) 
                                {
					var series = chart.series[0];
                                        var y_val = parseInt(point[1]);                                      
                                        var x_val = 100 - y_val;
                                        console.log(point[0]+ "," +point[1] );//["0"]
                                        new_data = [{ name: 'load percentage', y:y_val, color: '#b2c831' },{ name: 'rest', y:x_val, color: '#3d3d3d' }];                                                                
                                        series.setData(new_data);                                   
                                        // call it again after one second					
				},
				cache: false
			});
	}

来源：https://stackoverflow.com/questions/10131774/highcharts-updating-a-pie-chart-with-setdata

标签

json

Highcharts