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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。