一个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的边,原图 ...
随机推荐
- HTTP&HTTPS、GET&POST
1.HTTP&HTTPS: HTTP协议传输的数据都是未加密的,也就是明文的,因此使用HTTP协议传输隐私信息非常不安全,为了保证这些隐私数据能加密传输,于是网景公司设计了SSL(Secure ...
- python基础（四）文件操作和集合
一.文件操作 对文件的操作分三步: 1.打开文件获取文件的句柄,句柄就理解为这个文件 2.通过文件句柄操作文件 3.关闭文件. 1.文件基本操作: f = open('file.txt','r') # ...
- yaf windows安装
1.需要先下载 php_yaf模块.地址(http://pecl.php.net/package/yaf/2.3.2/windows) 看清你的php版本,然后在phpinfo中看Achitectur ...
- 【问底】王帅：深入PHP内核（一）——弱类型变量原理探究
来源:CSDN http://www.csdn.net/article/2014-09-15/2821685-exploring-of-the-php 作者:王帅 摘要:PHP作为一门简单而强大 ...
- 如何在Windows下查看JAVA端口占用情况(阿里面试)
如需要确定谁占用了9050端口 为例: 1.Windows平台 在windows命令行窗口下执行: 1.查看所有的端口占用情况 C:\>netstat -ano 协议 本地地址 外部地址 状态 ...
- Angular中ui-select的使用
Angular中ui-select的使用 最近工作一直很忙,没有时间整理知识,前几天项目中需要用到angular-ui-select,实现下拉框快速过滤效果,今天有时间研究了一下,终于搞明白了. 一. ...
- forEach遍历数组对象且去重
forEach遍历数组对象 var obj1 = [{ key: '01', value: '哈哈' }, { key: '02', value: '旺旺' }, { key: '03', value ...
- java 每一个对象都是根据hashCode区别的 每次返回不同的内存地址
可以通过hashCode比较对象,hashCode如果重写的话 返回的内存地址是一样的 则不能创建对象
- MySQL 双主问题集
最近试用MySQL高可用方案,需要配MySQL双主,对期间遇到的问题做下记录. 1.导出锁表问题 mysqldump 命令增加参数 --skip-opt -q 可避免导出时锁表: 2.导出\导入所有数 ...
- P2461 [SDOI2008]递归数列
题目描述 一个由自然数组成的数列按下式定义: 对于i <= k:ai = bi 对于i > k: ai = c1ai-1 + c2ai-2 + ... + ckai-k 其中bj 和 cj ...