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 = xatrnamesoptions_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（）;