highcharts 是一个用纯javascript编写的一个图表库， 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。highcharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。
第一部分：在head之间加载两个js库。

可以到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页面代码

下面给大家分享一段代码关于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 '' + 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); }); }); });
这里要注意的是：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();