Highcharts使用简例 + 异步动态读取数据

第一部分：在head之间加载两个JS库。

<script src='/images/loading.gif' data-original="html/js/jquery.js"></script><script src='/images/loading.gif' data-original="html/js/chart/highcharts.js"></script>

  可以到http://www.hcharts.cn/ 这里去下载，这里也有相关教程。

第二部分：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.asp',      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(); }

第三部分：ASP代码，看输出的数据格式就可以了

Response.Clear()Response.Write("{""rows1"":[10,20,30,40,50,200,70,100,90,200,100,60]}")Response.End()

第四部分：HTML页面代码

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

原标题：Highcharts使用简例 + 异步动态读取数据

关键词：异步