highCharts图表应用-实现多种图表的显示

  在数据统计和分析业务中，有时需要在一个图表中将柱状图、饼状图、曲线图的都体现出来，即可以从柱状图中看出具体数据、又能从曲线图中看出变化趋势，还能从饼状图中看出各部分数据比重。highCharts可以轻松实现三图合一的效果。

        还是以刚才降雨量为例，如果没有highCharts基础，请先参考“highCharts如何使用-强大的图表库插件”。和上个例子相比，修改的地方只有js，所以着重点在js代码上面。这个例子主要是实现柱状图、折线图和饼图结合在一起的用法。
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
114
115
116
117
118
$(function() {
new Highcharts.Chart({
chart : {
renderTo : 'gridTable', // 放置图表的DIV容器对应页面的id属性
},
title : {
text : '全国各大城市降雨量综合统计图' // 图表标题
},
subtitle : {
text : '2012年度' // 副标题
},
// x轴
xAxis : {
categories : [ '第一季度', '第二季度', '第三季度', '第四季度', ]
},
// 右下角显示的LOGO
credits : {
text : 'demo', // 设置LOGO区文字
href : 'http://www.javakfz.com' // 设置LOGO链接地址
},
// 是否启用导出功能，默认为true
exporting : {
enabled : true
},
// y轴
yAxis : {
min : 0,
title : {
text : '降雨量 (L)'
}
},
legend : {
layout : 'vertical',
backgroundColor : '#FFFFFF',
align : 'left',
verticalAlign : 'top',
x : 100,
y : 70,
floating : true,
shadow : true
},
// 当鼠标悬置数据点时的格式化提示
tooltip : {
formatter : function() {
var temp;
if (this.point.name) { // 饼状图
temp = '<b>' + this.point.name + '</b>: <br>(' + this.y
+ '%)';
} else {
temp = '' + this.x + ': ' + this.y + 'L';
}
return temp;
}
},
plotOptions : {
column : {
dataLabels : {
enabled : true
},
pointPadding : 0.2,
borderWidth : 0
}
},
// 图表标签
labels : {
items : [ {
html : '年度降雨量分布比例',
style : {
left : '228px',
top : '8px'
}
} ]
},
// 显示的数据,JSON数据格式，最重要的是name和data元素
series : [ {
type : 'column',
name : '成都',
data : [ 1000, 600, 3000, 900 ]
}, {
type : 'column',
name : '深圳',
data : [ 2000, 1200, 5500, 1000 ]
}, {
type : 'column',
name : '上海',
data : [ 1500, 1400, 4000, 1200 ]
}, {
type : 'spline',
name : '平均值',
data : [ 1500, 1066.67, 4166.67, 1033.33 ]
}, {
// 饼图
type : 'pie',
name : '年度降雨量分布',
data : [ {
name : '第一季度',
y : 19.31
}, {
name : '第二季度',
y : 13.73,
}, {
name : '第三季度',
y : 53.65,
}, {
name : '第四季度',
y : 13.31,
} ],
// 饼状图坐标
center : [ 260, 60 ],
// 饼状图直径大小
size : 100,
dataLabels : {
// 不显示饼状图数据标签
enabled : false
}
}]
});
});
现在的效果就不像刚才的那么单调了。三种图标结合在一起分析数据还是比较直观。效果图：
h
        从上面的例子可以看出，要想在一个图表中（柱状图）加入多种图表形式（曲线图、饼状图等），关键在于设置选项：series（数据列）中的type属性，从上述代码中可以看出，设置column、spline、pie类型表示不同的图表，而在设置饼状图（pie）中，需要设置饼状图的坐标以及大小，调整位置，这样可以使得整个图表显得更加美观。

原创文章，转载请注明： 转载自java开发者

本文链接地址: highCharts图表应用-实现多种图表的显示

posted @ 2013-07-24 13:46  鸿娃  阅读(2775)  评论(0)    收藏  举报