flot横坐标显示日期

效果图：

要显示日期格式就要引入jquery.flot.time.js插件。

根据API，要把日期转化为毫秒数UTC。
首先，定义一个函数转化日期：

var time = GetTimeStep(new Date("2020-1-1"));
/*如果要转化的日期格式是"2020-1-1 12:10:50"
*则下面的函数要加上8小时
*/function GetTimeStep(time) {day = time.getHours();time = time.setHours(day);//也就是这句改成：time = time.setHours(8+day);time = new Date(time);time = time.getTime();return time;
}

所以，我们传过去的数据形式是[毫秒数,值]，也就是[time, 0.5]，我的是ajax传过来的数据：

$(obj).each(function (i) {var val = obj[i];var time = GetTimeStep(new Date(val.DATE));_pageviews0.push([time, val.aNum]);_pageviews1.push([time, val.bNum]);
});

然后，x轴：

xaxis: {mode: "time",timeformat: "%y/%m/%d",minTickSize: [1, "day"],//间隔是一天Timezone: null
}

设置图例的位置

正常不设置图例的话，就会挡住线条了，那么我要把图例的位置移到图的外面：

legend: {noColumns: 0,//列数//position: "nw",//se:右下，sw:左下，nw:左上，ne:右上margin: [0,-22],//[x,y]距离放置图的div的右边距及上边距，设置成负数就等于向上移， 这一句可以不让图例遮住线backgroundOpacity: 0.1,
},//注意，还要设置这个图与div的margin值，不然图例显示不完整
grid: {hoverable: true,clickable: true,tickColor: "#eee",borderWidth: 0,margin:20
},

flot横坐标显示日期相关推荐

WPF Chart DynamicDataDisplay的横坐标显示日期的解决方案
WPF Chart DynamicDataDisplay的横坐标显示日期的解决方案我们打开DynamicDataDisplay的源码.内部自带有samples其中v2中带有一个名叫TooltipSa ...
flot 自定义显示日期
html 代码: [html] view plaincopy <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" " ...
ui曲线谁是横坐标_vue项目引入echarts折线图横坐标显示问题
1:问题描述用vue的elmentui做后台系统!利用echarts展示数据(折线图)!发现在数据正常的情况下引入更新横坐标显示有问题!横坐标数组为空则显示正常! 2:相关代码 axios.get( ...
DateEdit如果开启Vista模式并显示日期+时间模式
DateEdit如果开启Vista模式并显示日期+时间模式问题,以前没有涉及过,借机看一下,记录如下: 设置为Vista显示模式(如下图) 设置以下属性 dateEdit1.Properties.V ...
LaTeX去掉默认显示日期时间
LaTeX默认情况下会显示日期时间,该时间是编译时的日期,有时候我们并不需要显示该日期,该怎么办呢? 方法: 使用\date关键字并将{}里的内容置空即可,即: \date{} 重新编译,这样就不显示 ...
Python绘图之matplotlib基础教程：matplotlib库图表绘制中常规设置大全(交互模式、清除原有图像、设置横坐标显示文字/旋转角度、添加图例、绘图布局自动调整、图像显示、图像暂停)
Python绘图之matplotlib基础教程:matplotlib库图表绘制中常规设置大全(交互模式.清除原有图像.设置横坐标显示文字/旋转角度.添加图例.绘图布局自动调整.图像显示.图像暂停) 目 ...
asp 之让实体中字段类型为DateTime的字段仅仅显示日期不显示时间
在我们平时的工作开发中.我们一般会遇到这种一个问题:某个实体的某个字段是DateTime类型的,但是我们在界面上仅仅想让它显示日期不显示时间! 一个订单实体: //订单类public c ...
一个显示日期的工具类
一个显示日期的工具类 .h文件 #import <Foundation/Foundation.h>@interface TimeUtil : NSObject+ (NSString*)ge ...
显示日期的指令： date
1.显示日期的指令: date (1)参数: (2)实例转载于:https://www.cnblogs.com/yfacesclub/p/8434369.html

flot横坐标显示日期

设置图例的位置

flot横坐标显示日期相关推荐

最新文章

热门文章