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);</pre>