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>