最近有一个小项目需要用到折线图。到处请教了一下,有人给我推荐了highcharts。感觉还不错,就稍微学习下。这里记录一下学习的过程。网上相关的内容还不少,我就说一下我学习的内容。看的第一篇文章《HighCharts入门》,正如它的名字一样,很好的讲解了各种参数以及使用步骤123 ...
最近有一个小项目需要用到折线图。到处请教了一下,有人给我推荐了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
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。