Javascript 如何在海图中设置动态数据

我从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>

var图；
$（文件）。准备好了吗(
函数（）{
图表=新的高点图表。图表({
图表：{
renderTo:'容器'，
},
标题：{
文本：“错误图表”
},
工具提示：{
格式化程序：函数（）{
var s；
如果（this.point.name）{//饼图
s=''+this.point.name+'：''+this.y
+‘虫子’；
}否则{
s=''+this.x+：''+this.y；
}
返回s；
}
},
标签：{
项目：[{
html:“总bug”，
风格：{
左：“40px”，
顶部：“8px”，
颜色：“黑色”
}
} ]
},
系列：[{
键入“pie”，
名称：'Total Bugs'，
数据：[]，
中间：[100,80]，
尺码：100，
showInLegend:false，
数据标签：{
已启用：false
},
},  ]
}，函数getdata（图表）{
var tmp=“”；
var receivedData=“”；
$.ajax({
网址：'http://localhost:8080/PRM/GraphServlet',
数据类型：“json”，
错误：函数（）{
警报（“发生错误！！！”；
},
成功：功能（数据）{
$.each（data.jsonArray，函数（索引）
{
$.each（data.jsonArray[index]，
功能（键、值）{
tmp=“[”+键+”，“+值+”，”；
接收数据+=tmp；
警报（“接收数据：+receivedData”）；
});
});
警报（接收数据子字符串（0,34））；
chart.series[0].setData（[receivedData.toString（）.substring（0,34）]；
}
}
);
});
});

警报打印收到数据：['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);
 }

---

您可以先准备数据，如上面的@Jugal Thakkar答案，然后使用v5提供的

update

功能

chart.update({
    series: preparedSeriesData
});

---

这将动态更新图表。

看看这个：Dupe of:@Chris我得到的每个链接的值与您建议的相同，现在alert（）打印[“bugzilla”，20]，“redmind”，14]，但不能作为变量分配给系列数据