一个highcharts混合图Demo
公司要我做一个highcharts的mockup，其实半个小时就能做完了，我做了将近两个小时，唉！不过还好，总算把东西学会了。勤能补拙！
把代码贴上来
布局很简单，一个div里套两个div，给好id，就可以开始写js了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"></meta>
<title></title>
<link rel="stylesheet" src="./css/common.css" />
</head>
<body>
<div style="width:100%;">
<div id="bySector" style="width:49%;height:400px;display:inline-block;"></div>
<div id="byBU" style="width:49%;height:400px;display:inline-block;"></div>
</div> <script src="./js/jquery-1.8.3.min.js"></script>
<script src="./js/highcharts/highcharts.js"></script>
<script src="./js/highcharts/exporting.js"></script>
<script src="./js/common.js"></script>
</body>
</html>
JS
写JS花了不少时间，甚至会犯很多很微小的错误，比如中文的逗号，分号结尾种种（捂脸）
而且这个mockup是要有两个Y轴的，有一个Y轴要有百分号，并且数字部分得是浮点数，要用jQuery的parseFloat()转换一下，再用format属性加上%后return出来。
然后还要在series里写上yAxis的序号，要不然数据对应不上，
最后要在series里写上type，type在很多地方都可以改变，在plotOptions里也可以改type。
$(function () {
/* Highcharts.setOptions({
colors:['#058DC7','#50B432','#ED561B','#DDDF00','#24CBE5','#64E572','#FF9655', '#FFF263', '#6AF9C4']
}); */
var bySector = new Highcharts.Chart({
chart: {
renderTo: 'bySector',
type: 'column'
},
title: {
text: 'By Sector 必须使用数量和使用率'
},
xAxis: {
categories: ['Comsumer总体', 'OTC总体', 'XJP总体']
},
yAxis: [
{
tickInterval: 500,
min: 0,
max: 3500,
title: {
text: '必须使用量'
}
},
{
tickInterval: 10.00,
min: parseFloat(0).toFixed(2),
max: parseFloat(100).toFixed(2),
title: {
text: '使用率'
},
format: '{value}%',
opposite : true,
labels : {
formatter : function() {
return parseFloat(this.value).toFixed(2) + '%';
}
}
},
],
credits:{
enable: false,
text: ""
},
legend:{
enable: true,
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100
},
plotOptions:{
spline:{
allowPointSelect: true,
animation: true,
cursor: 'pointer',
dataLabels:{
enabled: true,
rotation: 0
},
enableMouseTracking: true
}
},
series: [
{
yAxis: 0,
name: '必须使用量',
data: [119, 633, 2985]
},
{
type: 'line',
color: '#D6CCA2',
yAxis: 1,
name: '使用率',
data: [31.09, 74.25, 50.69]
}
]
});
var byBU = new Highcharts.Chart({
chart: {
renderTo: 'byBU',
type: 'column'
},
title: {
text: 'By BU 必须使用数量和使用率'
},
xAxis: {
categories: ['Marketing', 'PR', 'R&D','RA','Sales','Empty','Consumer总体']
},
yAxis: [
{
tickInterval: 20,
min: 0,
max: 140,
title: {
text: '必须使用量'
}
},
{
tickInterval: 10.00,
min: parseFloat(0).toFixed(2),
max: parseFloat(100).toFixed(2),
title: {
text: '使用率'
},
format: '{value}%',
opposite : true,
labels : {
formatter : function() {
return parseFloat(this.value).toFixed(2) + '%';
}
}
},
],
credits:{
enable: false,
text: ""
},
legend:{
enable: true,
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100
},
plotOptions:{
spline:{
allowPointSelect: true,
animation: true,
cursor: 'pointer',
dataLabels:{
enabled: true,
rotation: 0
},
enableMouseTracking: true
}
},
series: [
{
yAxis: 0,
name: '必须使用量',
data: [21, 2, 3, 1, 51, 41, 119]
},
{
type: 'line',
color: '#D6CCA2',
yAxis: 1,
name: '使用率',
data: [47.62, 100.00, 0.00, 0.00, 39.22, 12.20, 31.09]
}
]
});
});
最后，JSON真是我这种数据结构白痴的福音！
一个highcharts混合图Demo的更多相关文章
- Qt+ECharts开发笔记（四）：ECharts的饼图介绍、基础使用和Qt封装百分比图Demo
前言 前一篇介绍了横向柱图图.本篇将介绍基础饼图使用,并将其封装一层Qt. 本篇的demo使用隐藏js代码的方式,实现了一个饼图的基本交互方式,并预留了Qt模块对外的基础接口. Demo演示 ...
- ios学习-制作一个浏览图片的Demo
一.项目要求:制作一个浏览图片的Demo,要求包含夜间模式,以及改变图片大小,能够显示不同的图片描述 二.开发步骤: 1.在storyboard上添加一个空白的View,然后添加”设置“按钮,添加im ...
- POJ 1637 混合图的欧拉回路判定
题意:一张混合图,判断是否存在欧拉回路. 分析参考: 混合图(既有有向边又有无向边的图)中欧拉环.欧拉路径的判定需要借助网络流! (1)欧拉环的判定:一开始当然是判断原图的基图是否连通,若不连通则一定 ...
- 【BZOJ-2095】Bridge 最大流 + 混合图欧拉回路 + 二分
2095: [Poi2010]Bridges Time Limit: 10 Sec Memory Limit: 259 MBSubmit: 604 Solved: 218[Submit][Stat ...
- POJ 1637 Sightseeing tour （混合图欧拉路判定）
Sightseeing tour Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 6986 Accepted: 2901 ...
- POJ1637 Sightseeing tour (混合图欧拉回路）（网络流）
Sightseeing tour Time Limit: 1000MS Me ...
- UVa 10735 (混合图的欧拉回路) Euler Circuit
题意: 给出一个图,有的边是有向边,有的是无向边.试找出一条欧拉回路. 分析: 按照往常的思维,遇到混合图,我们一般会把无向边拆成两条方向相反的有向边. 但是在这里却行不通了,因为拆成两条有向边的话, ...
- UVA 10735 Euler Circuit 混合图的欧拉回路（最大流，fluery算法）
题意:给一个图,图中有部分是向边,部分是无向边,要求判断是否存在欧拉回路,若存在,输出路径. 分析:欧拉回路的定义是,从某个点出发,每条边经过一次之后恰好回到出发点. 无向边同样只能走一次,只是不限制 ...
- bzoj 2095: [Poi2010]Bridges（二分法+混合图的欧拉回路）
[题意] 给定n点m边的无向图,对于边u,v,从u到v边权为c,从v到u的边权为d,问能够经过每条边一次且仅一次,且最大权值最小的欧拉回路. [思路] 二分答案mid,然后切断权值大于mid的边,原图 ...
随机推荐
- diliucizuoye
NABCD N(Need 需求) 互联网的高速发展,造就了二十一世纪这个追求高品质.高体验的信息时代,随其发展改变的是信息记录与分享方式,从传统的面对面交流.手机通话.写日记本,到现如今的社交平台.信 ...
- Week2-作业1-part2.阅读与思考
第一章.概论 原文: 在成熟的航空工业中,一个飞机发动机从构思到最后运行,不知道经历过多少人.多少工序.多少流程.多少相关知识的验证.我们无法想象,某个商用型号的发动机在飞行时发现问题,最初的设计师会 ...
- 微信小程序之Flex布局
微信小程序页面布局方式采用的是Flex布局.Flex布局,是W3c在2009年提出的一种新的方案,可以简便,完整,响应式的实现各种页面布局.Flex布局提供了元素在容器中的对齐,方向以及顺序,甚至他们 ...
- 高可用集群(crmsh详解)http://www.it165.net/admin/html/201404/2869.html
crmsh是pacemaker的命令行接口工具,执行help命令,可以查看shell接口所有的一级命令和二级命令,使用cd 可以切换到二级子命令的目录中去,可以执行二级子命令 在集群中的资源有四类:p ...
- Scrum 项目4.0&&5.0
MY—HR 成员: 角色分配 学号 博客园 4.0团队贡献分 5.0团队贡献分 丘惠敏 PM项目经理 201406114203 http://www.cnblogs.com/qiuhuimin/ 19 ...
- cmd命令行安装，删除Windows证书（certgmr的简单使用）
在管理证书的时候需要用到certmgr工具. 在cmd中执行certmgr会弹出证书管理的工具,但是不能用命令行去管理证书,需要额外的工具 cermgr.exe:下载链接 https://pan.ba ...
- 【转载】css3动画简介以及动画库animate.css的使用
原文地址:http://www.cnblogs.com/2050/p/3409129.html 在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好. ...
- Homework 1_SQL Server中由于外键约束而删除数据失败
SQL Server中由于外键约束而删除数据失败 原因分析:外键约束问题.在配置文件中配置了一对一的关系,外键也是唯一的.数据库中数据有严格的依赖关系. 而在业务逻辑中,在往数据库里删除数据之前,却忘 ...
- TreeMap源码剖析
原文 http://blog.csdn.net/chdjj/article/details/38782221 主题 源码分析红黑树 注:以下源码基于jdk1.7.0_11 之前介绍了一系列Map集合 ...
- ibatis解决sql注入问题
原文: http://blog.csdn.net/scorpio3k/article/details/7610973 对于ibaits参数引用可以使用#和$两种写法,其中#写法会采用预编译方式,将转义 ...