Highcharts 是一个用纯JavaScript编写的一个图表库， 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。
第一部分：在head之间加载两个JS库。
rush:js;">
第二部分：JS代码
rush: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 轴 标 题' },//设置Y轴标题关闭
},//数据列
series: [{
data:[120,360,560,60,160,40,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#代码
rush:js;">
Response.Clear();
Response.Write("{\"rows1\":[10,20,30,50,200,70,100,90,60]}");
Response.End();
输出的数据格式为 {"rows1":[10,60]}
多条的数据格式为 {"rows1":[10,60],"rows2":[10,60]}
rush:js;">
下面给大家分享一段代码关于highcharts异步获取数据
页面异步代码
rush:js;">
$(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 '' + this.x + '
' + 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 = xatrnames options_validatestatics.series[0].data = yvalidators; chart_validatestatics = new Highcharts.Chart(options_validatestatics); }); }); });
' + 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 = xatrnames options_validatestatics.series[0].data = yvalidators; chart_validatestatics = new Highcharts.Chart(options_validatestatics); }); }); });
这里要注意的是：x轴数组定义好后，定义y轴数据的时候要把对应在x轴上的值也push到数组里，不然会造成无法显示的情况
对应的在ajaxhandler中，拼接字符串并返回即可
rush:js;">
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();
