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 ...
随机推荐
- 1 Easy Read/Write Splitting with PHP’s MySQLnd
以下均是使用翻译软件翻译的! Note: This is part one in our Extending MySQL with PHP's MySQLnd Series, read part 2 ...
- react事件机制
1. react的事件是合成事件((Synethic event),不是原生事件 <button onClick={this.handleClick}></button> &l ...
- bzoj 3673&3674 可持久化并查集&加强版（可持久化线段树+启发式合并）
CCZ在2015年8月25日也就是初三暑假要结束的时候就已经能切这种题了%%% 学习了另一种启发式合并的方法,按秩合并,也就是按树的深度合并,实际上是和按树的大小一个道理,但是感觉(至少在这题上)更好 ...
- BZOJ1912 APIO2010 洛谷P3629 巡逻
Description: 在一个地区中有 n 个村庄,编号为 1, 2, ..., n.有 n – 1 条道路连接着这些村 庄,每条道路刚好连接两个村庄,从任何一个村庄,都可以通过这些道路到达其 他任 ...
- Javascript计算世界完全对称日
今天是 2011-11-02 日,微博啊.G+啊什么的都传是世界完全对称日,还说是多少年一遇的.下面写个 JavaScript 小程序,看看是否真的N年一遇.计算范围在公元2000年到3000年. 名 ...
- JavaScript定义类的方式与其它OO语言有些差异
JavaScript面向对象的程序编写与其它OO语言有一些出入,所以使用JavaScript的面向对象特性的时候,需要注意一些规范性的问题.下面就简单地谈一下,JavaScript如何定义一个类,在定 ...
- Tomcat启动时报org.springframework.web.context.ContextLoaderListener错误解决方案
问题现象:新从svn上检出maven的项目maven+spring+springmvc项目在Tomcat启动时,报如下错误. 严重: Error configuring application lis ...
- Codeforces Round #342 (Div. 2) C
C. K-special Tables time limit per test 2 seconds memory limit per test 256 megabytes input standard ...
- [nginx]nginx rewrite规则之last和break
c俺靠这篇博文 http://eyesmore.iteye.com/blog/1142162 有用的配置: 1.开启rewrite_log,这样在/var/log/nginx/error.log中显示 ...
- 51Nod 1003 阶乘后面0的数量 | 思维
题意:n的阶乘后面0的个数,如果直接算出阶乘再数0的数量一定会超时的. 因为10=2*5,所以求出5贡献的次数就行. #include "bits/stdc++.h" using ...