Highcharts使用简例及异步动态读取数据
Highcharts是一个用纯JavaScript编写的一个图表库，能够很简单便捷的在web网站或是web应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。
第一部分：在head之间加载两个JS库。
<scriptsrc="html/js/jquery.js"></script> <scriptsrc="html/js/chart/highcharts.js"></script>
可以到http://www.hcharts.cn/下载，有相关教程和使用说明文档。
英文好的可以去官网：http://www.highcharts.com/
第二部分：JS代码
//定义一个Highcharts的变量，初始值为null
varoChart=null;
//定义oChart的布局环境
//布局环境组成：X轴、Y轴、数据显示、图标标题
varoOptions={
//设置图表关联显示块和图形样式
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=newHighcharts.Chart(oOptions);
//异步添加第2条数据列
LoadSerie_Ajax();
});
//异步读取数据并加载到图表
functionLoadSerie_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){
varoSeries={
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页面代码
<divid="container"style="min-width:400px;width:1200px;height:400px;"></div>
下面给大家分享一段代码关于highcharts异步获取数据
页面异步代码
$(function(){
varchart_validatestatics;
$(document).ready(function(){
varoptions_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){
varxatrnames=[];
varyvalidators=[];
for(vari=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=newHighcharts.Chart(options_validatestatics);
});
});
});
这里要注意的是：x轴数组定义好后，定义y轴数据的时候要把对应在x轴上的值也push到数组里，不然会造成无法显示的情况
对应的在ajaxhandler中，拼接字符串并返回即可
stringjson="{\"rows\":[";
for(inti=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();