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 ...
随机推荐
- css命名冲突解决方法
css的命名冲突目前有几种解决方法: 1.命名约定 人为的制定一下命名规则以避免冲突,例如前缀,嵌套等 2.CSS in JS 在JavaScript中写CSS,使用工具编译为css,最常见的是sty ...
- linux下，手动切换jdk
1.首先将自定义的jdk目录安装到alternatives中 seven@ThinkPad:~/srcAndroid/src4..4_r1$ sudo update-alternatives --in ...
- 论C++11 中vector的N种遍历方法
随着C++11标准的出现,C++标准添加了许多有用的特性,C++代码的写法也有比较多的变化. vector是经常要使用到的std组件,对于vector的遍历,本文罗列了若干种写法. (注:本文中代码为 ...
- wamp环境介绍
一.简介 Wamp就是 Windows Apache Mysql PHP集成安装环境,即在window下的apache.php和mysql的服务器软件. 二.常用的集成环境 XAMPP - XAMPP ...
- hdu 4408 Minimum Spanning Tree
Problem Description XXX is very interested in algorithm. After learning the Prim algorithm and Krusk ...
- svn: Checksum mismatch while updating 错误
最近使用svn客户端更新代码的时候出现 Checksum mismatch while updating 的错误 解决办法 在出错文件的目录下,用update to reversion , 先选onl ...
- 超酷算法-BK树
前几天无意间遇到一个博客,觉得写得挺好的,自己之前的时候有个不好的习惯,那就是遇到了好资源第一反应就是收藏起来然后却很少再看!!这是坏习惯,要改!于是今天就开始通读了,读的第二篇是BK树.觉得有点意思 ...
- 重复代码Duplicated Code---要重构的信号
什么时候需要重构,当你在项目代码里面嗅到这个味道的时候,就要进行重构. 首个介绍的味道是重复代码的味道. 它表现出来的特征是这些: 1.一个类里面,两个函数中,含有相同的代码,类似的代码: ...
- 【NOIP】提高组2015 神奇的幻方
[算法]模拟 #include<cstdio> ; int n,a[maxn][maxn]; int main() { scanf("%d",&n); ,y=n ...
- POJ 2991 Crane （线段树）
题目链接 Description ACM has bought a new crane (crane -- jeřáb) . The crane consists of n segments of v ...