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

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

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(); 

您可能感興趣的文章:

• 純JAVASCRIPT圖表動畫外掛程式Highcharts Examples
• Highcharts 非常實用的Javascript統計圖demo樣本
• JQuery Highcharts 動態組建圖表的方法
• 淺析jquery的js圖表組件highcharts
• jQuery.Highcharts.js繪製柱狀圖餅狀圖曲線圖
• PHP+mysql+Highcharts產生餅狀圖
• HighCharts圖表控制項在ASP.NET WebForm中的使用總結（全）