flot 自定义显示日期

html 代码：

[html] view plaincopy

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples: Time Axes</title>
<link href="../examples.css" rel="stylesheet" type="text/css">
<script language="javascript" type="text/javascript" src="../../jquery.js"></script>
<script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="../../jquery.flot.time.js"></script>
<script type="text/javascript">
Date.prototype.Format = function (fmt) { //author: meizz
var o = {
"M+": this.getMonth() + 1, //月份
"d+": this.getDate(), //日
"h+": this.getHours(), //小时
"m+": this.getMinutes(), //分
"s+": this.getSeconds(), //秒
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
"S": this.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
};
var currentDate = new Date();
var arr = [
[1,new Date(currentDate.getFullYear(),currentDate.getMonth(),currentDate.getDate()-7).Format("yyyy-MM-dd")],
[2,new Date(currentDate.getFullYear(),currentDate.getMonth(),currentDate.getDate()-6).Format("yyyy-MM-dd")],
[3,new Date(currentDate.getFullYear(),currentDate.getMonth(),currentDate.getDate()-5).Format("yyyy-MM-dd")],
[4,new Date(currentDate.getFullYear(),currentDate.getMonth(),currentDate.getDate()-4).Format("yyyy-MM-dd")],
[5,new Date(currentDate.getFullYear(),currentDate.getMonth(),currentDate.getDate()-4).Format("yyyy-MM-dd")],
[6,new Date(currentDate.getFullYear(),currentDate.getMonth(),currentDate.getDate()-3).Format("yyyy-MM-dd")],
[7,new Date(currentDate.getFullYear(),currentDate.getMonth(),currentDate.getDate()-1).Format("yyyy-MM-dd")]
];
$(function() {
var d = [
[1,1],
[2,3],
[3,4],
[4,8],
[5,10],
[6,4],
[7,4]
];
$.plot("#placeholder", [d], {
xaxis: {
ticks:arr
},
series: {
lines: { show: true},
points: { show: true }
}
});
});
</script>
</head>
<body>
<div id="content">
<div class="demo-container">
<div id="placeholder" class="demo-placeholder"></div>
</div>
</div>
</body>
</html>

显示效果：

原理：要展示的数据的 x 坐标和自定义的 x 坐标里面的第一个值相同，后面的值就是自定义要显示的内容。

原文：http://blog.csdn.net/tengdazhang770960436/article/details/38872269

flot 自定义显示日期相关推荐

flot横坐标显示日期
效果图: 要显示日期格式就要引入jquery.flot.time.js插件. 根据API,要把日期转化为毫秒数UTC. 首先,定义一个函数转化日期: var time = GetTimeStep(n ...
android时间24小时,安卓时间显示TextClock显示日期时间，24小时制和12小时制(自定义...
安卓时间显示TextClock显示日期时间,24小时制和12小时制(自定义安卓时间显示TextClock显示日期时间,24小时制和12小时制(自定义时间) 这个地方的是按24小时制还是12小时制是 ...
Android 自定义带图标Toast，工具方法，Toast自定义显示时间
带图标Toast工具方法1 样式 <?xml version="1.0" encoding="utf-8"?> <shape xmlns:an ...
android自定义滚动日期,Android基于wheelView实现自定义日期选择器
本文实例为大家分享了Android实现自定义日期选择器的具体代码,供大家参考,具体内容如下项目要求效果图: 要求 "6月20 星期五" 这一项作为一个整体可以滑动,"7 ...
自定义Android日期选择器
自定义Android日期选择器背景调研思考和总结另一种方案背景设计小姐姐,给了一个如下所示的需求,很显然这是一个日期选择器调研目前ANDROID主流的日期选择器,是官方提供的DateP ...
DateEdit如果开启Vista模式并显示日期+时间模式
DateEdit如果开启Vista模式并显示日期+时间模式问题,以前没有涉及过,借机看一下,记录如下: 设置为Vista显示模式(如下图) 设置以下属性 dateEdit1.Properties.V ...
LaTeX去掉默认显示日期时间
LaTeX默认情况下会显示日期时间,该时间是编译时的日期,有时候我们并不需要显示该日期,该怎么办呢? 方法: 使用\date关键字并将{}里的内容置空即可,即: \date{} 重新编译,这样就不显示 ...
asp 之让实体中字段类型为DateTime的字段仅仅显示日期不显示时间
在我们平时的工作开发中.我们一般会遇到这种一个问题:某个实体的某个字段是DateTime类型的,但是我们在界面上仅仅想让它显示日期不显示时间! 一个订单实体: //订单类public c ...
java通过poi读取excel中的日期类型数据或自定义类型日期
java通过poi读取excel中的日期类型数据或自定义类型日期 Java 读取Excel表格日期类型数据的时候,读出来的是这样的 12-十月-2019,而Excel中输入的是 2019/10/12 ...

flot 自定义显示日期

flot 自定义显示日期相关推荐

最新文章

热门文章