javascript - 如何在highcharts中设置动态数据

标签 javascript jquery json servlets highcharts

我从 servlet 获取数据,我从 servlet 发送的 json 对象的系统输出是 {"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>

警报打印 receivedData: ['bugzilla', 20],['redmind', 14] 这是我期待的 但问题是当我将它设置为

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

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

最佳答案

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

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

关于javascript - 如何在highcharts中设置动态数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11775385/

相关文章:

javascript - 如何使用 localStorage.setItem 存储结果并使用 'PlayerName' 和 'TotalScore' 创建表

javascript - 相当于 jQuery 加载的原型(prototype)

javascript - Mongoose :如何防止将空值添加到 ObjectId 数组

javascript - 使用索引名称在 JSON 数组中搜索内容

asp.net - asp.net 用户控件中的 jquery UI 模态对话框 : Modal Overlay only on Div in UserControl

javascript - 本地存储: Get specific localstorage value of which contains many items

javascript - 我可以在不删除 JS 中函数调用的情况下限制函数吗?

javascript - 如何突破 .each() 并为函数返回一个值

javascript - 向 HTML 页面添加更新表信息的按钮

arrays - 将 JSON 数组索引列值转置为行并导出为 CSV