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的变量,初始值为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();
相关文章
jQuery.Highcharts.js绘制柱状图饼状图曲线图
在数据统计和分析业务中,有时会遇到客户需要在一个图表中将柱状图、饼状图、曲线图的都体现出来,即可以从柱状图中看出具体数据、又能从曲线图中看出变化趋势,还能从饼状图中看出各部分数据比重。Highcharts可以轻松实现...2015-03-15如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)
ECharts地图主要用于地理区域数据的可视化,展示不同区域的数据分布信息,通过本文给大家介绍如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据,需要的朋友参考下吧...2016-02-26- 这篇文章主要介绍了JQuery异步提交表单与文件上传功能,结合实例形式分析了jQuery表单提交及文件传输操作的相关实现技巧,需要的朋友可以参考下...2017-01-16
jQuery插件HighCharts绘制2D带有Legend的饼图效果示例【附demo源码下载】
这篇文章主要介绍了jQuery插件HighCharts绘制2D带有Legend的饼图效果,结合实例形式分析了jQuery使用HighCharts绘制带明细显示的饼状图效果实现技巧,并附带了demo源码供读者下载参考,需要的朋友可以参考下...2017-03-13- 这篇文章主要介绍了又拍云异步上传实例教程详解的相关资料,需要的朋友可以参考下...2016-04-23
- 这篇文章主要介绍了NodeJs并发异步的回调处理的相关资料,需要的朋友可以参考下...2015-12-24
- 本篇文章主要介绍了Yii2.0中使用js异步删除示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 ...2017-03-12
- 这篇文章主要为大家详细介绍了php读取和保存base64编码的图片内容,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-04-26
- 这篇文章主要介绍了php实现异步将远程链接上内容(图片或内容)写到本地的方法,涉及php基于curl进行远程文件传输的相关操作技巧,需要的朋友可以参考下...2016-12-02
- 异步操作动态添加节点,导致在代码中给添加的节点全局绑定事件或者获取元素无效,问题出在哪里呢?下文给大家介绍下,感兴趣的朋友参考下吧...2017-05-27
- 下面小编就为大家带来一篇PHP中读取文件的几个方法总结(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-06-12
Ajax异步文件上传与NodeJS express服务端处理
本文主要介绍了Ajax异步文件上传与NodeJS express服务端处理的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧...2017-04-03- Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习、个人网站和非商业用途使用,通过本文给大家介绍Highcharts使用简例及异步动态读取数据的相关知识,感兴趣的朋友一起学习吧...2016-01-02
- 这篇文章主要介绍了php实现异步数据调用的方法,分享了4种PHP异步执行的常用方式,感兴趣的小伙伴们可以参考一下...2015-12-25
- 下面小编就为大家带来一篇PHP读取大文件末尾N行的高效方法推荐。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-06-12
php异步:在php中使用fsockopen curl实现类似异步处理的功能方法
下面小编就为大家带来一篇php异步:在php中使用fsockopen curl实现类似异步处理的功能方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2017-01-08- 下面小编就为大家带来一篇php读取qqwry.dat ip地址定位文件的类实例代码。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-11-22
php file_get_contents取文件中数组元素的方法
下面小编就为大家带来一篇php file_get_contents取文件中数组元素的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2017-04-03- 下面小编就为大家带来一篇浅谈socket同步和异步、阻塞和非阻塞、IO模型。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2017-01-08
- 这篇文章主要介绍了基于Jquery插件实现跨域异步上传文件功能的相关资料,需要的朋友可以参考下...2016-04-27