如何使用AJAX初始化HighChart系列值
How do I initialize HighChart series values with AJAX?
在使用ajax请求第一个数据点之前,我正在尝试动态初始化HighChart系列值。我似乎不知道出了什么问题,也不知道我所尝试的是否可能。有人能帮我看看吗?
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'spline',
marginRight: 10,
events: {
load: requestData
}
},
title: {
text: 'Test'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 100,
},
yAxis: {
title: {
text: 'Test'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
Highcharts.numberFormat(this.y, 2);
}
},
series: [{
//AJAX NOT WORKING HERE
name: 'Random data',
data: (function() {
var data = [];
$.ajax({
type: "GET",
url: "/test/random2.php",
data: "p=2",
dataType: "json",
async: false,
success: function(result){
var values = JSON.parse(JSON.stringify(result));
var time = (new Date()).getTime();
for (i = -19; i <= 0; i += 1) {
data.push({
x: time + i * 60000,
y: values[i+19];
});
}
}
});
return data;})
}]
});
});
更新代码这是我的工作解决方案
function doHighChart(data) {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'spline',
marginRight: 10,
events: {
load: requestData
}
},
title: {
text: 'Test'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 100,
},
yAxis: {
title: {
text: 'Test'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
Highcharts.numberFormat(this.y, 2);
}
},
series: [{
name: 'Random data',
data: data
}]
});
}
$(document).ready(function() {
var data = [];
$.ajax({
type: "GET",
url: "/test/random2.php",
data: "p=2",
dataType: "json",
async: false,
success: function(result){
var values = JSON.parse(JSON.stringify(result));
var time = (new Date()).getTime();
for (i = -19; i <= 0; i += 1) {
//data.push([i, -i]);
//data.push("{x:" + (time + i * 1000) ", y: " + values[i+19] + "}");
data.push([
time + i * 1000,
values[i+19]
]);
}
doHighChart(data);
}
});
});
您需要调用$.ajax()并在回调中初始化图表。
相关文章:
- 动态更改高图中的系列颜色
- 无法在系列中为 Highstock API 设置单个点颜色,它适用于 Highchart API
- 使用highchart直播多个系列
- Highchart向下钻取到同时存在的多个系列和y轴
- 用不同颜色填充的Highchart数据系列
- Highchart:从 java 传递系列映射时绘制日期时间图表问题
- 如何使用AJAX初始化HighChart系列值
- 有没有一种方法可以在不进行eval的情况下输入Highchart系列数据
- highchart将数据设置为xrange图表中的系列
- 将Highchart系列水平显示在彼此下方
- 如何将数据点数组添加到Highchart系列
- 如何在HighChart中用多个yAxis填充两个系列之间的区域
- HighChart -按类别名称访问系列数据
- Highchart系列更新在javascript
- 为什么当我更新我的系列数据时,我的HighChart PieChart图例表现不激进?
- highchart系列在php的while循环中给出错误
- 编辑图表后更新HighChart上的系列数组
- JSON数组中的Highchart系列
- 3D Highchart动态系列添加问题
- Highchart改变一个系列的线宽