[笔记]学习HighCharts的使用(不错的web图表插件)
2015-03-14 16:47
531 查看
最近有一个小项目需要用到折线图。到处请教了一下,有人给我推荐了highcharts。感觉还不错,就稍微学习下。这里记录一下学习的过程。
网上相关的内容还不少,我就说一下我学习的内容。
看的第一篇文章《HighCharts入门》,正如它的名字一样,很好的讲解了各种参数以及使用步骤1234。
看的第二篇文章《HighCharts使用指南》,有一个很不错的结合后端读取数据实时更新图表的例子。但是有一点,用push添加数据我始终没有成功过……所以我有在网路上搜索了一番,解答终于让我在《HighChart学习-更新数据data Series与重绘》这里找到。后面我写的小实例就是用了这种方式。
如果还想更深入了解的话可以下载api,我这里有一版,打开看的时候如果啥都没有看看有没有报文件没找到的错,然后把js的路径对应上就可以看了「点这里下载」如果不管用也可以百度搜,资源很多的。
还有一个网址,介绍的比较详细,但是并没有完工,《HighCharts中文教程》。
附上我写的一个简单的例子。代码如下:
运行效果演示:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201503/01aef4bbf01d5b13d4644c3bf34bada0.png)
![](https://oscdn.geek-share.com/Uploads/Images/Content/201503/7e39b4dd5ee9b221fb186b973ce36e18.png)
![](https://oscdn.geek-share.com/Uploads/Images/Content/201503/8181ee478e6821cbe1ad8f1520032a4f.png)
另外说些题外话吧。用博客园几天来,只写了一点点文章,而且都没有什么技术水准。不但没有什么技术水准,文笔也烂的很!干巴巴的半天掰不出几个字来,最后搞得跟写实验报告似的。用这么正理八经的风格行文还要行云流水臣妾真是做不到啊!和我当初设想写出和别人一样整整齐齐又美丽的文章的想法相去甚远啊……咳咳,扯远了,其实我并没有想要如何如何,就是想记录下我这只菜鸟扑腾翅膀的历程,如果有和我一样的,还在这些简单的问题上扑腾的人,要是我写的东西能帮助你分毫,我简直开心的不得了。
以后我还是会继续写着我学到的东西。使劲儿扑腾。就算一时半会儿成不了大神,至少也要从一只菜鸟扑腾成一只大鸟。←_←别想歪,我的性别不允许我拥有那个东西。
——我怎么一扯起这些废话来就这么来劲呢!
网上相关的内容还不少,我就说一下我学习的内容。
看的第一篇文章《HighCharts入门》,正如它的名字一样,很好的讲解了各种参数以及使用步骤1234。
看的第二篇文章《HighCharts使用指南》,有一个很不错的结合后端读取数据实时更新图表的例子。但是有一点,用push添加数据我始终没有成功过……所以我有在网路上搜索了一番,解答终于让我在《HighChart学习-更新数据data Series与重绘》这里找到。后面我写的小实例就是用了这种方式。
如果还想更深入了解的话可以下载api,我这里有一版,打开看的时候如果啥都没有看看有没有报文件没找到的错,然后把js的路径对应上就可以看了「点这里下载」如果不管用也可以百度搜,资源很多的。
还有一个网址,介绍的比较详细,但是并没有完工,《HighCharts中文教程》。
附上我写的一个简单的例子。代码如下:
<!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文件</title> <!--引用js文件--> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script src="http://code.highcharts.com/highcharts.js"></script> <script src="http://code.highcharts.com/modules/exporting.js"></script> <!--绘制图表--> <script type="text/javascript"> var chart; var data_name; $(function(){ chart=new Highcharts.Chart({ chart:{ renderTo:'chartsContainer' }, title:{ text:'折线图的标题', x:-20//中间的位置 }, subtitle:{ text:'折线图的副标题', x:-20 }, xAxis:{ title:{ text:'x轴名称', }, categories:['x1', 'x2', 'x3', 'x4', 'x5', 'x6','x7'] }, yAxis:{ title:{ text:'y轴名称', } }, colors:[ '#FF0000',//红 '#00FF00',//绿 '#0000FF',//蓝 '#FFFF00',//黄 ], //在这里填充折线图数据 series:[ { name:"数据1", data:[1,2.25,3,3.25,3,2.25,1] }, { name:"数据2", data:[-1,2.25,5,6,5,2.25,-1] } ], tooltip:{ valueSuffix:"单位" }, credits:{ href:"http://www.cnblogs.com/SHL-sherly/", text:"SHL-博客园", position:{x:-30,y:-20} }, //图例的样式,放置于图表中 legend:{ layout:'vertical', align:'right', verticalAlign:'top', x:-40, y:100, floating:true, borderWidth:1, backgroundColor:(Highcharts.theme && Highcharts.theme.legendBackgroundColor || '#FFFFFF'), shadow:true } }); for(var i=0;i<7;i++) { $("#dataswrapper").append('<input type="text" class="datainput"/>'); } $("#dataswrapper").append('<input type="button" value="确认增加" onclick="addNewRecord();"/>') }); function disp_prompt() { var dataname=prompt("请输入数据名称","数据1"); if(dataname!=null&&dataname!="") { data_name=dataname; $("#dataswrapper").show(); } } function addNewRecord() { var array=""; $("#dataswrapper input.datainput").each(function() { if($(this).val()!=null&&$(this).val()!=""&&isNumber($(this).val())) array+=$(this).val()+","; else array+=0+","; $(this).val(null); }); //字符串变成字符串数组 array=array.trim(',').split(','); //这里要转化成数值才行,不知有没有更好的方法 for(var i=0;i<array.length;i++){ array[i]=parseFloat(array[i]); } //增加数据关键代码 chart.addSeries({ name:data_name, data:array },true); $("#dataswrapper").hide(); } //判断是否是数字 function isNumber(number) { var regEx=/^[0-9]+.?[0-9]*$/; return regEx.test(number); } //trim方法重写,⊙﹏⊙b汗 String.prototype.trim=function(c) { if(c==null||c=="") { var regEx=new RegExp("/^/s*/"); var str=this.replace(regEx,''); regEx=new RegExp("//s/"); var i=str.length; while(regEx.test(str.charAt(--i))); return str.slice(0,i+1); } else { var regEx=new RegExp("^"+c+"*"); var str=this.replace(regEx,''); regEx=new RegExp(c); var i=str.length; while(regEx.test(str.charAt(--i))); return str.slice(0,i+1); } } </script> <style type="text/css"> .datainput{ width:35px; } </style> </head> <body> <!--绘制图表的div--> <div id="chartsContainer" style="width:60%;height:500px;float:left"></div> <div> <input type="button" value="点此添加一条数据" onClick="disp_prompt()"/> <div id="dataswrapper" style="display:none;"> <p>输入数据值(其实未必要按照x轴规定的七个,x轴和y轴会根据数据而变化,这里为了方便。另外不规范数据会被置0)</p> </div> <p style="color:red;font-size:12px;">*点击图例中的数据名,可以显示隐藏这条数据的所有记录,图表形状也会发生改变</p> </div> </body> </html>
运行效果演示:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201503/01aef4bbf01d5b13d4644c3bf34bada0.png)
![](https://oscdn.geek-share.com/Uploads/Images/Content/201503/7e39b4dd5ee9b221fb186b973ce36e18.png)
![](https://oscdn.geek-share.com/Uploads/Images/Content/201503/8181ee478e6821cbe1ad8f1520032a4f.png)
另外说些题外话吧。用博客园几天来,只写了一点点文章,而且都没有什么技术水准。不但没有什么技术水准,文笔也烂的很!干巴巴的半天掰不出几个字来,最后搞得跟写实验报告似的。用这么正理八经的风格行文还要行云流水臣妾真是做不到啊!和我当初设想写出和别人一样整整齐齐又美丽的文章的想法相去甚远啊……咳咳,扯远了,其实我并没有想要如何如何,就是想记录下我这只菜鸟扑腾翅膀的历程,如果有和我一样的,还在这些简单的问题上扑腾的人,要是我写的东西能帮助你分毫,我简直开心的不得了。
以后我还是会继续写着我学到的东西。使劲儿扑腾。就算一时半会儿成不了大神,至少也要从一只菜鸟扑腾成一只大鸟。←_←别想歪,我的性别不允许我拥有那个东西。
——我怎么一扯起这些废话来就这么来劲呢!
相关文章推荐
- 不错的maven学习笔记,收藏——Maven学习 (三) 使用m2eclipse创建web项目
- Maven学习笔记——(2)使用Maven的Tomcat插件启动web项目
- 学习笔记:web服务的创建及使用
- Web Service学习笔记:天气预报Web服务的使用方法
- 如何使用一个不错的图表组件WebChart(免费)
- 不错的maven学习笔记,收藏——Maven学习 (二) Eclipse 上安装 Maven3插件
- 基于MVC4+EasyUI的Web开发框架经验总结(4)--使用图表控件Highcharts
- IssueVision 学习笔记(一)-----使用SoapHeader传递Web Serivices自定义的身份验证数据
- Hadoop学习笔记之五:使用Eclipse插件
- SMP3.0学习笔记之十 使用Kapsel EncryptedStorage插件以及GET/POST对OData服务进行操作
- Android学习之笔记---WebView的使用
- 如何使用一个不错的图表组件WebChart(免费)
- 关于JQuery 插件Grid的学习使用笔记 (PHP版)
- UI学习笔记---EasyUI panel插件使用---03
- 如何使用一个不错的图表组件WebChart(免费)
- Symbian学习笔记(17) - 初探WebServices API的使用(上)
- Hadoop学习笔记之五:使用Eclipse插件
- jquery图表插件highcharts的安装使用
- Highcharts图表插件的简单使用说明
- chrome插件学习笔记之webRequest