Highcharts使用簡例及非同步動態讀取資料

NO IMAGE

Highcharts 是一個用純JavaScript編寫的一個圖表庫, 能夠很簡單便捷的在web網站或是web應用程式新增有互動性的圖表,並且免費提供給個人學習、個人網站和非商業用途使用。HighCharts支援的圖表型別有曲線圖、區域圖、柱狀圖、餅狀圖、散狀點圖和綜合圖表。

第一部分:在head之間載入兩個JS庫。


<script src="html/js/jquery.js"></script>
<script src="html/js/chart/highcharts.js"></script> 

可以到http://www.hcharts.cn/ 下載,有相關教程和使用說明文件。

英文好的可以去官網:http://www.highcharts.com/

第二部分:JS程式碼


//定義一個Highcharts的變數,初始值為null
var oChart = null;
//定義oChart的佈局環境
//佈局環境組成:X軸、Y軸、資料顯示、圖示標題
var oOptions = { 
//設定圖表關聯顯示塊和圖形樣式
chart: { 
renderTo: 'container', //設定顯示的頁面塊
//type:'line'    //設定顯示的方式
type: 'column'
},
//圖示標題
title: { 
text: '圖表展示範例', //設定標題
//text: null, //設定null則不顯示標題
},
//x軸
xAxis: {
title: {
text: 'X 軸 標 題'
},
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
},
//y軸
yAxis: {
title: { text: 'Y 軸 標 題' }, //設定Y軸標題關閉
},
//資料列
series: [{
data:[120,360,560,60,360,160,40,360,60,230,230,300]
}] 
}; 
$(document).ready(function(){
oChart = new Highcharts.Chart(oOptions);
//非同步新增第2條資料列
LoadSerie_Ajax();
}); 
//非同步讀取資料並載入到圖表
function LoadSerie_Ajax() { 
oChart.showLoading(); 
$.ajax({ 
url : 'ajax/get_value.aspx',
type : 'POST',
dataType : 'json',
async : false, //同步處理後面才能處理新新增的series
contentType: "application/x-www-form-urlencoded; charset=utf-8", 
success : function(rntData){
var oSeries = {
name: "第二條",
data: rntData.rows1
};
oChart.addSeries(oSeries);
}
});
oChart.hideLoading(); 
} 

第三部分:C#程式碼


Response.Clear();
Response.Write("{\"rows1\":[10,20,30,40,50,200,70,100,90,200,100,60]}");
Response.End(); 
輸出的資料格式為 {"rows1":[10,20,30,40,50,200,70,100,90,200,100,60]} 
多條的資料格式為 {"rows1":[10,20,30,40,50,200,70,100,90,200,100,60],"rows2":[10,20,30,40,50,200,70,100,90,200,100,60]} 

第四部分:HTML頁面程式碼


<div id="container" style="min-width:400px;width:1200px;height:400px;"></div>

下面給大家分享一段程式碼關於highcharts非同步獲取資料

頁面非同步程式碼


$(function () {
var chart_validatestatics;
$(document).ready(function () {
var options_validatestatics = {
chart: {
renderTo: 'container_validatestatics',
type: 'column'
},
title: {
text: '驗票分析'
},
subtitle: {
text: 'tourol.cn'
},
xAxis: {
},
yAxis: {
title: {
text: '人數'
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
tooltip: {
formatter: function () {
return '<b>'   this.x   '</b><br/>'   this.series.name   ': '   this.y   '人';
}
},
credits: {
enabled: false
},
series: [{
name: "驗票使用者",
width: 3
}]
}
$.get("/ajaxhandler/dataupdate.ashx?operate_type=validatestatics", function (data) {
var xatrnames = [];
var yvalidators = [];
for (var i = 0; i < data.rows.length; i  ) {
xatrnames.push([
data.rows[i].atrname
]);
yvalidators.push([
data.rows[i].atrname,
parseInt(data.rows[i].nums)
]);
}
alert(xatrnames   yvalidators);
options_validatestatics.xAxis.categories = xatrnames
options_validatestatics.series[0].data = yvalidators;
chart_validatestatics = new Highcharts.Chart(options_validatestatics);
});
});
}); 

這裡要注意的是:x軸陣列定義好後,定義y軸資料的時候要把對應在x軸上的值也push到陣列裡,不然會造成無法顯示的情況

對應的在ajaxhandler中,拼接字串並返回即可


string json = "{\"rows\":[";
for (int i = 0; i < datas.Rows.Count; i  )
{
json  = "{\"atrname\":\""   datas.Rows[i]["name"]   "\",\"nums\":\""   datas.Rows[i]["nums"]   "\"},";
}
json = json.TrimEnd(',');
json  = "]}";
context.Response.Write(json);
context.Response.Flush();
context.Response.End(); 

您可能感興趣的文章:

Highcharts+NodeJS搭建資料視覺化平臺示例Highcharts學習之資料列Highcharts 多個Y軸動態重新整理資料的實現程式碼動態更新highcharts資料的實現方法通過php動態傳資料到highcharts