一个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的边,原图 ...
随机推荐
- H5页面的滚动条在windows浏览器下始终看到(灰色的不可用的)
一般这种情况是在某些相关的div上设置了overflow:scroll属性,在mac系统的浏览器下均没有滚动条显示而在windows下的各个浏览器上均可以看到灰色的不可用的滚动条,这种情况我们需要在b ...
- HighCharts点击柱形或饼块等加URL或Click事件
我们在做图表的时候,有时候需要在单个数据上加链接或点击事件,是在plotOptions里的events里设置的: 如下代码: plotOptions: { pie: { cursor: 'pointe ...
- ABP ModuleZero后台框架materialize禁止模拟select和checkbox
使用abp modulezero自带那个后台框架发现一个操蛋的问题,所有的select和checkbox都被改成div模拟的,虽然比原生美观,但有时候真的很难用. 比如说要用select做一个联动菜单 ...
- 移动端 H5 弹出层 fixed 内容可滚动
<div class="alert_wapper"> <div class="wapper"> <!--内容 --> < ...
- SpringBoot(五)_表单验证
SpringBoot(五)_表单验证 参数校验在我们日常开发中非常常见,最基本的校验有判断属性是否为空.长度是否符合要求等,在传统的开发模式中需要写一堆的 if else 来处理这些逻辑,很繁琐,效率 ...
- Letter Combinations of a Phone Number - LeetCode
目录 题目链接 注意点 解法 小结 题目链接 Letter Combinations of a Phone Number - LeetCode 注意点 可以不用按字典序排序 解法 解法一:输入的数字逐 ...
- P3320 [SDOI2015]寻宝游戏 解题报告
P3320 [SDOI2015]寻宝游戏 题目描述 小B最近正在玩一个寻宝游戏,这个游戏的地图中有\(N\)个村庄和\(N-1\)条道路,并且任何两个村庄之间有且仅有一条路径可达.游戏开始时,玩家可以 ...
- Mac上安装python3并设置SublimeREPL插件默认运行python3
1.安装python3 $ brew search python $ brew install python3 这里安装完后不需要单独添加环境变量,程序已经处理好,可以直接运行python3命令. $ ...
- bzoj2961&&bzoj4140 共点圆
题目描述 在平面直角坐标系中,Wayne需要你完成n次操作,操作只有两种: 1.0 x y.表示在坐标系中加入一个以(x, y)为圆心且过原点的圆. 2.1 x y.表示询问点(x, y)是否在所有已 ...
- maven使用内嵌tomcat7
在web项目的pom.xml中添加如下: <build> <plugins> <plugin> <groupId>org.apache.tomcat.m ...