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的变量,初始值为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,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 = 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();
本文地址:https://www.stayed.cn/item/3298
转载请注明出处。
本站部分内容来源于网络,如侵犯到您的权益,请 联系我