Highcharts 是一個用純JavaScript編寫的一個圖表庫， 能夠很簡單便捷的在web網(wǎng)站或是web應(yīng)用程序添加有交互性的圖表，并且免費(fèi)提供給個人學(xué)習(xí)、個人網(wǎng)站和非商業(yè)用途使用。HighCharts支持的圖表類型有曲線圖、區(qū)域圖、柱狀圖、餅狀圖、散狀點(diǎn)圖和綜合圖表。
第一部分：在head之間加載兩個JS庫。
<script src="html/js/jquery.js"></script><script src="html/js/chart/highcharts.js"></script>
可以到http://www.hcharts.cn/ 下載，有相關(guān)教程和使用說明文檔。
英文好的可以去官網(wǎng)：http://www.highcharts.com/
第二部分：JS代碼
//定義一個Highcharts的變量，初始值為nullvar oChart = null;//定義oChart的布局環(huán)境//布局環(huán)境組成：X軸、Y軸、數(shù)據(jù)顯示、圖標(biāo)標(biāo)題var oOptions = { //設(shè)置圖表關(guān)聯(lián)顯示塊和圖形樣式 chart: { renderTo: 'container', //設(shè)置顯示的頁面塊 //type:'line' //設(shè)置顯示的方式 type: 'column' }, //圖標(biāo)標(biāo)題 title: { text: '圖表展示范例', //設(shè)置標(biāo)題 //text: null, //設(shè)置null則不顯示標(biāo)題 }, //x軸 xAxis: { title: { text: 'X 軸 標(biāo) 題' }, categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] }, //y軸 yAxis: { title: { text: 'Y 軸 標(biāo) 題' }, //設(shè)置Y軸標(biāo)題關(guān)閉 }, //數(shù)據(jù)列 series: [{ data:[120,360,560,60,360,160,40,360,60,230,230,300] }] }; $(document).ready(function(){ oChart = new Highcharts.Chart(oOptions); //異步添加第2條數(shù)據(jù)列 LoadSerie_Ajax();}); //異步讀取數(shù)據(jù)并加載到圖表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(); 輸出的數(shù)據(jù)格式為 {"rows1":[10,20,30,40,50,200,70,100,90,200,100,60]} 多條的數(shù)據(jù)格式為 {"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>
下面給大家分享一段代碼關(guān)于highcharts異步獲取數(shù)據(jù)
頁面異步代碼
$(function () { var chart_validatestatics; $(document).ready(function () { var options_validatestatics = { chart: { renderTo: 'container_validatestatics', type: 'column' }, title: { text: '驗(yàn)票分析' }, subtitle: { text: 'tourol.cn' }, xAxis: { }, yAxis: { title: { text: '人數(shù)' } }, plotOptions: { bar: { dataLabels: { enabled: true } } }, tooltip: { formatter: function () { return '<b>' + this.x + '</b><br/>' + this.series.name + ': ' + this.y + '人'; } }, credits: { enabled: false }, series: [{ name: "驗(yàn)票用戶", 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軸數(shù)組定義好后，定義y軸數(shù)據(jù)的時候要把對應(yīng)在x軸上的值也push到數(shù)組里，不然會造成無法顯示的情況
對應(yīng)的在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(); 
