Flot時間資料格式折線圖 - Flot Time Series Line Chart

製作時間資料格式折線圖

繪製時間資料格式折線圖很簡單, 你將會需要用到javascript timestamps. javascript timestamps是以毫秒為單位(1000毫秒等於1秒), 從1970-01-01 00:00開始計算起. 同時javascript timestamps是UTC格式可以避免因各地時區不同造成圖表上的誤差

你需要把xaxis的mode屬性設成 'time', 否則xaxis不會以時間格式顯示
xaxis: {
    mode: "time"
}

範例時間格式折線圖
範例程式碼 Expand
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://static.pureexample.com/js/flot/excanvas.min.js"></script>
<script src="http://static.pureexample.com/js/flot/jquery.flot.min.js"></script>

<!-- CSS -->
<style type="text/css">
#flotcontainer {
    width: 600px;
    height: 200px;
    text-align: center;
    margin: 0 auto;
}
</style>


<!-- Javascript -->
<script type="text/javascript">
var data5 = [];

function DoSeries5(){
    var data = [];
    var start = 1354586000000;

    for(i=1;i<=50;i++){                
        data.push([start, Math.cos(i)]);
        start+= 100000
    }

    return data;
}

$(function () {    
    data5 = DoSeries5();
    
    $.plot($("#flotcontainer"),
        [
            {data: data5}
        ],
        {            
            grid: {
                backgroundColor: { colors: ["#75A7E0", "#1F77DB"]  }
            },
            xaxis: {
                mode: "time"
            }
        }
    );

});
</script>

<!-- HTML -->
<div id="flotcontainer"></div>


自訂時間格式

如果你使用時間格式資料, 你可以自行定義輸出的格式
xaxis: {
    mode: "time",
    timeformat: "%Y/%m/%d"
}

/*
時間格式

%h: 時
%H: 時 (左方以0填位)
%M: 分 (左方以0填位)
%S: 秒 (左方以0填位)
%d: 日 (1-31), 用 %0d 以0填位
%m: 月 (1-12), 用 %0m 以0填位
%y: 年 (4位數)
%b: 月份名稱 (可自訂)
%p: am/pm
%P: AM/PM 
*/



範例自訂時間格式折線圖
範例程式碼 Expand
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://static.pureexample.com/js/flot/excanvas.min.js"></script>
<script src="http://static.pureexample.com/js/flot/jquery.flot.min.js"></script>

<!-- CSS -->
<style type="text/css">
#flotcontainer {
    width: 600px;
    height: 200px;
    text-align: center;
    margin: 0 auto;
}
</style>


<!-- Javascript -->
<script type="text/javascript">
var data6 = [];

function DoSeries6(){
    var data = [];
    var start = 1354586000000;

    for(i=1;i<=50;i++){                
        data.push([start, i * Math.cos(i)]);
        start+= 100000
    }

    return data;
}

$(function () {    
    data6 = DoSeries6();
    
    $.plot($("#flotcontainer"),
        [
            {
              data: data6,
              points: { show: true },
              lines: { show: true}
            }
        ],
        {            
            grid: {
                backgroundColor: { colors: ["#B0D5FF", "#5CA8FF"] }
            },
            xaxis: {
                mode: "time",
                timeformat: "%0m/%0d %0H:%0M"
            }
        }
    );
});
</script>

<!-- HTML -->
<div id="flotcontainer"></div>


comments powered by Disqus