Highcharts:使用setData()更新饼图

时间:2012-04-12 21:01:49

标签: json highcharts

我正在努力研究如何更新Highcharts饼图,但对于我的生活似乎无法让它正常工作。

我查看了文档,并且能够获得一个条形图和直线和样条曲线图以便更新,但是当使用此函数进行饼图时,它只是不起作用。

我现在正在喂食:

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

其中item等于系列如此:

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

演示中显示的是如何格式化饼图的数据。问题是它似乎无法正确阅读系列。我试试:

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

它似乎做了一些事情,但无法正确读取x和y值(这当然意味着它是错误的)。

这里的任何人都能指出我的方向吗?

谢谢,

3 个答案:

答案 0 :(得分:7)

<强>编辑:
设置新数据时,在这种情况下,必须将所有饼图部件设置为数组数组 在我的Example中,我有六个类别,因此我需要为所有类别设置数据。

因此,在这种情况下,您必须执行以下操作:

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

答案 1 :(得分:0)

我已经标记了Ricardos的答案但是我的问题还涉及到一些我没有正确解释的问题。

我正在通过PHP后端生成的JSON通过AJAX更新饼图。当我将新数据应用于饼图时,它会破裂。

使用Ricardos答案我能够发现它是因为我有不同数量的分数所以我不能只更新饼图我必须像这样重新制作:

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

这将允许您在具有不同点数时更新图表。

希望它有所帮助,

编辑:我也发现这是HighCharts的一个已知问题:https://github.com/highslide-software/highcharts.com/issues/542

答案 2 :(得分:-1)

&#13;
&#13;
 //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
			});
	}
			
&#13;
&#13;
&#13;