在数据统计和分析业务中,有时需要在一个图表中将柱状图、饼状图、曲线图的都体现出来,即可以从柱状图中看出具体数据、又能从曲线图中看出变化趋势,还能从饼状图中看出各部分数据比重。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
}
}]
});
});
现在的效果就不像刚才的那么单调了。三种图标结合在一起分析数据还是比较直观。效果图:
        从上面的例子可以看出,要想在一个图表中(柱状图)加入多种图表形式(曲线图、饼状图等),关键在于设置选项:series(数据列)中的type属性,从上述代码中可以看出,设置column、spline、pie类型表示不同的图表,而在设置饼状图(pie)中,需要设置饼状图的坐标以及大小,调整位置,这样可以使得整个图表显得更加美观。

原创文章,转载请注明: 转载自java开发者

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

highCharts图表应用-实现多种图表的显示的更多相关文章

  1. highcharts动态获取数据生成图表问题

    动态获取数据说白点就是从后台传值到前台,前台把这些值赋值给x轴与y轴(这里指的是你X轴与Y轴都是变化的数据,如果你的X轴是固定的,像时间等等的那就另说).  柱状图的动态传值: //获取后台数据 va ...

  2. 网页图表Highcharts实践教程之外层图表区

    网页图表Highcharts实践教程之外层图表区 Highcharts图表区 图表区是图表的基本区域.所有的数据和图形都是绘制在图表区中.从图形绘制范围来分,图表区域分为外层图表区和绘图区.本章将详细 ...

  3. EXCEL 图表 只在拐点的时候显示数字

    EXCEL图表只在折线的拐点显示数值,中间不需要显示.同时往下拐的,显示在上方,往上的显示在下方,这样数值不会挡住线. 首先,做一些模拟数据 因为起点和终点数值必须显示,所以单元格,C2 D2 C19 ...

  4. Highcharts.js -纯javasctipt图表库初体验

    一.highcharts简介以及引入 highcharts作为免费提供给个人学习.个人网站和非商业用途使用的前端图表演示插件的确使用起来十分方便和轻便.在我最近完成一个需求的时候用到了它, 它的兼容性 ...

  5. Highcharts 基本曲线图;Highcharts 带有数据标签曲线图表;Highcharts 异步加载数据曲线图表

    Highcharts 基本曲线图 实例 文件名:highcharts_line_basic.htm <html> <head> <meta charset="U ...

  6. Highcharts使用表格数据绘制图表

    Highcharts使用表格数据绘制图表 在Highcharts中,同意用户使用网页中现有的表格数据作为数据来源,然后依据该数据来源绘制图表.对于一个典型的HTML表格.当中,第一列的数据会作为x轴刻 ...

  7. [Swift通天遁地]三、手势与图表-(12)创建复合图表:包含线性图表和柱形图表

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  8. highcharts图表的图例legend怎么改变显示位置

    一.将图例Legend放于图表右侧1.设置chart的marginRight属性值:chart: { marginRight: 120}2.设置legend图例属性值如下 legend: { alig ...

  9. Highcharts AJAX JSON JQuery 实现动态数据交互显示图表 柱形图

    http://my.oschina.net/xshuai/blog/345117?fromerr=hEXYMdR0 http://www.oschina.net/code/snippet_144464 ...

随机推荐

  1. HDU 4006 The kth great number(multiset(或者)优先队列)

    题目 询问第K大的数 //这是我最初的想法,用multiset,AC了——好吧,也许是数据弱也有可能 //multiset运用——不去重,边插入边排序 //iterator的运用,插入的时候,如果是相 ...

  2. iOS文件操作

      ];                   NSString *plistPath = [filePath stringByAppendingPathComponent:@"collect ...

  3. Android Service学习

    Android 中的 Service 全面总结 引用别人的博客:http://www.cnblogs.com/newcj/archive/2011/05/30/2061370.html 好文章 1.S ...

  4. CF 197 DIV2 Xenia and Bit Operations 线段树

    线段树!!1A 代码如下: #include<iostream> #include<cstdio> #define lson i<<1 #define rson i ...

  5. poj 3328(多起点多终点的最短路)

    题目链接:http://poj.org/problem?id=3328 思路:这道题花了我将近3个小时,结果发现是方向搞错了,orz,过了样例之后提交wa,然后换成优先队列就过了.其实题目意思很简单, ...

  6. MongoDB的安装,配置与开机自启动

    关于简介不多说百度去吧少年.. MongoDB详细安装: 1.进入官网,点击DOWNLOAD MONGODB,下载所需要的版本.. 我这里把下载的文件放在d\MongoDB文件夹下,点击下载的官方镜像 ...

  7. 李洪强iOS开发之断点续传1

    未完待续.. // //  ViewController.m //  A18 - duo wen jian shang chuan // //  Created by 李洪强 on 16/6/29. ...

  8. hdu 1848 Fibonacci again and again (初写SG函数,详解)

    思路: SG函数的应用,可取的值为不连续的固定值,可用GetSG求出SG,然后三堆数异或. SG函数相关注释见代码: 相关详细说明请结合前一篇博客: #include<stdio.h> # ...

  9. hdu 4223

    暴力: Problem : ( Dynamic Programming? ) Judge Status : Accepted RunId : Language : C++ Author : yudun ...

  10. ubuntu sh脚本双击运行

    自从13.04以后,双击sh脚本文件就已经默认是geidt打开了,要想运行,从nautilus-->文件-->首选项-->行为-->可执行文件 有三个选项,默认是第二个,如果想 ...