柱形图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: 'https://gist.githubusercontent.com/dannyjhonston/0a573e0a882180d20df56357ac05345d/raw/541a5d3e17e686820c0476a630d490ff46fb47c2/successper.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页面更改https://gist.githubusercontent.com/dannyjhonston/0a573e0a882180d20df56357ac05345d/raw/541a5d3e17e686820c0476a630d490ff46fb47c2/successper.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。

希望这会有所帮助。