动态更新ajax"/>
柱形图ajax,高图柱形图动态更新ajax
设置load功能在图表选项event对象。然后，使用当前的json数据响应，您可以使用update()系列方法。
更新(对象的选择，[布尔重绘])更新该系列具有一组新的选项。为了清晰和精确地处理新选项， 系列中的所有方法和元素都将被删除，并且从头开始的是 。因此，此方法比其他一些实用程序方法(如setData或setVisible)更具成本效益 。
参数
选择：要合并到现有期权系列的布尔新的选择。
redraw：Boolean默认为true。是否在系列更改后重新绘制图表。如果在图表上执行更多操作，那么将设为重绘为false并在之后调用chart.redraw()是个好主意。
例子：
events: {
load: function() {
var series = this.series[0]; // Get the current series.
setInterval(function() { // For every 5 seconds call the request function.
request().done(function(point) {
series.update(point); // Get the point (json data from the URL) and use the update(point) method.
console.log("Updated with this: ", point);
});
}, 5000);
}
}
事情是这样的：
C2S Success %Testing Etopup Dashboard
// (1)
function request() {
return $.ajax({
url: '.json',
type: "GET",
async: true,
dataType: "json"
});
}
var options = {
chart: {
renderTo: "chart1",
type: "column",
height: 500,
width: 530,
events: { // (3)
load: function() {
var series0 = this.series[0];
var series1 = this.series[1];
var series2 = this.series[2];
setInterval(function() {
request().done(function(point) {
series0.update({
name: point[0].name,
data: point[0].data
});
series1.update({
name: point[1].name,
data: point[1].data
});
series2.update({
name: point[2].name,
data: point[2].data
});
});
}, 5000);
}
}
},
title: {
text: "Success %"
},
xAxis: {
categories: ["Today", "YesterDay", "D-7"],
title: {
text: "DAYs"
}
},
plotOptions: {
column: {
dataLabels: {
enabled: true
}
}
},
series: []
};
// (2)
$(function() {
request().done(function(point) {
options.series = point;
var chart = new Highcharts.Chart(options);
});
});
不要忘记你的successper.php页面更改.json。
更新：
如你有4个元素，变化的数组：
events: {
load: function() {
var series = this.series[0]; // Get the current series.
setInterval(function() { // For every 5 seconds call the request function.
request().done(function(point) {
series.update(point); // Get the point (json data from the URL) and use the update(point) method.
console.log("Updated with this: ", point);
});
}, 5000);
}
}
这样：
events: {
load: function() {
var series0 = this.series[0];
var series1 = this.series[1];
var series2 = this.series[2];
var series3 = this.series[3];
setInterval(function() { // For every 5 seconds call the request function.
request().done(function(point) {
series0.update({
name: point[0].name,
data: point[0].data
});
series1.update({
name: point[1].name,
data: point[1].data
});
series2.update({
name: point[2].name,
data: point[2].data
});
series3.update({
name: point[3].name,
data: point[3].data
});
});
}, 5000);
}
}
更新：所述successper.php的PHP代码从我的演示网站页面。
header("Access-Control-Allow-origin: *");
header("Content-Type: application/json");
header("Cache-Control: no-cache");
$min = 0;
$max = 100;
$array = array(array(name => "DEL", data => array(mt_rand ($min*10, $max*10)/10, mt_rand ($min*10, $max*10)/10, mt_rand ($min*10, $max*10)/10)),
array(name => "MUM", data => array(mt_rand ($min*10, $max*10)/10, mt_rand ($min*10, $max*10)/10, mt_rand ($min*10, $max*10)/10)),
array(name => "KOL", data => array(mt_rand ($min*10, $max*10)/10, mt_rand ($min*10, $max*10)/10, mt_rand ($min*10, $max*10)/10)),
array(name => "CHN", data => array(mt_rand ($min*10, $max*10)/10, mt_rand ($min*10, $max*10)/10, mt_rand ($min*10, $max*10)/10)));
echo json_encode($array);
flush();
?>
你可以看到工作示例here。
希望这会有所帮助。
更多推荐
柱形图ajax,高图柱形图动态更新ajax
发布评论