(jQuery,Highcharts)前端图表系列之一 --Highcharts (转)

 转自：http://www.cnblogs.com/gxll1314/archive/2010/10/11/1847770.html

做为系统开发应用不可缺少的部分，图表可以使系统分析看起来更直观，也可以使系统可以锦上添花，毕竟做统计比较繁琐~使用java的程序员，通常使用jfreechart这个工具去作图，唯一的缺憾是图是静态的jpg，缺乏灵性~其实前台有很多这样的图形控件可以使用。这是个一系列的随笔将介绍几乎所有的前台图形报表的使用。本篇是开篇;

   HighCharts是jQuery的一个插件，当前它并不像其他的jQuery插件那样可以像这样调用

 

view sourceprint?
1 　<SPAN style="TEXT-DECORATION: line-through">$(selector).method();
2 </SPAN>

 

 

   而是采用new关键字

 

view sourceprint?
1 var chart= new class(options);

   先看一个基本的示例

 

view sourceprint?
01 var chart;
02             $(document).ready(function() {
03                 chart = new Highcharts.Chart({
04                     chart: {
05                         renderTo: 'container',
06                         defaultSeriesType: 'line',
07                         marginRight: 130,
08                         marginBottom: 25
09                     },
10                     title: {
11                         text: 'Monthly Average Temperature',
12                         x: -20 //center
13                     },
14                     subtitle: {
15                         text: 'Source: WorldClimate.com',
16                         x: -20
17                     },
18                     xAxis: {
19                         categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
20                             'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
21                     },
22                     yAxis: {
23                         title: {
24                             text: 'Temperature (°C)'
25                         },
26                         plotLines: [{
27                             value: 0,
28                             width: 1,
29                             color: '#808080'
30                         }]
31                     },
32                     tooltip: {
33                         formatter: function() {
34                                 return '<b>'+ this.series.name +'</b><br/>'+
35                                 this.x +': '+ this.y +'°C';
36                         }
37                     },
38                     legend: {
39                         layout: 'vertical',
40                         align: 'right',
41                         verticalAlign: 'top',
42                         x: -10,
43                         y: 100,
44                         borderWidth: 0
45                     },
46                     series: [{
47                         name: 'Tokyo',
48                         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]
49                     }, {
50                         name: 'New York',
51                         data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
52                     }, {
53                         name: 'Berlin',
54                         data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
55                     }, {
56                         name: 'London',
57                         data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
58                     }]
59                 });
60                   
61                   
62             });

整个配置的关键部分在于series,chart,xAxis,yAxis;

series接受的数据格式为json Array：

view sourceprint?
1 [{},{},{}]
注意：最后一个数据后面一定不能有逗号，否则在IE系列下会报错，这个在几乎所有的jQuery插件的配置中也会出现的问题，当IE报错的时候，一定要检查是否多写了一个逗号

 

配置选项

chart：

renderTo//放置图表的容器

defaultSeriesType//图表类型line, spline, area, areaspline, column, bar, pie , scatter

xAxis,yAxis:

tickInterval: 15//自定义刻度

更多

常见的使用环境

1：我想显示多个图形报表。这些数据不是循环生成的！因为如果循环生成的话直接$.each就可以了！

view sourceprint?
1 var options={
2      chart:{},
3      xAxis:{},
4      yAxis:{},
5      series:[]
6 }
因为大部分的配置属性都是重复的，我们没有必要每次都声明。所以首先声明一个通用的options，然后采用$.extend函数

 

注意，我们不希望更改原有的options对象，所以

view sourceprint?
1 var o=$.exend({},options,{chart:{},xAxis:{}})
这样o是options与第三个对象合并后的对象

 

view sourceprint?
01 var options={
02             chart:{
03                 x:1,
04                 y:2
05             },
06             data:{
07                 m:1,
08                 n:2
09             }
10         }
11 var o=$.extend(
12           {},options,
13          {chart:{
14         x:2},ss:{
15             u:2,
16             f:2
17         }})
18 var o2=$.extend({},options,{data:{}})
19 //console.log(o);
20   
21 var chart=new Highcharts.Chart(o);
22 var chart2=new Highcharts.Chart(o2);

 

2: 从服务器获取数据动态生成运行曲线

曲线是从服务器获取的点连接而成。我们将点输出到报表上，连接就可以组成动态曲线。

使用的方法

配置chart:{

events:{

   load:requestData

  }

} ,

series: [{ name: '服务器数据', data: [] }]

方法:

chart.series[0].addPoint([x,y], true, shift);

 

view sourceprint?
01 var x=-10;
02 $(document).ready(function(){
03     chart = new Highcharts.Chart({
04         chart: {
05             renderTo: 'container',
06             defaultSeriesType: 'spline',
07             events: {
08                 load: requestData
09             }
10         },
11         tooltip:{
12             formatter: function() {
13                return ''+ this.series.name +'<br/>'+
14                 '时间 : '+ this.x +'<br/>'+
15                 '价格: '+ this.y;
16              }
17         },
18         title: {
19             text: '运行曲线'
20         },
21         xAxis: {
22             //type: 'linear',
23             //tickPixelInterval: 10,
24             maxZoom: 60*3,
25             min:0,
26             minPadding:0.2
27         },
28         yAxis: {
29             minPadding: 0.2,
30             maxPadding: 0.2,
31             title: {
32                 text: 'Value',
33                 margin: 80
34             }
35         },
36         series: [{
37             name: '服务器数据',
38             data: []
39         }//,{
40             //name:"fuww",
41             //data:[]
42         //}
43         ]
44     });
45 function requestData() {
46     $.ajax({
47         url: 'orderAuction.action',
48         success: function(point) {
49             var series = chart.series[0],
50             shift = series.data.length > 20;
51             var s=eval('('+point+')');
52             var y=s.initial.price;
53             var z=s.initial.change;
54             chart.series[0].addPoint([x,y], true, shift);
55             // call it again after one second
56            timett = setTimeout('requestData()', 1000);
57            //timett = setInterval(requestData,1000);
58         },
59         cache: false
60     });
61     x=x+10;
62 }
3:定义主题

 

最重要的是colors选项的颜色配置，按显示顺序配置即可！主题显示效果

 

view sourceprint?
01 var theme = {
02     colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
03     title: {
04         style: {
05             color: '#000',
06             font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'
07         }
08     },
09     subtitle: {
10         style: {
11             color: '#666666',
12             font: 'bold 12px "Trebuchet MS", Verdana, sans-serif'
13         }
14     },
15     xAxis: {
16         gridLineWidth: 1,
17         lineColor: '#000',
18         tickColor: '#000',
19         labels: {
20             style: {
21                 color: '#000',
22                 font: '11px Trebuchet MS, Verdana, sans-serif'
23             }
24         },
25         title: {
26             style: {
27                 color: '#333',
28                 fontWeight: 'bold',
29                 fontSize: '12px',
30                 fontFamily: 'Trebuchet MS, Verdana, sans-serif'
31               
32             }
33         }
34     },
35     yAxis: {
36         alternateGridColor: null,
37         minorTickInterval: 'auto',
38         lineColor: '#000',
39         lineWidth: 1,
40         tickWidth: 1,
41         tickColor: '#000',
42         labels: {
43             style: {
44                 color: '#000',
45                 font: '11px Trebuchet MS, Verdana, sans-serif'
46             }
47         },
48         title: {
49             style: {
50                 color: '#333',
51                 fontWeight: 'bold',
52                 fontSize: '12px',
53                 fontFamily: 'Trebuchet MS, Verdana, sans-serif'
54             }
55         }
56     },
57     legend: {
58         itemStyle: {
59             font: '9pt Trebuchet MS, Verdana, sans-serif',
60             color: 'black'
61           
62         },
63         itemHoverStyle: {
64             color: '#039'
65         },
66         itemHiddenStyle: {
67             color: 'gray'
68         }
69     },
70     labels: {
71         style: {
72             color: '#99b'
73         }
74     }
75 };
应用主题

 

view sourceprint?
1 Highcharts.setOptions(theme);
4：饼形图的计算

 

饼形图是按照百分比去生成的，不论是后台计算还是前台计算，我们需要将其百分比的总和为100%,所以为了不那么错误的计算，应该使用四舍五入的形式，最后一个数据=100-前面总和。

5: 基本的图形报表参见官方示例

posted @ 2011-04-17 21:49  catch22  阅读(1015)  评论(0)    收藏  举报