一个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的边,原图 ...
随机推荐
- MaxAlertView 强大的弹框试图
[链接]https://github.com/MrJalen/MaxAlertView MaxAlertView ) { [MaxAlertView showAlertWithTitle:@" ...
- linux_添加定时任务，每5min清理下某个文件夹下的文件
性能测试的过程中会生成大量的日志文件,导致无法继续进行,linux可以增加一个定时任务,进行定时清理 1. 先编写一个sh脚本,该sh脚本用于文件夹文件清理,脚本编写完成后拷贝到服务器上,且授予权限 ...
- node入门学习(一)
一.安装node.js 方式很多npm,git等,新手建议从官网上直接去下载node的安装包.一键安装. 二.创建一个web服务器. const http = require('http'); htt ...
- pygame学习笔记（4）——声音
转载请注明:@小五义 http://www.cnblogs.com/xiaowuyi pygame.mixer是一个用来处理声音的模块,其含义为“混音器”.游戏中对声音的处理一般包括制造声音和播放声音 ...
- 清理elasticsearch的索引
curl -XDELETE 'http://172.16.1.16:9200/logstash-2013.03.*' 清理掉了所有 3月份的索引文件,其中*是通配符 下面是主页上的详细介绍,其他部分可 ...
- android之layer-list
效果图: 实现代码: <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:and ...
- Delphi 判断一个字符串是否为数字
//函 数 名: IsDigit//返 回 值: boolean//日 期:2011-03-01//参 数: String//功 能: 判断一个字符串是否为数字// ...
- Xwork概况 XWork是一个标准的Command模式实现，并且完全从web层脱离出来。Xwork提供了很多核心功能：前端拦截机（interceptor），运行时表单属性验证，类型转换，强大的表达式语言（OGNL – the Object Graph NavigationLanguage），IoC（Inversion of Control反转控制）容器等。 ----------------
Xwork概况 XWork是一个标准的Command模式实现,并且完全从web层脱离出来.Xwork提供了很多核心功能:前端拦截机(interceptor),运行时表单属性验证,类型转换,强大的表达式 ...
- P3758 [TJOI2017]可乐
题目描述 加里敦星球的人们特别喜欢喝可乐.因而,他们的敌对星球研发出了一个可乐机器人,并且放在了加里敦星球的1号城市上.这个可乐机器人有三种行为: 停在原地,去下一个相邻的城市,自爆.它每一秒都会随机 ...
- Spring面试，IoC和AOP的理解, @Transactional原理及使用
spring 的优点?1.降低了组件之间的耦合性 ,实现了软件各层之间的解耦 2.可以使用容易提供的众多服务,如事务管理,消息服务等 3.容器提供单例模式支持 4.容器提供了AOP技术,利用它很容易实 ...