利用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 和.并且同时求出这两个时间点对应的上一年的时间点之间 ...

随机推荐

判断request中是否有文件
ServletFileUpload.isMultipartContent(request)
HTTP协议的请求方法
HTTP概念: HTTP是一个基于TCP/IP通信协议来传递数据,包括html文件.图像.结果等,即是一个客户端和服务器端请求和应答的标准 1.http无连接:限制每次连接只处理一个请求,服务端完成客 ...
elementUI中的el-xxx标签解释
点击跳转地址:https://blog.csdn.net/Tom__cy/article/details/89680067 el-col :整体,el-container: 主体区域el-toolti ...
求hack or 证明（【JZOJ 4923】【NOIP2017提高组模拟12.17】巧克力狂欢）
前言本人在此题有一种不是题解的方法,但无法证明也找不到反例. 如果各位大神有反例或证明请发至邮箱:qq1350742779@163.com Description Alice和Bob有一棵树(无根 ...
hdu 6377 : 度度熊看球赛
题目链接题解: 将原问题转换为对于全部 (2n)! 种情况,每种情况对ans的贡献为 D^k,其中k表示该情况下有k对情侣座位相邻. 预处理好共有 i (1<=i<=N)对情侣时,出现 ...
Olympic Game
每次奥运会期间,大家都非常关注奖牌榜排名的情况. 现在我们假设奖牌榜的排名规则,按优先级从高到低如下: 金牌数量多的排在前面: 银牌数量多的排在前面: 铜牌数量多的排在前面: 若以上三个条件仍无 ...
6407. 【NOIP2019模拟11.05】小 D 与随机
题目描述 Description Input 第一行两个个整数 n,k. 之后 n -1 行,第 i 行两个整数 ui, vi, 表示一条树边. 保证输入的数据构成一棵树. Output 一行一个数表 ...
jmeter--单个接口通，自动化不通时
单个接口通,自动化不通时,对比两者请求 post 请求的格式,内容编码
navicat安装与激活
原文网址:https://www.jianshu.com/p/5f693b4c9468?mType=Group 一.Navicat Premium 12下载 Navicat Premium 12是一套 ...
YOLO_V2
YOLOv2:代表着目前业界最先进物体检测的水平,它的速度要快过其他检测系统(FasterR-CNN,ResNet,SSD),使用者可以在它的速度与精确度之间进行权衡. YOLO9000:这一网络结构 ...

利用Flot作基于时间段的曲线图

利用Flot作基于时间段的曲线图的更多相关文章

随机推荐

热门专题