快捷導(dǎo)航

Highcharts使用簡(jiǎn)例及異步動(dòng)態(tài)讀取數(shù)據(jù)

更新時(shí)間：2015年12月30日 15:21:33 作者：dongdong_hb

Highcharts 是一個(gè)用純JavaScript編寫(xiě)的一個(gè)圖表庫(kù)，能夠很簡(jiǎn)單便捷的在web網(wǎng)站或是web應(yīng)用程序添加有交互性的圖表，并且免費(fèi)提供給個(gè)人學(xué)習(xí)、個(gè)人網(wǎng)站和非商業(yè)用途使用，通過(guò)本文給大家介紹Highcharts使用簡(jiǎn)例及異步動(dòng)態(tài)讀取數(shù)據(jù)的相關(guān)知識(shí)，感興趣的朋友一起學(xué)習(xí)吧

Highcharts 是一個(gè)用純JavaScript編寫(xiě)的一個(gè)圖表庫(kù)，能夠很簡(jiǎn)單便捷的在web網(wǎng)站或是web應(yīng)用程序添加有交互性的圖表，并且免費(fèi)提供給個(gè)人學(xué)習(xí)、個(gè)人網(wǎng)站和非商業(yè)用途使用。HighCharts支持的圖表類型有曲線圖、區(qū)域圖、柱狀圖、餅狀圖、散狀點(diǎn)圖和綜合圖表。

第一部分：在head之間加載兩個(gè)JS庫(kù)。

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

可以到http://www.hcharts.cn/ 下載，有相關(guān)教程和使用說(shuō)明文檔。

英文好的可以去官網(wǎng)：http://www.highcharts.com/

第二部分：JS代碼

//定義一個(gè)Highcharts的變量，初始值為null
var 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è)置顯示的頁(yè)面塊
  //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頁(yè)面代碼

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

下面給大家分享一段代碼關(guān)于highcharts異步獲取數(shù)據(jù)

頁(yè)面異步代碼

$(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ù)的時(shí)候要把對(duì)應(yīng)在x軸上的值也push到數(shù)組里，不然會(huì)造成無(wú)法顯示的情況

對(duì)應(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();

您可能感興趣的文章: