Heighcharts ajax 动态更新链接状态图

来源：互联网发布：左左网源码编辑：程序博客网时间：2024/06/05 06:12

一、引言

要实现上面的效果。主要应用Heighcharts ，Heighcharts是一个对个人免费的高效率的前端画图组建，商业收费。图形出来会有heighcharts的网址，不过可以破解。

二、原理

原理很简单，Heighcharts进行画图显示，ajax动态更新数据，把更新的数据应用到heighcharts上去。

三、实现

Heighcharts 提供了很多用例，也提供了很多api函数，纯做一个heighcharts，难度不大。刚开始也根据例子做了cpu与内存监控图。没有用到ajax。很轻松完成。后面需要做连接监控图，需要结合ajax。

我应用的是prototype，自然很轻易的就得到了数据。

new Ajax.Request('<?=$this->url('XXX') ?>', { method:'post',

onSuccess: function(data) {

try{

alert(eval(data.responseText));

}catch(e) { alert(e.message)

}

});

问题来了，怎么把得到的ajax数据调用到heigcharts上。我图简单（js不过关）就想直接把ajax封装成一函数，然后把数据返回应用到heighcharts，搞了一天，都没数据弄出来，最后网上查了一下，有网友问个这个问题，但没得到解决答案，只能最终放弃。

后面参考了别人的代码，把chart设为全局变量调用到ajax里实现。终于找到了解决方案。写了半天，最后得到一个图

随着时间的增加，图形变化，但原来的图貌似没删除掉的。调式了半天没结果。Highcharts的 enginConn_chart.redraw();重画函数与

for(var k =0;k<= enginConn_chart.series.length - 1; k-++){

enginConn_chart.series[k].remove();

}

删除函数都有用到，实在么办法了，就请教我的师傅，师傅果然就是师傅，把

for(var k =0;k<= enginConn_chart.series.length - 1; k-++){

enginConn_chart.series[k].remove();

}

改成

for(var k = enginConn_chart.series.length - 1; k >= 0; k--){

enginConn_chart.series[k].remove();

}

显示正常。佩服！

代码：

var enginConn_chart;

function get_enginConn_data(){

new Ajax.Request('<?=$this->url('XX) ?>', { method:'post',

onSuccess: function(data) {

try{

update_enginConn_chart(eval(data.responseText));

}catch(e) { //alert(e.message)

}

});

}

function update_enginConn_chart(data){

enginConn_chart.redraw();

var smain_data=[];

var cmain_data=[];

var tmain_data=[];

for (var key in data) {

if (data.hasOwnProperty(key)) {

if(key=="main"){

var smain=data.main.s;

var cmain=data.main.c;

var tmain=data.main.to;

}

time = (new Date()).getTime();

for (var i = 0; i < smain.length; i++) {

var svalue = smain[i];

if(svalue==0){

svalue=Math.random() * 100;

}

smain_data.push({ y : svalue, x : time - i*10000});

}

for (var i = 0; i < cmain.length; i++) {

var cvalue = cmain[i];

if(cvalue==0){

cvalue=Math.random() * 100;

}

cmain_data.push({ y : cvalue, x : time - i*10000});

}

for (var i = 0; i < tmain.length; i++) {

var tvalue = tmain[i];

if(tvalue==0){

tvalue=Math.random() * 100;

}

tmain_data.push({ y : tvalue, x : time - i*10000});

}

for(var k = enginConn_chart.series.length - 1; k >= 0; k--){

enginConn_chart.series[k].remove();

}

enginConn_chart.addSeries({

data: smain_data,

color: '#0066FF'

}

);

enginConn_chart.addSeries({

data: cmain_data,

color: '#006633'

}

);

enginConn_chart.addSeries({

data: tmain_data,

color: '#FF6600'

}

);

}

Highcharts.setOptions({

global: {

useUTC: false

}

});

jQuery(document).ready(function() {

name='';

data=[];

enginConn_chart = new Highcharts.Chart({

chart: {

renderTo: '_connmain_',

defaultSeriesType: 'spline',

marginRight: 10,

marginTop: 10

title: {

text: ''

xAxis: {

type: 'datetime',

tickPixelInterval: 120

yAxis: {

title: {

text: '保持连接数/个'

min:0,

minPadding: 0.5,

maxPadding: 0.5,

plotLines: [{

value: 0,

width: 1,

color: '#87BED3'

}]

plotOptions: {

series: {

lineWidth: 1,

dashStyles:'Solid',

shadow: false,

states: {

hover: {

enabled: true,

lineWidth: 1

}

marker: {

enabled: false,

states: {

hover: {

enabled: true,

symbol: 'circle',

radius: 3,

lineWidth: 1

}

tooltip: {

formatter: function() {

return Highcharts.numberFormat(this.y, 2);

}

legend: {

enabled: true,

borderWidth: 1

exporting: {

enabled: false

series: [

{

color: '#0066FF',

data: data

}

]

});

get_enginConn_data();

window.setInterval(get_enginConn_data, 10000);

四、总结

1、前前后后这个东西折腾我三天，后来向大牛请教，5-6分钟就搞定，得多请教多交流。

2、方法不行，就应该立即换方法。

3、多看别人提供你的东西。就是别重复你自己，但要善用别人的东西。之前折腾了一段时间与ajax结合，其实人家都有这例子，我没看。

highcharts有网友说比较耗内存，我到没测试过。希望有真实的数据证明。