我正在尝试使用 JQUERY AJAX 调用更新页面加载和选择菜单更改时的 Highcharts 。有数据以 [[10,1228800000],[10,1228800000]] 格式返回。图表是空白的,没有绘制任何数据。
尝试了在这里发布的几个解决方案,但没有一个奏效。
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);
}
});
任何错误?提前致谢。
编辑:
最近的代码仍然不起作用:
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);
}
});
最佳答案
您必须使用文档中描述的系列对象的 setData 方法。在您的情况下,它是 options.series[0].setData(Data)
而且我认为您必须使用 JSON.parse(data)
将 Ajax 结果从字符串转换为真实的对象/数组。 .
编辑:
@Ricardo Lohmann:在 ajax 调用中,他没有在响应中指定他期望的数据类型,因此 jQuery 会猜测数据类型。但它不会识别以 [
开头的字符串作为 JSON,我怀疑他的回复是否会以正确的 mime 类型提供 application/json
.所以指定正确的 mime 类型也应该可以解决问题。但是我没有提问者完整的 ajax 回复的例子。所以我也只是猜测。
我建议使用以下 ajax 调用:
$.ajax({
type: "POST",
url: "update_visits_chart",
data: {month: month},
dataType: 'json',
success: function(data){
options.series[0].setData(data);
}
});
@Jugal Thakkar
$.getJSON
只是上面ajax调用的快捷方式,但它不太灵活,因为你的选择较少。
关于ajax - 使用 Ajax 将数据加载到 Highcharts,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12223972/