相識Highcharts，幾分鍾玩轉Highcharts

本文轉載自查看原文 2014-08-22 17:53 1668 前端/ 前端雜談

Highcharts是一個功能強大、開源、美觀、圖表豐富、兼容絕大多數瀏覽器的純js圖表庫。

官網：http://www.hcharts.cn/

我覺得對於剛接觸一個東西的新手來說，有時候對一個東西真的可能毫無頭緒，這個Highcharts的官網做的挺不錯的。可以一點點學起。當然，看了下面我自己試着詳細注釋的代碼，你可能看完就知道怎么用它了。了解了它的結構，查起API文檔，Highcharts真的蠻簡單。希望我可以幫你節省時間，你需要的只是API文檔。

對了，別忘了先去下載highcharts.js這樣的必備文件。

先看代碼：

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3 <head>
  4   <title></title>
  5   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  6   <script type="text/javascript" src="jquery-1.11.1.js"></script>
  7   <script type="text/javascript" src="highcharts.js"></script>
  8 </head>
  9 <body >
 10   <div id="container" style="height:400px"></div>
 11   <script>
 12 $(function () {
 13     /*全局配置*/
 14     Highcharts.setOptions({
 15         chart: {
 16             zoomType: 'xy',
 17             /*圖表背景顏色*/
 18             backgroundColor: '#ffffff',
 19             borderColor:'#EBBA95',
 20             borderWidth:1,
 21             type: 'line',
 22             /*這里改變字體和設置大小*/
 23             style: {
 24                 fontFamily: "Lucida Sans Unicode",
 25                 fontSize:'12px',
 26             }
 27         }
 28     });
 29     /*容器內highcharts的配置*/
 30     $('#container').highcharts({
 31         /*版權信息*/
 32         credits : {
 33             text:''
 34         },
 35         /*大標題*/
 36         title: {
 37             text: '雙Y軸圖'
 38         },
 39         /*副標題*/
 40         subtitle: {
 41             text: 'for：訂單額和訂單百分比'
 42         },
 43         /*x軸*/
 44         xAxis: [{
 45             categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
 46                 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
 47         }],
 48         yAxis: 
 49           [{ // Primary yAxis
 50             labels: {
 51                 format: '{value}%',
 52                 style: {
 53                     color: '#89A54E'
 54                 }
 55             },
 56             title: {
 57                 text: '百分比',
 58                 style: {
 59                     color: '#89A54E'
 60                 }
 61             },
 62             min : 0
 63         }, { // Secondary yAxis
 64             title: {
 65                 text: '訂單額',
 66                 style: {
 67                     color: '#4572A7'
 68                 }
 69             },
 70             labels: {
 71                 format: '{value} ',
 72                 style: {
 73                     color: '#4572A7'
 74                 }
 75             },
 76             opposite: true,
 77             min : 0
 78         }],
 79         /*工具提示*/
 80         tooltip: {
 81              /*如果你需要給你圖表的某一部分添加某些功能的話，就可以去查找Highcharts的函數庫，像這樣添加就可以了*/
 82              formatter: function () {
 83                 return '<b>' + this.series.name + '</b><br/>' +
 84                     this.x + ': ' + this.y;
 85             }
 86         },
 87         /*基圖的一些參數，數據點配置*/
 88         plotOptions: {
 89           series:{
 90             cursor:'pointer',
 91             /*折線中間白色圓圈*/
 92             marker:{
 93               fillColor:'#FFFFFF',
 94               lineWidth:2,
 95               lineColor:null
 96             },
 97             point:{
 98                 /*數據點的事件，可以有click，mouseOut，mouseOver等*/
 99                 events:{
100                     click:function(){
101                         alert('category:'+this.category+',value:'+this.y);
102                     }
103                 }
104             }
105           }
106         },
107         /*圖例*/
108         legend: {
109             layout: 'vertical',
110             align: 'left',
111             x: 520,
112             verticalAlign: 'top',
113             y: 500,
114             floating: true,
115             backgroundColor: '#FFFFFF'
116         },
117         /*數據列，針對每一個數據列都可以配置它的顏色，type等各種信息*/
118         series: [{
119             name: '訂單數',
120             color: '#4572A7',
121             type: 'column',
122             yAxis: 1,
123             data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
124             tooltip: {
125                 valueSuffix: ' '
126             },
127             /*這一數據列的顯示顏色*/
128             color:'#f29700'
129 
130         }, {
131             name: '百分比',
132             color: '#89A54E',
133             type: 'spline',
134             data: [5.0, 7.9, 8.5, 11.5, 16.2, 11.5, 25.2, 21.5, 13.3, 16.3, 12.9, 6.6],
135             tooltip: {
136                 valueSuffix: '%'
137             },
138             color:'#f29700'
139         },
140         {
141             name: '訂單數',
142             color: '#4572A7',
143             type: 'column',
144             yAxis: 1,
145             data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
146             tooltip: {
147                 valueSuffix: ' '
148             },
149             color:'#666666'
150 
151         }, {
152             name: '百分比',
153             color: '#89A54E',
154             type: 'spline',
155             data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
156             tooltip: {
157                 valueSuffix: '%'
158             },
159             color:'#666666'
160         }]
161     });
162 });
163   </script>
164 </body>
165 </html>

實際上就是在hightcharts（{}）中進行各個模塊的配置即可，所謂的配置就是給各個模塊的對象字面量添加你所需要的對象，並給其賦值。

上面代碼配置完成：

像api文檔中提供的兩個圖，一目了然。

現在你情況都了解了，只要打開api文檔去查詢配置的參數就可以了，剛開始可能會感覺查起來頭暈毫無頭緒，其實只要按照上圖，分門別類的查找起來，會發現其實很容易。

知道了Highcharts的原理下一步就是真正的用起來啦。我對上面的代碼做了些改進與封裝。通過傳參進行配置，jquery選擇器可以調用的方法。數據可以讀取自定義的數據，也可以讀取外部的json文件。

代碼：

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3 <head>
  4   <title></title>
  5   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  6   <meta http-equiv="Access-Control-Allow-Origin" content="*">
  7   <script type="text/javascript" src="jquery-1.11.1.js"></script>
  8   <script type="text/javascript" src="highcharts.js"></script>
  9 </head>
 10 <body >
 11   <div id="main" style="height:400px"></div>
 12   <script>
 13 
 14 
 15 
 16      
 17     $.fn.customChart = function(type,min,max,text){
 18        /*   var data = 
 19     {
 20        data0 : [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
 21        data1 : [13, 13, 13, 13, 13, 13,13, 13, 13.3, 13.3, 13.9, 13.6],
 22        data2 : [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
 23        data3 : [13, 13, 13, 13, 13, 13,13, 13, 13.3, 13.3, 13.9, 13.6]
 24     };*/
 25           /*render成jQuery方法*/
 26           var $container = $('div').appendTo(document.body);
 27           var myChart = new Highcharts.Chart({
 28                chart: {
 29                     /*使用傳進的參數*/
 30                     renderTo:$container[0],
 31                     zoomType: 'xy',
 32                     /*圖表背景顏色*/
 33                     backgroundColor: '#ffffff',
 34                     borderColor:'#EBBA95',
 35                     borderWidth:1,
 36                     type: type,
 37                 },
 38                 /*版權信息*/
 39                 credits : {
 40                     text:''
 41                 },
 42                 /*大標題*/
 43                 title: {
 44                     text: text,
 45                 },
 46                 /*副標題*/
 47                 /*subtitle: {
 48                     text: 'for：訂單額和訂單百分比'
 49                 },*/
 50                 /*x軸*/
 51                 xAxis: [{
 52                     categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
 53                         'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
 54                 }],
 55                 yAxis: 
 56                   [{ // Primary yAxis
 57                     labels: {
 58                         format: '{value}%',
 59                         style: {
 60                             color: '#89A54E'
 61                         }
 62                     },
 63                     title: {
 64                         text: '百分比',
 65                         style: {
 66                             color: '#89A54E'
 67                         }
 68                     },
 69                     min : 0
 70                 }, { // Secondary yAxis
 71                     title: {
 72                         text: '訂單額',
 73                         style: {
 74                             color: '#4572A7'
 75                         }
 76                     },
 77                     labels: {
 78                         format: '{value} ',
 79                         style: {
 80                             color: '#4572A7'
 81                         }
 82                     },
 83                     opposite: true,
 84                     min : min,
 85                     max : max,
 86                 }],
 87                 /*工具提示*/
 88                 tooltip: {
 89                      /*如果你需要給你圖表的某一部分添加某些功能的話，就可以去查找Highcharts的函數庫，像這樣添加就可以了*/
 90                      formatter: function () {
 91                         return '<b>' + this.series.name + '</b><br/>' +
 92                             this.x + ': ' + this.y;
 93                     }
 94                 },
 95                 /*基圖的一些參數，數據點配置*/
 96                 plotOptions: {
 97                   series:{
 98                     cursor:'pointer',
 99                     /*折線中間白色圓圈*/
100                     marker:{
101                       fillColor:'#FFFFFF',
102                       lineWidth:2,
103                       lineColor:null
104                     },
105                     point:{
106                         /*數據點的事件，可以有click，mouseOut，mouseOver等*/
107                         events:{
108                             click:function(){
109                                 alert('category:'+this.category+',value:'+this.y);
110                             }
111                         }
112                     }
113                   }
114                 },
115                 /*圖例*/
116                 legend: {
117                     layout: 'vertical',
118                     align: 'left',
119                     x: 10,
120                     verticalAlign: 'top',
121                     y: 10,
122                     floating: true,
123                     backgroundColor: '#FFFFFF'
124                 },
125                 /*數據列，針對每一個數據列都可以配置它的顏色，type等各種信息*/
126                 series: [{
127                     name: '訂單數',
128                     color: '#4572A7',
129                     type: 'column',
130                     yAxis: 1,
131                     /*data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],*/
132                     tooltip: {
133                         valueSuffix: ' '
134                     },
135                     /*這一數據列的顯示顏色*/
136                     color:'#f29700'
137 
138                 }, {
139                     name: '百分比',
140                     color: '#89A54E',
141                     type: 'spline',
142                     /*data: [5.0, 7.9, 8.5, 11.5, 16.2, 11.5, 25.2, 21.5, 13.3, 16.3, 12.9, 6.6],*/
143                     tooltip: {
144                         valueSuffix: '%'
145                     },
146                     color:'#f29700'
147                 },
148                 {
149                     name: '訂單數',
150                     color: '#4572A7',
151                     type: 'column',
152                     yAxis: 1,
153                  /*   data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],*/
154                     tooltip: {
155                         valueSuffix: ' '
156                     },
157                     color:'#666666'
158 
159                 }, {
160                     name: '百分比',
161                     color: '#89A54E',
162                     type: 'spline',
163                     /*data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],*/
164                     tooltip: {
165                         valueSuffix: '%'
166                     },
167                     color:'#666666'
168                 }]
169 
170            });
171            /*myChart.series[0].setData(data.data0);
172            myChart.series[1].setData(data.data1);
173            myChart.series[2].setData(data.data2);
174            myChart.series[3].setData(data.data3);*/
175 
176              /*讀取外部json文件的數據*/
177              $.getJSON('data.json',function(data){
178                    myChart.series[0].setData(data[0]);
179                    myChart.series[1].setData(data[1]);
180                    myChart.series[2].setData(data[2]);
181                    myChart.series[3].setData(data[3]);
182              });
183            
184         }
185 
186 $('#main').customChart('line',0,100,'訂單量');
187 </script>
188 
189 </body>
190 </html>

當我調用外部的json文件的時候在谷歌瀏覽器下會出現問題：

經過多方查找，發現是因為谷歌瀏覽器禁用了本地ajax，需要進行設置，打開快捷方式的屬性設置目標：

這樣才可以啟用。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 highcharts js比較時間字符串相差幾分鍾 php 計算時長（幾天幾小時幾分鍾） java 幾分鍾前，幾小時前 python datetime獲取幾分鍾、小時、天之前的時間幾分鍾搞定redis存儲session共享——設計實現 Nginx 一鍵安裝腳本（幾分鍾搞定）幾分鍾就能學會的Python虛擬環境教程 git pull 時速度很慢，感覺幾分鍾不動 android vector pathData探究,幾分鍾繪制自己的vectordrawable