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 ...
随机推荐
- Java Web用Freemarker生成带图片的Word文档
步骤一:模板制作 用world2003做一个导出模板,如果有图片则加入一张图片占位,将world另存为xml,将xml中需要导出的内容用Freemarker标签表示,最后另存为.ftl结尾的模板: 步 ...
- 2017-7-18-每日博客-关于Linux下的软链接和硬链接.doc
ln命令 该命令在文件之间创建链接.这种操作实际上是给系统中已有的某个文件指定另外一个可用于访问它的名称.对于这个新的文件名,我们可以为之指定不同的访问权限,以控制对信息的共享和安全性的问题. 如果链 ...
- some interesting words
No one gets rich betting against the market. Never bet against the Fed. Bulls make money, bears make ...
- tinyxml源码解析(中)
转载于:http://www.cnblogs.com/marchtea/archive/2012/11/20/2766756.html 前言: 之前趁着这段时间比较空闲,也因为听闻tinyxml大名, ...
- Codeforces Round #169 (Div. 2) A水 B C区间更新 D 思路
A. Lunch Rush time limit per test 2 seconds memory limit per test 256 megabytes input standard input ...
- [nginx]nginx rewrite规则之last和break
c俺靠这篇博文 http://eyesmore.iteye.com/blog/1142162 有用的配置: 1.开启rewrite_log,这样在/var/log/nginx/error.log中显示 ...
- saltstack:multi-master configuration
官方手册地址:http://docs.saltstack.com/topics/tutorials/multimaster.html 总结起来,有以下几步: Create a redundant ma ...
- OpecnCV训练分类器详细整理
本文主要是对下面网址博客中内容的实例操作: http://blog.csdn.net/byxdaz/article/details/4907211 在上述博客中,详细的讲述了OpenCV训练分类器的做 ...
- HDU1698 线段树（区间更新区间查询）
Just a Hook Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total S ...
- Qt ---------- connect连接类型
Qt::AutoConnection 0 (Default) If the receiver lives in the thread that emits the signal, Qt::Direct ...