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

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

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

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

`1`	`<SPAN style="TEXT-DECORATION: line-through">$(selector).method();`

2 </SPAN>

而是采用new关键字

`1`	`var` `chart=` `new` `class(options);`

先看一个基本的示例

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
                             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：

`1`	`[{},{},{}]`

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

配置选项

chart：

renderTo//放置图表的容器

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

xAxis,yAxis:

tickInterval: 15//自定义刻度

常见的使用环境

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

1
var options={ 

2
     chart:{}, 

3
     xAxis:{}, 

4
     yAxis:{}, 

5
     series:[] 

6
}

因为大部分的配置属性都是重复的，我们没有必要每次都声明。所以首先声明一个通用的options，然后采用$.extend函数

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

`1`	`var` `o=$.exend({},options,{chart:{},xAxis:{}})`

这样o是options与第三个对象合并后的对象

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);

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选项的颜色配置，按显示顺序配置即可！主题显示效果

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
};

应用主题

`1`	`Highcharts.setOptions(theme);`

4：饼形图的计算

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

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