flot 自定义显示日期

最新推荐文章于 2020-11-28 11:08:31 发布

NJUPT_T

最新推荐文章于 2020-11-28 11:08:31 发布

阅读量745

点赞数

分类专栏： Ajax/Jquery 文章标签： jquery flot

Ajax/Jquery 专栏收录该内容

0 篇文章

订阅专栏

本文介绍如何使用Flot图表库结合jQuery实现自定义时间轴的图表绘制，通过JavaScript代码生成指定日期范围内的数据点，并将这些数据点的x轴坐标设置为具体的日期格式，以实现更直观的时间序列数据展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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">  
     <!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../../excanvas.min.js"></script><![endif]-->  
     <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>  