将数据加载到使用Ajax Highcharts [英] Load data into Highcharts with Ajax
问题描述
我想更新的页面加载和选择菜单的变化与jQuery AJAX调用高图表。有在被返回数据[[10,1228800000]，[10,1228800000]] format.The图表是空白的，并且不绘制任何数据
试了几种解决方案张贴在这里，但没有奏效。
VAR图;
$（文件）。就绪（函数（）{
VAR的选择= {
图表： {
renderTo：'统计'，
defaultSeriesType：花键
}，
标题：{文字：}，
x轴：{
类型：日期时间
}，
Y轴：{}，
系列： []
};
VAR月=七一;
$阿贾克斯（{
键入：POST，
数据：月=+月，
网址：update_visits_chart
成功：功能（数据）{
options.series.push（数据）;
图=新Highcharts.Chart（选件）;
}
}）;
任何错误？提前致谢。 编辑：
最近code仍然没有工作：
VAR选项= {
图表： {
renderTo：'统计'，
类型：花键
}，
标题： {
文本： ''
}，
x轴：{
类型：日期时间，
tickInterval：30 * 24 * 3600 * 1000，
dateTimeLabelFormats：{
天：％B％E'
}，
标签：{
旋转：-45，
对齐：正确
}
}，
Y轴：{
标题： {
文本：浏览次数
}，
分：0
}，
提示：{
格式：函数（）{
返回Highcharts.dateFormat（％B％E'，this.x）+'＆LT; BR />'+this.y+访问（S）;
}
}，
传说： {
启用：真
}，
学分：{
启用：假的
}，
出口： {
启用：假的
}，
系列： [{
名称：访问数，
数据： []
}]
};
VAR月=七一;
$阿贾克斯（{
键入：POST，
网址：update_visits_chart
数据：月=+月，
成功：功能（数据）{
options.series [0]的.data =数据;
图=新Highcharts.Chart（选件）;
}
}）;
您必须使用序列对象的使用setData梅索德为descriped的文档。你的情况是 options.series [0] .setData（数据）
和我认为你必须通过把你的Ajax结果从字符串到一个真正的对象/数组 JSON.parse（数据）。
编辑：
@Ricardo罗曼：在AJAX调用，他并没有说明他预计在响应中的数据类型时，将让jQuery的猜测数据类型。但它不会承认一个字符串开头 [为JSON，我怀疑他的回应将与正确的MIME类型服应用程序/ JSON 。因此，指定正确的MIME类型也应该解决的问题。但我没有提问的完整的AJAX respons的一个例子。所以，我只是猜测了。
我建议以下Ajax调用：
$。阿贾克斯（{
键入：POST，
网址：update_visits_chart
数据：{月份：每月}，
数据类型：JSON，
成功：功能（数据）{
options.series [0] .setData（数据）;
}
}）;
@Jugal THAKKAR
$。的getJSON 是只为AJAX调用上面的快捷方式，而是因为你有更少的选项时，它不够灵活。
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.
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);
}
});
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)
And I think you have to turn your Ajax result from string to a real object/array by using 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.
I'd recommend the following ajax call:
$.ajax({
type: "POST",
url: "update_visits_chart",
data: {month: month},
dataType: 'json',
success: function(data){
options.series[0].setData(data);
}
});
@Jugal Thakkar
$.getJSON is just a shortcut for the ajax-call above, but it is less flexible because you have less options.
这篇关于将数据加载到使用Ajax Highcharts的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
