json 使用 Ajax 将数据加载到 Highcharts
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12223972/
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
Load data into Highcharts with Ajax
提问by klye_g
I am trying to update high charts on page load and on select menu change with JQUERY AJAX call. There is data being returned in [[10,1228800000],[10,1228800000]] format.The chart is blank and does not graph any of the data.
我正在尝试使用 JQUERY AJAX 调用更新页面加载和选择菜单更改时的高图表。有数据以 [[10,1228800000],[10,1228800000]] 格式返回。图表是空白的，没有绘制任何数据。
Tried several solutions posted on here but none worked.
尝试了在这里发布的几个解决方案，但没有一个奏效。
var chart;
$(document).ready(function() {
var options = {
chart: {
renderTo: 'stats',
defaultSeriesType: 'spline'
},
title: {text:''},
xAxis: {
type: 'datetime'
},
yAxis: {},
series: []
};
var month = 'July';
$.ajax({
type: "POST",
data: "month="+month,
url: "update_visits_chart",
success: function (data) {
options.series.push(data);
chart = new Highcharts.Chart(options);
}
});
Any errors? thanks in advance. EDIT:
任何错误？提前致谢。编辑：
MOST RECENT CODE STILL NOT WORKING:
最近的代码仍然不起作用：
var options = {
chart: {
renderTo: 'stats',
type: 'spline'
},
title: {
text: ''
},
xAxis: {
type:'datetime',
tickInterval: 30 * 24 * 3600 * 1000,
dateTimeLabelFormats: {
day: '%b %e'
},
labels: {
rotation: -45,
align: 'right'
}
},
yAxis: {
title: {
text: 'Number of visits'
},
min: 0
},
tooltip: {
formatter: function() {
return Highcharts.dateFormat('%b %e', this.x) +'<br />'+this.y+' visit(s)';
}
},
legend: {
enabled: true
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: 'Number of Visits',
data: []
}]
};
var month = 'July';
$.ajax({
type: "POST",
url: "update_visits_chart",
data: "month="+month,
success: function(data){
options.series[0].data = data;
chart = new Highcharts.Chart(options);
}
});
采纳答案by LeJared
You have to use the setData methode of the series object as descriped in documentation. In your case it is options.series[0].setData(Data)
您必须使用文档中描述的系列对象的 setData 方法。在你的情况下是options.series[0].setData(Data)
And I think you have to turn your Ajax result from string to a real object/array by using JSON.parse(data).
而且我认为您必须使用JSON.parse(data).
EDIT:@Ricardo Lohmann: in the ajax-call he did not specify the dataType he expects in the response, so jQuery will guess the dataType. But it will not recognize a string starting with [as JSON and I doubt his response will be served with correct mime type application/json. So specifying the correct mime type should also solve the problem. But I do not have an example of the complete ajax respons of the questioner. So I'm just guessing, too.
编辑：@Ricardo Lohmann：在 ajax 调用中，他没有指定他在响应中期望的数据类型，因此 jQuery 会猜测数据类型。但它不会识别[以 JSON开头的字符串，我怀疑他的响应是否会以正确的 mime type 提供application/json。所以指定正确的 mime 类型也应该可以解决问题。但是我没有提问者完整的 ajax 回复的例子。所以我也只是猜测。
I'd recommend the following ajax call:
我建议使用以下 ajax 调用：
$.ajax({
type: "POST",
url: "update_visits_chart",
data: {month: month},
dataType: 'json',
success: function(data){
options.series[0].setData(data);
}
});
@Jugal Thakkar
@Jugal Thakkar
$.getJSONis just a shortcut for the ajax-call above, but it is less flexible because you have less options.
$.getJSON只是上面ajax调用的快捷方式，但它不太灵活，因为你的选择较少。
回答by Ricardo Alvaro Lohmann
You have to set directly datato series because datais already a multidimensional array.
The following code will fix it.
Changeoptions.series.push(data);tooptions.series = data;
您必须直接设置data为 series 因为data已经是一个多维数组。
下面的代码将修复它。
更改options.series.push(data);为options.series = data;
