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的變量，初始值為nullvar 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(); 新聞熱點
疑難解答
