json Highcharts:使用 setData() 更新饼图

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/10131774/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-09-03 18:17:31  来源:igfitidea点击:

Highcharts: Updating a Pie Chart with setData()

jsonhighcharts

提问by Sammaye

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 等于系列,如下所示:

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

谢谢,

回答by Ricardo Alvaro Lohmann

Edited:
When you set a new data you have to set as array of arrays for all pie parts in this case.
In my ExampleI 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);

回答by Sammaye

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.

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

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

回答by Mohd Zamri Bin Mat Jusoh

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