代码改变世界

相识Highcharts，几分钟玩转Highcharts

2014-08-22 17:53  大额_skylar  阅读(1998)  评论(11)  编辑  收藏  举报

   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，需要进行设置，打开快捷方式的属性设置目标：

 

这样才可以启用。