前端图表系列之一 --Highchart

来源：互联网发布：淘宝卖家版下载官方编辑：程序博客网时间：2024/05/01 11:39

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

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

?
1
2
　<span style="text-decoration: line-through;">$(selector).method();
</span>

而是采用new关键字

?
1
varchart= newclass(options);

先看一个基本的示例

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
varchart;
            $(document).ready(function() {
                chart = newHighcharts.Chart({
                    chart: {
                        renderTo:'container',
                        defaultSeriesType:'line',
                        marginRight: 130,
                        marginBottom: 25
                    },
                    title: {
                        text:'Monthly Average Temperature',
                        x: -20 //center
                    },
                    subtitle: {
                        text:'Source: WorldClimate.com',
                        x: -20
                    },
                    xAxis: {
                        categories: ['Jan','Feb','Mar','Apr','May','Jun',
                            'Jul','Aug','Sep','Oct','Nov','Dec']
                    },
                    yAxis: {
                        title: {
                            text:'Temperature (°C)'
                        },
                        plotLines: [{
                            value: 0,
                            width: 1,
                            color:'#808080'
                        }]
                    },
                    tooltip: {
                        formatter:function() {
                                return'<b>'+this.series.name +'</b><br/>'+
                                this.x +': '+this.y +'°C';
                        }
                    },
                    legend: {
                        layout:'vertical',
                        align:'right',
                        verticalAlign:'top',
                        x: -10,
                        y: 100,
                        borderWidth: 0
                    },
                    series: [{
                        name:'Tokyo',
                        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]
                    }, {
                        name:'New York',
                        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]
                    }, {
                        name:'Berlin',
                        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]
                    }, {
                        name:'London',
                        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]
                    }]
                });
                 
                 
            });

整个配置的关键部分在于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
2
3
4
5
6
varoptions={
     chart:{},
     xAxis:{},
     yAxis:{},
     series:[]
}

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

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

?
1
varo=$.exend({},options,{chart:{},xAxis:{}})

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
varoptions={
            chart:{
                x:1,
                y:2
            },
            data:{
                m:1,
                n:2
            }
        }
varo=$.extend(
          {},options,
         {chart:{
        x:2},ss:{
            u:2,
            f:2
        }})
varo2=$.extend({},options,{data:{}})
//console.log(o);
 
varchart=newHighcharts.Chart(o);
varchart2=newHighcharts.Chart(o2);

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

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

使用的方法

配置chart:{

events:{

load:requestData

}

} ,

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

方法:

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

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

3:定义主题

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

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

应用主题

?
1
Highcharts.setOptions(theme);

4：饼形图的计算

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