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 軸 標 題' }
    },
    
    //數據列
    series: [{
        data:[120,360,560,60,360,160,40,360,60,230,230,300]
        }] 
}; 

$(document).ready(function(){
              
    oChart = new Highcharts.Chart(oOptions);
    
    //異步動態加載數據列
    LoadSerie_Ajax();
}); 

//異步讀取數據並加載到圖表
function LoadSerie_Ajax() { 
        oChart.showLoading(); 
        $.ajax({  
            url : 'ajax/get_value.aspx',
            type : 'POST',
            dataType : 'json',
            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>