如何在highcharts中设置动态数据

Posted 2023-02-22

【中文标题】如何在highcharts中设置动态数据

【英文标题】：how to set dynamic data in highcharts

【发布时间】：2012-07-31 07:14:31

【问题描述】：

我从 servlet 获取数据，我从 servlet 发送的 json 对象的 sysout 是 "jsonArray":["bugzilla":20,"redmind":14]

现在我的 java 脚本是

 <script type="text/javascript">
    var chart;
    $(document).ready(
            function() 
                chart = new Highcharts.Chart(
                    chart : 
                        renderTo : 'container',

                    ,
                    title : 
                        text : 'Bug chart'
                    ,

                    tooltip : 
                        formatter : function() 
                            var s;
                            if (this.point.name)  // the pie chart
                                s = '' + this.point.name + ': ' + this.y
                                        + ' Bugs';
                             else 
                                s = '' + this.x + ': ' + this.y;
                            
                            return s;
                        
                    ,
                    labels : 
                        items : [ 
                            html : 'Total Bugs',
                            style : 
                                left : '40px',
                                top : '8px',
                                color : 'black'
                            
                         ]
                    ,
                    series : [ 

                        type : 'pie',
                        name : 'Total Bugs',
                        data : [],
                        center : [ 100, 80 ],
                        size : 100,
                        showInLegend : false,
                        dataLabels : 
                            enabled : false
                        ,
                    ,  ]

                , function getdata(chart) 
                    var tmp="";
                    var receivedData="";

                    $.ajax(
                        url : 'http://localhost:8080/PRM/GraphServlet',
                        dataType : 'json',
                        error : function() 
                            alert("error occured!!!");
                        ,
                        success : function(data) 

                            $.each(data.jsonArray, function(index)
                                    
                                    $.each(data.jsonArray[index], 
                                        function(key,value) 
                                    tmp = "['" + key + "',  " + value + "],";
                                    receivedData += tmp;
                                    alert("receivedData: " + receivedData);

                                );

                            );
                            alert(receivedData.substring(0, 34));
                            chart.series[0].setData([receivedData.toString().substring(0, 34)]);



                        

                    
                    );
                );

            );
</script>

alert prints receivedData: ['bugzilla', 20],['redmind', 14] 我期待 但问题是当我将其设置为

chart.series[0].setData([receivedData.toString().substring(0, 34)]);

然后我的饼图不工作。它只显示一个部分，例如 1/4 圆圈，没有工具提示

【问题讨论】：

看看这个：***.com/a/7432462/94278

欺骗：***.com/questions/8216090/…

@Chris 我得到的值与你现在建议的链接相同 alert() 打印 ["bugzilla", 20],["redmind", 14] 但是无法将变量分配给系列数据

【参考方案1】：

您的数据是一个字符串，它需要是一个数组数组，其中内部数组由两个元素组成，第一个是字符串形式的键，第二个是数字形式的值。

success : function(data) 
   var chartData=[];
   $.each(data.jsonArray, function(index)
    
     $.each(data.jsonArray[index], 
      function(key,value) 
       var point = [];
       point.push(key);
       point.push(value);
       chartData.push(point);                          
      );
   );
   chart.series[0].setData(chartData);
 

【参考方案2】：

您可以先准备数据，就像上面的@Jugal Thakkar 回答一样，然后使用 v5 中提供的update 函数。

chart.update(
    series: preparedSeriesData
);

这将动态更新图表。