如何在高图中设置动态数据 [英] how to set dynamic data in highcharts

问题描述

我从servlet获取数据，并且从servlet发送的json对象的sysout为
{jsonArray：[{bugzilla：20，redmind：14} ]}

现在我的Java脚本是 $ b

  < script type =text / javascript> 
 var chart; 
 $（document）.ready（
 function（）{
 chart = new Highcharts.Chart（{
 chart：{
 renderTo：'container'，
 
 
标题：{
 text：'错误图'
}，
 
工具提示：{
 formatter：function（ ）{
 var s; 
 if（this.point.name）{//饼图
s =''+ this.point.name +'：'+ this.y 
 +'Bugs'; 
} else {
s =''+ this.x +'：'+ this.y; 
} 
 return s; 
 } 
}，
标签：{ 
 items：[{
 html：'Total Bugs'，
 style：{
 left：'40px'，
 top：'8px'，
颜色：'黑'
} 
}] 
}，
系列：[{
 
类型：'pie'，
名称： 'Total Bugs'，
 data：[]，
 center：[100，80]，
 size：100，
 showInLegend：false，
 dataLabels：{
 enabled：false 
}，
}，] 
 
}，函数getdata（图表）{
 var tmp =; 
 var receivedData =; 
 
 $ .ajax（{
 url：'http：// localhost：8080 / PRM / GraphServlet'，
 dataType：'json'，
 error：function （）{
 alert（error occured !!!）; 
}，
成功：函数（数据）{
 
 $ .each（data.jsonArray ，函数（索引）
 {
 $ .each（data.jsonArray [index]，
函数（key，value）{
 tmp =['+ key + '，+ value +]，; 
 receivedData + = tmp; 
 alert（receivedData：+ receivedData）; 
 
}）; 
 
}）; 
 alert（receivedDa ta.substring（0，34））; 
 chart.series [0] .setData（[receivedData.toString（）。substring（0，34）]）; 
 
 
 
} 
 
} 
）; 
}）; 
 
}）; 
< / script> 
  

alert打印已收到数据：['bugzilla'，20]，['redmind'，14] 'm期待
，但问题是当我将它设置为

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

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

解决方案

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

 成功：函数（数据）{
 var chartData = []; 
 $ .each（data.jsonArray，function（index）
 {
 $ .each（data.jsonArray [index]，
 function（key，value）{$ b $ （点）; 
}）; 
 point.push（key）; 
 point.push（value）; 
 chart.push（point）; 
}）; 
}）; 
 chart.series [0] .setData（chartData）; 
} 
  

I'm getting data from servlet and my sysout of json object which i'm sending from servlet is {"jsonArray":[{"bugzilla":20,"redmind":14}]}

Now my java script is

 <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] which i'm expecting but problem is when i'm setting it to

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

then my pie chart is not working. It shows only one part like 1/4 circle with no tooltip

解决方案

Your data is a String, it needs to be an array of array, where the inner array consists of two elements, the first being the key as string, and 2nd the value in numeric form.

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

这篇关于如何在高图中设置动态数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！