在数据统计和分析业务中，有时需要在一个图表中将柱状图、饼状图、曲线图的都体现出来，即可以从柱状图中看出具体数据、又能从曲线图中看出变化趋势，还能从饼状图中看出各部分数据比重。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 : [ '第一季度', '第二季度', '第三季度', '第四季度', ]},// 右下角显示的LOGOcredits : {text : 'demo', // 设置LOGO区文字},// 是否启用导出功能，默认为trueexporting : {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}}]});}); |
现在的效果就不像刚才的那么单调了。三种图标结合在一起分析数据还是比较直观。效果图：
从上面的例子可以看出，要想在一个图表中（柱状图）加入多种图表形式（曲线图、饼状图等），关键在于设置选项：series（数据列）中的type属性，从上述代码中可以看出，设置column、spline、pie类型表示不同的图表，而在设置饼状图（pie）中，需要设置饼状图的坐标以及大小，调整位置，这样可以使得整个图表显得更加美观。
原创文章，转载请注明： 转载自java开发者
本文链接地址: highCharts图表应用-实现多种图表的显示