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

时间 2019-11-19

标签利用 flot 基于时间曲线图繁體版

原文原文链接

Flot是一个能够用于绘制多种图表的开源的JS库，Flot自己的功能已是基本能够知足平常的须要啦，更可喜的是Flot还有不少的插件可使用，从而为咱们提供更增强大的定制功能，本文在做图中使用的显示坐标轴说明文本和横轴显示定制的时间格式的功能真是使用了Flot中的两个插件。javascript

下面会结合具体的代码来进行注释，以说明如何具体的来进行定制图表的绘制。html

<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>