highcharts 折线，饼状，条状综合图
完整代码如下：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>综合图</title> <script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/highcharts.js"></script>
<script type="text/javascript" src="js/exporting.js"></script>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
chart: {
},
title: {
text: '折线，饼状，条状综合图'
},
//x轴
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums']
},
tooltip: {
formatter: function () {
var s;
if (this.point.name) { // the pie chart
s = '' +
this.point.name + ': ' + this.y + ' fruits';
} else {
s = '' +
this.x + ': ' + this.y;
}
return s;
}
},
labels: {
items: [{
html: 'Total fruit consumption',
style: {
left: '40px',
top: '8px',
color: 'black'
}
}]
},
series: [{
type: 'column',
name: 'Jane',
data: [, , , , ]
}, {
type: 'column',
name: 'John',
data: [, , , , ]
}, {
type: 'column',
name: 'Joe',
data: [, , , , ]
}, {
type: 'spline',
name: 'Average',
data: [, 2.67, , 6.33, 3.33],
marker: {
lineWidth: ,
lineColor: Highcharts.getOptions().colors[],
fillColor: 'white'
}
}, {
type: 'pie',
name: 'Total consumption',
data: [{
name: 'Jane',
y: ,
color: Highcharts.getOptions().colors[] // Jane's color
}, {
name: 'John',
y: ,
color: Highcharts.getOptions().colors[] // John's color
}, {
name: 'Joe',
y: ,
color: Highcharts.getOptions().colors[] // Joe's color
}],
center: [, ],
size: ,
showInLegend: false,
dataLabels: {
enabled: false
}
}]
});
});
</script> </head>
<body>
<div id="container" style="width:850px;height:500px;margin:0 auto"></div>
</body>
</html>
显示出来的效果
现在一个折线，饼状，条状综合图就好了。
highcharts 折线，饼状，条状综合图的更多相关文章
- HighCharts之2D堆条状图
HighCharts之2D堆条状图 1.HighCharts之2D堆条状图源码 StackedBar.html: <!DOCTYPE html> <html> <head ...
- python中matplotlib绘图封装类之折线图、条状图、圆饼图
DrawHelper.py封装类源码: import matplotlib import matplotlib.pyplot as plt import numpy as np class DrawH ...
- HighCharts之2D条状图
HighCharts之2D条状图 1.HighCharts之2D条状图源码 bar.html: <!DOCTYPE html> <html> <head> < ...
- Android图表库MPAndroidChart(八)——饼状图的扩展：折线饼状图
Android图表库MPAndroidChart(八)--饼状图的扩展:折线饼状图 我们接着上文,饼状图的扩展,增加折现的说明,来看下我们要实现的效果 因为之前对MPAndroidChart的熟悉,所 ...
- Excel 2010高级应用-条状图（五）
Excel 2010高级应用-条状图(五) 基本操作如下: 1.新建一个Excel空白文档,并命名条状图 2.单击"插入",找到条状图的样图 3.选择其中一种类型的条状图样图,在空 ...
- Flex实现双轴条状图
1.问题背景 一般的,柱状图可以实现双轴图,但是如何实现双轴条状图? 2.实现实例 <?xml version="1.0" encoding="utf-8" ...
- 关于线段树or 树状树状 在二维平面搞事情！Orz
第一式:https://ac.nowcoder.com/acm/contest/143/I 题意: 有 n 个点,一个点集 S 是好的,当且仅当对于他的每个子集 T,存在一个右边无限长的矩形,使得这个 ...
- jquery和highcharts折线图、柱形图、饼状图-模拟后台传參源代码
js代码: <script type="text/javascript"> $(function(){ showLine(); showColumn(); showPi ...
- BZOJ3688 折线统计【树状数组优化DP】
Description 二维平面上有n个点(xi, yi),现在这些点中取若干点构成一个集合S,对它们按照x坐标排序,顺次连接,将会构成一些连续上升.下降的折线,设其数量为f(S).如下图中,1-&g ...
随机推荐
- 8VC Venture Cup 2016 - Final Round (Div. 2 Edition) A
A. Orchestra time limit per test 2 seconds memory limit per test 256 megabytes input standard input ...
- HDU2121：Ice_cream’s world II (虚根+有向图最小生成树)
Ice_cream’s world II Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Oth ...
- lightoj 1214
lightoj 1214 Large Division (大数除法) 链接:http://www.lightoj.com/volume_showproblem.php?problem=1214 题意 ...
- Qt ------ 初始化构造函数参数，parent
MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent), ui(new Ui::MainWindow) { ui->setup ...
- Reduce Side Join实现
关于reduce边join,其最重要的是使用MultipleInputs.addInputPath这个api对不同的表使用不同的Map,然后在每个Map里做一下该表的标识,最后到了Reduce端再根据 ...
- MySQL5.5安装图解
MySQL5.5安装图解... ====================== 第一部分:去官网下载MySQL安装包... MySQL下载官网:https://dev.mysql.com/downloa ...
- Java设计模式の观察者模式（推拉模型）
目录: 一.观察者定义 二.观察者模式的结构(推模式实现) 三.推模型和拉模型(拉模式实现) 四.JAVA提供的对观察者模式的支持 五.使用JAVA对观察者模式的支持(自带推模式实现实例) 一.观察者 ...
- android之解析json数据格式详解
1.JSON解析 (1).解析Object之一: view sourceprint? 1 {"url":"http://www.cnblogs.com/qianx ...
- HDU 5961 传递 BFS
题意:中文题,就是判断一个竞赛图拆成两个图,判断是否都传递 思路:分别BFS判深度即可,用这种方法注意要进行读入优化. /** @Date : 2016-11-18-20.00 * @Author : ...
- LightOJ 1218 概率水题（几何分布）
题意:给你一个n面骰子,问你投出所有面需要的次数的期望值是多少. 题解:放在过去估计秒解,结果现在自己想好久,还查了下,有人用极限证明...实际上仔细想想这种情况投出与前面不一样的概率p的倒数就是次数 ...