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 ...
随机推荐
- AOJ.863 分书问题 (DFS)
题意分析 现有n个人,n种书,给出每人对n种书的喜欢列表,求有多少种方案满足以下条件: 1.每个人都分得自己喜欢的书: 2.每个人分得书的种类各不相同,即所有种类的书均得到分配 1.采用生成测试法 生 ...
- HDOJ(HDU).2602 Bone Collector (DP 01背包）
HDOJ(HDU).2602 Bone Collector (DP 01背包) 题意分析 01背包的裸题 #include <iostream> #include <cstdio&g ...
- React router 4 获取路由参数，跨页面参数
1. match通过路径 <Route path="/path/:name" component={example} /> 路由组件内获取参数使用 this.props ...
- React注释
React中注释有以下三种 var content = ( <Nav> {/* 一般注释, 用 {} 包围 */} <Person /* 多 行 注释 */ name={window ...
- 34张史上最全IT架构师技术知识图谱 最新下载
本文是笔者多年来积累和收集的知识技能图谱,小编极力推荐分享给身边的技术人儿,希望这份技术知识图谱能够帮助到每一位奋斗在技术路上的小伙伴. 下面是笔者多年来积累和收集的知识技能图谱,有的是笔者原创总结的 ...
- JavaScript对iframe的DOM操作
在IE6.IE7中,我们可以使用 document.frames[ID].document 来访问iframe子窗口中的document对象,可是这是不符合W3C标准的写法,也是IE下独有的方法,在F ...
- LVM分区
使用LVM对磁盘进行初始化 pvcreate /dev/vdd 创建卷组 vgcreate vg /dev/vdd 备注:vg是卷组的名称,可改变. 查看卷组的详细信息 vgdisplay 下图是我执 ...
- ACE线程管理机制-并发控制(4)
转载于:http://www.cnblogs.com/TianFang/archive/2006/12/04/581857.html ACE Synchronization类 这一类并发控制对象一般也 ...
- mysql中的case when 与if else
大神说:在sql中,能用if else 就不用case when 下面来看看,具体为什么,没有搞清楚,如果有大神知道的提供下资料: Mysql的if既可以作为表达式用,也可在存储过程中作为流程控制 ...
- git版本回退与撤销操作
场景1:当你改乱了工作区某个文件的内容,想直接丢弃工作区的修改时,用命令git checkout -- file. 场景2:当你不但改乱了工作区某个文件的内容,还添加到了暂存区时,想丢弃修改,分两步, ...