Highcharts:使用setData()更新饼图

时间:2021-10-08 09:44:19

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.

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

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:

item中的item等于系列如下:

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

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

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

这里的任何人都能指出我的方向来实现这个目标吗?

Thanks,

3 个解决方案

#1


7  

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


0  

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

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

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.

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

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:

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

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

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

#3


0  

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

#1


7  

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


0  

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

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

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.

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

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:

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

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

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

#3


0  

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