[筆記]學習HighCharts的使用（不錯的web圖表插件）

時間 2019-11-09

標籤筆記學習 highcharts 使用不錯 web 圖表插件欄目 HTML 简体版

原文原文鏈接

最近有一個小項目須要用到折線圖。處處請教了一下，有人給我推薦了highcharts。感受還不錯，就稍微學習下。這裏記錄一下學習的過程。javascript

網上相關的內容還很多，我就說一下我學習的內容。php

看的第一篇文章《HighCharts入門》，正如它的名字同樣，很好的講解了各類參數以及使用步驟1234。css

看的第二篇文章《HighCharts使用指南》，有一個很不錯的結合後端讀取數據實時更新圖表的例子。可是有一點，用push添加數據我始終沒有成功過……因此我有在網路上搜索了一番，解答終於讓我在《HighChart學習-更新數據data Series與重繪》這裏找到。後面我寫的小實例就是用了這種方式。html

若是還想更深刻了解的話能夠下載api，我這裏有一版，打開看的時候若是啥都沒有看看有沒有報文件沒找到的錯，而後把js的路徑對應上就能夠看了「點這裏下載」若是無論用也能夠百度搜，資源不少的。java

還有一個網址，介紹的比較詳細，可是並無完工，《HighCharts中文教程》。jquery

附上我寫的一個簡單的例子。代碼以下：ajax

  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="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
  8 <script src="http://code.highcharts.com/highcharts.js"></script>
  9 <script src="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" class="datainput"/>');
 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:array
112     },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     else
135     {
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>

運行效果演示：後端

另外說些題外話吧。用博客園幾天來，只寫了一點點文章，並且都沒有什麼技術水準。不但沒有什麼技術水準，文筆也爛的很！乾巴巴的半天掰不出幾個字來，最後搞得跟寫實驗報告似的。用這麼正理八經的風格行文還要行雲流水臣妾真是作不到啊！和我當初設想寫出和別人同樣整整齊齊又美麗的文章的想法相去甚遠啊……咳咳，扯遠了，其實我並無想要如何如何，就是想記錄下我這隻菜鳥撲騰翅膀的歷程，若是有和我同樣的，還在這些簡單的問題上撲騰的人，要是我寫的東西能幫助你分毫，我簡直開心的不得了。api

之後我仍是會繼續寫着我學到的東西。使勁兒撲騰。就算一時半會兒成不了大神，至少也要從一隻菜鳥撲騰成一隻大鳥。←_←別想歪，個人性別不容許我擁有那個東西。數組

——我怎麼一扯起這些廢話來就這麼來勁呢！