English | 正體中文 | 简体中文

制作时间资料格式折线图

绘制时间资料格式折线图很简单, 你将会需要用到javascript timestamps. javascript timestamps是以毫秒为单位(1000毫秒等于1秒), 从1970-01-01 00:00开始计算起. 同时javascript timestamps是UTC格式可以避免因各地时区不同造成图表上的误差

你需要把xaxis的mode属性设成 'time', 否则xaxis不会以时间格式显示
xaxis: {
    mode: "time"
}

时间格式折线图

范例程式码Expand
<!-- HTML -->
<div id="example-section5">
    <div id="flotcontainer" style="width: 600px;height:200px; text-align: center; margin:0 auto;">
    </div>
</div>


<!-- Javascript -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://www.pureexample.com/js/flot/excanvas.min.js"></script>
<script src="http://www.pureexample.com/js/flot/jquery.flot.min.js"></script>
<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($("#example-section5 #flotcontainer"),
        [
            {data: data5}
        ],
        {            
            grid: {
                backgroundColor: { colors: ["#75A7E0", "#1F77DB"]  }
            },
            xaxis: {
                mode: "time"
            }
        }
    );

});
</script>
在线测试程序


自订时间格式

如果你使用时间格式资料, 你可以自行定义输出的格式
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
<!-- HTML -->
<div id="example-section6">
    <div id="flotcontainer" style="width: 600px;height:200px; text-align: center; margin:0 auto;">
    </div>
</div>


<!-- Javascript -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://www.pureexample.com/js/flot/excanvas.min.js"></script>
<script src="http://www.pureexample.com/js/flot/jquery.flot.min.js"></script>
<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($("#example-section6 #flotcontainer"),
        [
            {
              data: data6,
              points: { show: true },
              lines: { show: true}
            }
        ],
        {            
            grid: {
                backgroundColor: { colors: ["#B0D5FF", "#5CA8FF"] }
            },
            xaxis: {
                mode: "time",
                timeformat: "%0m/%0d %0H:%0M"
            }
        }
    );
});
</script>
在线测试程序

更多范例
 
© 2012 PureExample.com contact