一个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的边,原图 ...
随机推荐
- 团队作业2 <嗨，你的快递！>需求分析与原型设计
哦,不,是你的快速(*_*) 第一部分 需求分析 1.1 用户调研 1.1.1调研对象:由于我们的系统是校园快递代取业务,面向的是大学生活,所以本次调研范围都是在校大学生(除了师大学生,也包括了外校的 ...
- JavaBean 与 EJB 的区别
JavaBean在一般情况下指的是实体类,在大部分情况下和POJO是同义词,基本构成就是一些字段和与之对应的 setter.getter方法,如果一个JavaBean需要在不同的JVM的进程中进行传递 ...
- [BUAA_SE_2017]提问回顾
提问回顾 学期初疑问回答 学期初疑问博客 教材中说,PM在衡量需求时需要方方面面的能力与研究.可是,当下许多互联网IT公司只承担外包业务,即客户给什么需求就实现什么需求,甚至可能不要求其它先进的功能. ...
- vm的三种网络模式
Vm网卡的模式:网络地址转换模式(nat),仅主机(host-only),桥接模式(Brideged) VMware 的几个虚拟设备: ■ VMnet0:这是 VMware 用于虚拟桥接网络下的虚拟交 ...
- Linux限制cpu睿频&限制频率
.关闭睿频 > /sys/devices/system/cpu/intel_pstate/no_turbo .限制CPU最大频率到50% " | sudo tee /sys/devic ...
- ognl用法 取变量时候 需要在变量前面加上# 取字符串需要用单引号包裹字符串
- BZOJ 1180: [CROATIAN2009]OTOCI
1180: [CROATIAN2009]OTOCI Time Limit: 50 Sec Memory Limit: 162 MBSubmit: 989 Solved: 611[Submit][S ...
- 【转】VMware虚拟机三种网络模式详解
由于Linux目前很热门,越来越多的人在学习Linux,但是买一台服务放家里来学习,实在是很浪费.那么如何解决这个问题?虚拟机软件是很好的选择,常用的虚拟机软件有VMware Workstations ...
- 【BZOJ3309】DZY Loves Math 解题报告
[BZOJ3309]DZY Loves Math Description 对于正整数\(n\),定义\(f(n)\)为\(n\)所含质因子的最大幂指数.例如\(f(1960)=f(2^3×5^1×7^ ...
- 所以到底什么是 Growth Hacking？
Growth hacking 在硅谷的确是有快被用坏的趋势,之所以在大陆的互联网创业圈里还没有普及开来,我想一个是由于这个词并没有对应的中文解释,没有一个能够找到一个相对完美的解释,就像 “hack” ...