Javascript 如何在highcharts中设置动态数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11775385/
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
how to set dynamic data in highcharts
提问by Rahul P
I'm getting data from servlet and my sysout of json object which i'm sending from servlet is {"jsonArray":[{"bugzilla":20,"redmind":14}]}
我从 servlet 获取数据，我从 servlet 发送的 json 对象的 sysout 是 {"jsonArray":[{"bugzilla":20,"redmind":14}]}
Now my java script is
现在我的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] which i'm expecting but problem is when i'm setting it to
警报打印收到的数据：['bugzilla', 20],['redmind', 14] 这是我期待的，但问题是当我将其设置为
chart.series[0].setData([receivedData.toString().substring(0, 34)]);
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
那么我的饼图不起作用。它只显示一个部分，如 1/4 圆，没有工具提示
回答by Jugal Thakkar
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);
}
回答by Oleg Abrazhaev
You can prepare your data first, like in the @Jugal Thakkar answer above, and then use updatefunction available from v5.
您可以先准备数据，就像上面的@Jugal Thakkar 回答一样，然后使用updatev5 中提供的函数。
chart.update({
series: preparedSeriesData
});
this will dynamically update the chart.
这将动态更新图表。
