Heighcharts ajax 动态更新链接状态图
一、引言
要实现上面的效果。主要应用Heighcharts ，Heighcharts是一个对个人免费的高效率的前端画图组建，商业收费。图形出来会有heighcharts的网址，不过可以破解。
二、原理
原理很简单，Heighcharts进行画图显示，ajax动态更新数据，把更新的数据应用到heighcharts上去。
三、实现
Heighcharts 提供了很多用例，也提供了很多api函数，纯做一个heighcharts，难度不大。刚开始也根据例子做了cpu与内存监控图。没有用到ajax。很轻松完成。后面需要做连接监控图，需要结合ajax。
我应用的是prototype，自然很轻易的就得到了数据。
new Ajax.Request('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('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);