你的位置:首页 > 软件开发 > Java > [笔记]学习HighCharts的使用(不错的web图表插件)

[笔记]学习HighCharts的使用(不错的web图表插件)

发布时间:2015-03-14 18:01:53
最近有一个小项目需要用到折线图。到处请教了一下,有人给我推荐了highcharts。感觉还不错,就稍微学习下。这里记录一下学习的过程。网上相关的内容还不少,我就说一下我学习的内容。看的第一篇文章《HighCharts入门》,正如它的名字一样,很好的讲解了各种参数以及使用步骤123 ...

[笔记]学习HighCharts的使用(不错的web图表插件)

最近有一个小项目需要用到折线图。到处请教了一下,有人给我推荐了highcharts。感觉还不错,就稍微学习下。这里记录一下学习的过程。

网上相关的内容还不少,我就说一下我学习的内容。

看的第一篇文章《HighCharts入门》,正如它的名字一样,很好的讲解了各种参数以及使用步骤1234。

看的第二篇文章《HighCharts使用指南》,有一个很不错的结合后端读取数据实时更新图表的例子。但是有一点,用push添加数据我始终没有成功过……所以我有在网路上搜索了一番,解答终于让我在《HighChart学习-更新数据data Series与重绘》这里找到。后面我写的小实例就是用了这种方式。

如果还想更深入了解的话可以下载api,我这里有一版,打开看的时候如果啥都没有看看有没有报文件没找到的错,然后把js的路径对应上就可以看了「点这里下载」如果不管用也可以百度搜,资源很多的。

还有一个网址,介绍的比较详细,但是并没有完工,《HighCharts中文教程》。

 

附上我写的一个简单的例子。代码如下:

 

 1 <!DOCTYPE> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>無標題文件</title> 6 <!--引用js文件--> 7 <script type="text/javascript" src='/images/loading.gif' data-original="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 8 <script src='/images/loading.gif' data-original="http://code.highcharts.com/highcharts.js"></script> 9 <script src='/images/loading.gif' data-original="http://code.highcharts.com/modules/exporting.js"></script> 10 <!--绘制图表--> 11 <script type="text/javascript"> 12 var chart; 13 var data_name; 14 $(function(){ 15   chart=new Highcharts.Chart({ 16     chart:{ 17       renderTo:'chartsContainer' 18     }, 19     title:{ 20       text:'折线图的标题', 21       x:-20//中间的位置 22     }, 23     subtitle:{ 24       text:'折线图的副标题', 25       x:-20 26     }, 27     xAxis:{ 28       title:{ 29         text:'x轴名称', 30       }, 31       categories:['x1', 'x2', 'x3', 'x4', 'x5', 'x6','x7'] 32     }, 33     yAxis:{ 34       title:{ 35         text:'y轴名称', 36       } 37     }, 38     colors:[ 39       '#FF0000',//红  40       '#00FF00',//绿  41       '#0000FF',//蓝  42       '#FFFF00',//黄 43      ], 44     //在这里填充折线图数据 45     series:[ 46       { 47         name:"数据1", 48         data:[1,2.25,3,3.25,3,2.25,1] 49       }, 50       { 51         name:"数据2", 52         data:[-1,2.25,5,6,5,2.25,-1] 53       } 54     ], 55     tooltip:{ 56       valueSuffix:"单位" 57     }, 58     credits:{ 59       href:"http://www.cnblogs.com/SHL-sherly/", 60       text:"SHL-博客园", 61       position:{x:-30,y:-20} 62     }, 63     //图例的样式,放置于图表中 64     legend:{ 65       layout:'vertical', 66       align:'right', 67       verticalAlign:'top', 68       x:-40, 69       y:100, 70       floating:true, 71       borderWidth:1, 72       backgroundColor:(Highcharts.theme && Highcharts.theme.legendBackgroundColor || '#FFFFFF'), 73       shadow:true 74     } 75   }); 76      77   for(var i=0;i<7;i++) 78   { 79     $("#dataswrapper").append('<input type="text" />'); 80   } 81   $("#dataswrapper").append('<input type="button" value="确认增加" onclick="addNewRecord();"/>') 82 }); 83 function disp_prompt() 84 { 85   var dataname=prompt("请输入数据名称","数据1"); 86   if(dataname!=null&&dataname!="") 87   { 88     data_name=dataname; 89     $("#dataswrapper").show(); 90   } 91 } 92 function addNewRecord() 93 { 94   var array=""; 95   $("#dataswrapper input.datainput").each(function() { 96     if($(this).val()!=null&&$(this).val()!=""&&isNumber($(this).val())) 97       array+=$(this).val()+","; 98     else 99       array+=0+",";100     $(this).val(null);101   });102   //字符串变成字符串数组103   array=array.trim(',').split(',');104   //这里要转化成数值才行,不知有没有更好的方法105   for(var i=0;i<array.length;i++){106     array[i]=parseFloat(array[i]);107   }108   //增加数据关键代码109   chart.addSeries({110     name:data_name,111     data:array112   },true);113   114   $("#dataswrapper").hide();115 }116 //判断是否是数字117 function isNumber(number)118 {119   var regEx=/^[0-9]+.?[0-9]*$/;120   return regEx.test(number);121 }122 //trim方法重写,⊙﹏⊙b汗123 String.prototype.trim=function(c)124 {125   if(c==null||c=="")126   {127     var regEx=new RegExp("/^/s*/");128     var str=this.replace(regEx,'');129     regEx=new RegExp("//s/");130     var i=str.length;131     while(regEx.test(str.charAt(--i)));132     return str.slice(0,i+1);133   }134   else135   {136     var regEx=new RegExp("^"+c+"*");137     var str=this.replace(regEx,'');138     regEx=new RegExp(c);139     var i=str.length;140     while(regEx.test(str.charAt(--i)));141     return str.slice(0,i+1);142   }143 }144 </script>145 <style type="text/css">146 .datainput{147   width:35px;148 }149 </style>150 </head>151 152 <body>153 <!--绘制图表的div-->154 <div id="chartsContainer" style="width:60%;height:500px;float:left"></div>155 <div>156 <input type="button" value="点此添加一条数据" onClick="disp_prompt()"/>157 <div id="dataswrapper" style="display:none;">158 <p>输入数据值(其实未必要按照x轴规定的七个,x轴和y轴会根据数据而变化,这里为了方便。另外不规范数据会被置0)</p>159 </div>160 <p style="color:red;font-size:12px;">*点击图例中的数据名,可以显示隐藏这条数据的所有记录,图表形状也会发生改变</p>161 </div>162 </body>163 </html>

原标题:[笔记]学习HighCharts的使用(不错的web图表插件)

关键词:web

web
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。