Bruce Chen's Blog

quick notes

0%

Highcharts工作笔记

发表于 分类于

一、单个数据源时

image

image

如上图，配置如下：

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
76
77
78
79
80
81
82
83
84
85
//绘制图表
function drawLineChart(data) {
        var xAxisArr = [],
             yAxisArr = [];

        $.each(data,function(key,value){
            xAxisArr.push(key);
            yAxisArr.push(value);
        });

        //计算x轴的步长 （当数据较多时，x轴会显示不下，所以需要间隔显示）
        var xLen = xAxisArr.length,
            maxLabelNum = 20, //x轴上最多显示的label个数，过多就会挤在一起
            step = Math.round(xLen / maxLabelNum) < 1 ? 1 : Math.round(xLen / maxLabelNum);

        chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'J_Diagram',  //图表将要被渲染到哪个dom节点中
                    type: 'line',  //线性显示
                    marginRight: 100,  //图表距离右侧的距离,即上图中 "该月的流量"的显示宽度
                    marginBottom: 50 //图表距离下方的距离,即上图中 x轴 label的显示高度, 刚开始label一直显示不全,有一半被隐藏了, 后来发现将这个值变大就可以了
                },
                title: {
                    text: '' //图表的标题, 此为图1的设置,设为空串则不显示title, 如果不配置此项,此会显示默认的title,如图2所示
                },
                xAxis: {
                    categories: xAxisArr, //x轴显示的label,如果不设置此项,则会显示默认的数字,即1,2,...n
                    tickInterval: step,  //x轴上显示点的间隔,默认和y轴上的点的个数相同, 但这样会造成x轴过于密集
                       labels: {
                           style: {
                               width: 'auto',
                               height: 'auto'
                           },
                           rotation: -30, //x轴label逆时针旋转30度
                          align: 'right' //,
                         // step: step //x轴上label标签的间隔,即隔多少个点显示一个label,注意如果只设置此项则x轴上的点不会变,还是会每个都显示
                                             //,当设置了tickInterval时此值可以不设, 会和tickInterval相同
                       }
                },
                yAxis: {
                    title: {
                        text: '单位：GB'
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                },
                credits: {//图表右下角的水印，默认是highcharts.com,将其设为空串可以取消水印
                        text: '',
                        fontSize: '0'
                },
                tooltip: { //当鼠标移动图表上的某个点上时,显示的提示信息
                    formatter: function() {
                            return '<b>'+ this.series.name +'</b><br/>'+ this.x +': '+ this.y +'GB';
                    }
                },
                legend: { //图上 '该月的流量' 那部分的位置配置
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'top',
                    x: 10,
                    y: 100,
                    borderWidth: 0
                },
                series: [{
                    name: '该'+ (queryParams.showBy == 'month' ? '月' : '日') +'的流量',  //图上 '该月的流量' 那部分的文字配置
                    data: yAxisArr
                }],
                plotOptions: {
                    series:{
                        marker: { //数据线上的点，默认不显示，当鼠标hover时才显示, 注意图1和图2中是enable设为true时的效果
                            symbol: 'triangle-down', //点的样式, 可选的值有"circle", "square", "diamond", "triangle"和"triangle-down",默认是circle
                            enabled: false,
                            states: {
                                hover: {
                                    enabled: true
                                }
                            }
                        }
                    }
                }
            });
    }

二、多个数据源时

image

如上图,有多个数据需要显示时,配置如下,不再一一讲解,请对应单一数据源的讲解和官网 API 自己理解:

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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
function drawLineChart(title, data){
    var    colors = ['#4572A7','#AA4643', '#89A54E', '#80699B', '#3D96AE', '#DB843D', '#92A8CD', '#A47D7C', '#B5CA92' ],
        xAxis = [],
        yAxis = [{
            title: {
                text: 'PV',
            },
            labels: {
                formatter: function(){
                    return this.value;
                },
            }
        }, {
            title: {
                text: 'UV'
            },
            labels: {
                formatter: function(){
                    return this.value;
                }
            },
            opposite: true
        }],
        ableskyPvData = [],
        ableskyUvData = [],
        wwwPvData = [],
        wwwUvData = [],
        orgPvData = [],
        orgUvDate = [];
    for(var i=0, l=data.length ; i<l; i++){
        var d = new Date();
        d.setTime(data[i].statsDate.time);
        xAxis.push(d.getFullYear() + '-' + (d.getMonth()+1) + '-' + d.getDate());
        ableskyPvData.push(data[i].totalPv);
        ableskyUvData.push(data[i].totalUv);
        wwwPvData.push(data[i].asDomainPv);
        wwwUvData.push(data[i].asDomainUv);
        orgPvData.push(data[i].orgDomainPv);
        orgUvDate.push(data[i].orgDomainUv);
    }
    var series = [{
        name: '总PV',
        data: ableskyPvData,
        yAxis: 0
    }, {
        name: '总UV',
        data: ableskyUvData,
        yAxis: 1
    }, {
        name: 'AS域名PV',
        data: wwwPvData,
        yAxis: 0
    }, {
        name: 'AS域名UV',
        data: wwwUvData,
        yAxis: 1
    }, {
        name: '机构域名PV',
        data: orgPvData,
        yAxis: 0
    }, {
        name: '机构域名UV',
        data: orgUvDate,
        yAxis: 1
    } ];
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'chartContainer',
            type: 'line',
            zoomType: 'x'
        },
        title: {
            text: title,
               style: {
                font: 'bold 16px Verdana, sans-serif'
            }
        },
        credits: {
                text: 'www.ablesky.com',
                href: 'http://www.ablesky.com',
                fontSize: '16px'
        },
        colors: colors,
        xAxis: {
            categories: xAxis,
            labels: {
                rotation: -30,
                step: xAxis.length > 35? Math.round(xAxis.length / 20) : 1,
                align: 'right'
            }
        },
        yAxis: yAxis,
        tooltip: {
            formatter: function() {
                    return '<b>'+ this.series.name +'</b><br/>'+
                    this.x +': '+ this.y;
            }
        },
        plotOptions: {
            series:{
                marker: {
                    enabled: false,
                    states: {
                        hover: {
                            enabled: true
                        }
                    }
                }
            }
        },
        series: series
    });
}

附 1: 图 1 图 2 数据格式:

image

附 2: 图 3 数据格式

image

附 3: