本文主要是介绍Heighcharts ajax 动态更新链接状态图，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
一、引言
要实现上面的效果。主要应用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({
name: '服务器端 ',
data: smain_data,
color: '#0066FF'
}
);
enginConn_chart.addSeries({
name: '客户端 ',
data: cmain_data,
color: '#006633'
}
);
enginConn_chart.addSeries({
name: 'Total ',
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: [
{
name: name,
color: '#0066FF',
data: data
}
]
});
});
get_enginConn_data();
window.setInterval(get_enginConn_data, 10000);
四、总结
1、前前后后这个东西折腾我三天，后来向大牛请教，5-6分钟就搞定，得多请教多交流。
2、方法不行，就应该立即换方法。
3、多看别人提供你的东西。就是别重复你自己，但要善用别人的东西。之前折腾了一段时间与ajax结合，其实人家都有这例子，我没看。
highcharts有网友说比较耗内存，我到没测试过。希望有真实的数据证明。
这篇关于Heighcharts ajax 动态更新链接状态图的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
