利用Flot作基于时间段的曲线图
Flot是一个可以用于绘制多种图表的开源的JS库，Flot本身的功能已经是基本可以满足日常的需要啦，更可喜的是Flot还有很多的插件可以使用，从而为我们提供更加强大的定制功能，本文在作图中使用的显示坐标轴说明文本和横轴显示定制的时间格式的功能真是使用了Flot中的两个插件。
下面会结合具体的代码来进行注释，以说明如何具体的来进行定制图表的绘制。
<html>
<head>
<title>Flot Test</title>
</head>
<body>
<div id="flot-placeholder" style="width:550px;height:350px;margin:0 auto"></div>
<script type="text/javascript" src="flot/jquery.js"></script>
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="/js/flot/excanvas.min.js"></script><![endif]-->
<script type="text/javascript" src="flot/jquery.flot.js"></script>
<script type="text/javascript" src="flot/jquery.flot.time.js"></script>
<script type="text/javascript" src="flot/jshashtable-2.1.js"></script>
<script type="text/javascript" src="flot/jquery.numberformatter-1.2.3.min.js"></script>
<script type="text/javascript" src="flot/jquery.flot.symbol.js"></script>
<script type="text/javascript" src="flot/jquery.flot.axislabels.js"></script>
<script>
// 图表要显示的数据 在横轴显示的时间是不能直接处理日期的 它实际上
// 处理的是一个时间戳 所以可以看到先利用gd()函数将定制的时间转换
// 为相应的时间戳
var data1 = [
[gd(11, 1, 2), 16], [gd(11, 1, 3), 19.3], [gd(11, 1, 4), 15.65],
[gd(11, 1, 5), 18.15], [gd(11, 1, 6), 16.1], [gd(11, 1, 7), 18.65],
[gd(11, 1, 8), 18.15], [gd(11, 1, 9), 10.2], [gd(11, 1, 10), 17.7],
[gd(11, 1, 11), 18.7], [gd(11, 1, 12), 19.75], [gd(11, 1, 13), 17.25],
[gd(11, 1, 14), 16.3], [gd(11, 1, 15), 16.8], [gd(11, 1, 16), 17.3],
[gd(11, 1, 17), 10.8], [gd(11, 1, 18), 16.75], [gd(11, 1, 19), 16],
[gd(11, 1, 20), 16.65], [gd(11, 1, 21), 11.2], [gd(11, 1, 22), 16.7],
[gd(11, 1, 23), 14.25]
];
// 定义数据相关的属性 lable就是显示这条曲线代表的啥 会显示一个小色块 然后标注文本
var dataset = [
{
label: "浓度曲线图",
data: data1,
color: "#FF0000",
points: { fillColor: "#FF0000", show: true },
lines: { show: true }
}
];
// 这个是对绘制图表的属性的设置 这里之所以可以让X轴显示成时间就是因
// 为在这里做了设置, 如果对xaxes不做设置的话，默认是显示数字，不会
// 显示时间格式 这里可以看到我设置的时间格式是 %H:%M:%S 其实用过
// 任何一门编程语言处理过时间的都不陌生 这个时间格式是 时:分:秒
// tickSize是横轴显示的时间密集度 这里可以看到是设置的5秒钟
// 主要的难度就是这个地方了 其他的设置倒是还都算中规中矩
var options = {
series: {
shadowSize: 5
},
xaxis:
{
mode: "time",
timeformat: "%H:%M:%S",
tickSize: [5, "second"],
color: "black",
axisLabel: "时间",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 10
},
yaxis: {
color: "black",
tickDecimals: 2,
axisLabel: "浓度",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 5
},
legend: {
noColumns: 0,
labelFormatter: function (label, series) {
return "<font color=\"white\">" + label + "</font>";
},
backgroundColor: "#000",
backgroundOpacity: 0.9,
labelBoxBorderColor: "#000000",
position: "nw"
},
grid: {
hoverable: true,
borderWidth: 3,
mouseActiveRadius: 50,
backgroundColor: { colors: ["#ffffff", "#EDF5FF"] },
axisMargin: 20
}
};
// 当界面DOM加载完成后 开始图表的绘制
$(document).ready(function () {
$.plot($("#flot-placeholder"), dataset, options);
});
// 对时间的转换 因为我们的需求是按时间显示，不会跨天 并且显示的
// 数据一般不超过一小时的 所以这里的年月日都是用了当前的年月日
// 如果你的需求和这不同的话 可以考虑将年月日也作为参数传递过来
function gd(hour, minute, second) {
var now_date = new Date();
var year = now_date.getFullYear();
var month = now_date.getMonth();
var day = now_date.getDate();
// 很傻逼的是 在其中使用的time插件只能显示标准格林尼治时间
// 所以会和本地时间有所不同，需要进行校正
var diff = now_date.getTimezoneOffset() * -1 * 60 * 1000;
return new Date(year, month, day, hour, minute, second).getTime() + diff;
}
</script>
</body>
</html>
利用Flot作基于时间段的曲线图的更多相关文章
- php利用zookeeper作dispatcher服务器
===== https://blog.eood.cn/php_share_memory 最常见的apc 可以缓存php的opcode提高应用的性能,可以在同个php-fpm进程池间共享数据 常见功能: ...
- JSP利用freemarker生成基于word模板的word文档
利用freemarker生成基于word模板的word文档 freemarker简介 FreeMarker是一个用Java语言编写的模板引擎,它基于模板来生成文本输出.FreeMarker与Web容器 ...
- 利用iptables实现基于端口的网络流量统计
如何统计某个应用的网络流量(包括网络流入量和网络流出量)问题,可以转换成如何基于端口号进行网络流量统计的问题.大部分网络应用程序都是传输层及以上的协议,因此基于端口号(tcp, udp)统计网络流量基 ...
- 利用cocoapods创建基于git的私有库
上一篇文章记录了我利用cocoapods创建基于SVN的私有库的全部过程,今天我再记录一下基于git创建的过程. 整体先说明一下创建一个私有的podspec包括如下那么几个步骤: 创建并设置一个私有的 ...
- 利用cocoapods创建基于git的私有库Spec Repo
上一篇文章记录了我利用cocoapods创建基于SVN的私有库的全部过程,今天我再记录一下基于git创建的过程. 整体先说明一下创建一个私有的podspec包括如下那么几个步骤: 创建并设置一个私有的 ...
- 利用Openfiler配置基于文件系统的网络存储
一.Openfiler简介 Openfiler是一个操作系统,其提供基于文件的网络附加存储和基于块的存储区域网络功能. Openfiler支持的网络协议包括:NFS,SMB/CIFS,HTTP/Web ...
- 【CPU微架构设计】利用Verilog设计基于饱和计数器和BTB的分支预测器
在基于流水线(pipeline)的微处理器中,分支预测单元(Branch Predictor Unit)是一个重要的功能部件,它负责收集和分析分支/跳转指令的执行结果,当处理后续分支/跳转指令时,BP ...
- 利用mycat实现基于mysql5.5主从复制的读写分离
整体步骤: 1.准备好两台服务器,一台作为主数据库服务器,一台作为从服务器,并安装好mysql数据库,此处略 2.配置好主从同步 3.下载JDK配置mycat依赖的JAVA环境,mycat采用java ...
- 微软BI 之SSRS 系列 - 基于时间段参数的 MDX 查询以及时间日历 Date Picker 的时间类型参数化
今天在天善问答里看到一个问题,如果我没有理解错的话,它应该是指比如在一个报表中选取一个时间段,然后求出这个时间段的某个 Measure 的 SUM 和.并且同时求出这两个时间点对应的上一年的时间点之间 ...
随机推荐
- Python 3标准库课件第一章（第二版）
第一章文本1.1 string:文本常量和模板1.2 textwrap:格式化文本段落1.3 re:正则表达式1.4 difflib:比较序列str类,string.Templatetextwrap ...
- 约瑟夫环（CVTE、网易2014.3.16笔试题offerP228）
题目:0,1,2,……,n-1这n个数字排成一个圆圈,从数字0开始每次从这个圆圈里删除第m个数字.求出这个圆圈里剩下的最后一个数字. 法一:用环形链表模拟圆圈的经典算法(时间复杂度O(nm),空间复杂 ...
- IP地址（参考百度百科）
题目1:用子网掩码划分网络时,如果划分8个子网,则需要4位.因为24-2>=8.(全0代表网络自身,全1代表广播地址,所以减2) 以C类地址为例,(1)8个子网,则4位子网,主机号为后4位,主机 ...
- 【leetcode】1222. Queens That Can Attack the King
题目如下: On an 8x8 chessboard, there can be multiple Black Queens and one White King. Given an array of ...
- ASP.NET如何实现断点续传的上传、下载功能？
1 背景 用户本地有一份txt或者csv文件,无论是从业务数据库导出.还是其他途径获取,当需要使用蚂蚁的大数据分析工具进行数据加工.挖掘和共创应用的时候,首先要将本地文件上传至ODPS,普通的小文件通 ...
- string [线段树优化桶排]
题意大概是给你一个字符串,1e5次修改,每次给一个区间升序排列或降序排列,最后输出这个字符串; 其实是个挺裸的线段树优化题;但是我没有意识去结合桶排,扑该..... 首先 1.40分算法 O(NMlo ...
- codevs 1020 孪生蜘蛛 x
题目描述 Description 在G城保卫战中,超级孪生蜘蛛Phantom001和Phantom002作为第三层防卫被派往守护内城南端一带极为隐秘的通道. 根据防护中心的消息,敌方已经有一只特种飞蛾 ...
- Oracle数据库表空间查看和更改
set linesize 200 --设置输出一行字符个数为200 1.查看表空间名称和大小(单位MB) SELECT t.tablespace_name, round(SUM(bytes / (1 ...
- CDH搭建和集成spark、kafka操作
系统:Centos7 CDH版本:5.14.0 请自己提前安装好:mysql.jdk 并下载好相关依赖(每一台机器) yum -y install chkconfig python bind-util ...
- [BZOJ1059]:[ZJOI2007]矩阵游戏（二分图匹配）
题目传送门 题目描述 小Q是一个非常聪明的孩子,除了国际象棋,他还很喜欢玩一个电脑益智游戏——矩阵游戏.矩阵游戏在一个N×N黑白方阵进行(如同国际象棋一般,只是颜色是随意的).每次可以对该矩阵进行两种 ...