上一篇文章写道:三分钟上手Highcharts简易甘特图:https://www.jianshu.com/p/d669d451711b,在官方文档里面,x轴默认为年月日。

在项目需求中,x轴要表示24小时之内的状态,不可以使用年月日坐标轴,需要使用时分秒,那么highcharts 怎么设置x轴时间格式?这个问题卡了好久,因为网上没有找到合适的方案,关于Highcharts图表的博客也不是很多,只能自己动手研究了。

关于从后台请求过来的数据:

$.ajax({
url : basePath +"/stats/rest/echarts?date="+$("#date").val()+"&pid="+nodes[0].id,
async : false,
type : 'GET',
dataType : 'json',
success : function(data) {
var obj = data.returnData.list;
var data = [];
for(var i = 0; i < obj.length; i++){
var lne = {};
lne['x']=obj[i].restStartTime+8*60*60*1000;
lne['x2']=obj[i].restStopTime+8*60*60*1000;
lne['y']=obj[i].state;
data.push(lne);
}
chart(data);
},
});
// 图表初始化函数
function chart(data){
Highcharts.chart('container', {
chart : {
type : 'xrange'
},
title : {
text : ''
},
xAxis : {
type : 'datetime',
dateTimeLabelFormats : {
week : '%Y/%m/%d %H%M'
}
},
yAxis : {
title : {
text : ''
},
categories : [ '深睡眠', '浅睡眠', '醒着的' ],
reversed : true
},
tooltip : {
dateTimeLabelFormats : {
day : '%Y/%m/%d %H%M'
}
},
credits : {
enabled : false
},
exporting : {
enabled : false
},
series : [ {
name : '睡眠检测',
borderColor : 'gray',
pointWidth : 20,
data : data,
dataLabels : {
enabled : true
}
} ]
});
}

highcharts中的x轴如何显示时分秒时间格式的更多相关文章

  1. iOS开发之--实现倒计时显示时分秒

    这段时间写公司的一个外包项目,需要用到倒计时:需要显示时分秒,通过在网上搜集资料,找到了2中方法,我把这两种方法结合起来,可以很好的满足这个需求: 1.创建一个类继承自UIlabel,用来展示时分秒的 ...

  2. C# DateTimePicker控件如何精确设置显示时分秒

    项目中需要使用DateTimePicker空间选定当前的时间,但是这个空间默认显示到天,如何能让它显示具体的小时和分钟呢? 我们看到有一个Format属性,Format令我们想到格式化,有这几种格式 ...

  3. 2018.2.2 java中的Date如何获取 年月日时分秒

    package com.util; import java.text.DateFormat; import java.util.Calendar; import java.util.Date; pub ...

  4. 在jqueryEasyUI界面将时间以日期加时分秒的格式显示

    问题描写叙述: oracle 10G中用户表有一个字段是日期型.数据格式为yyyy-MM-dd HH:mm:ss,前端显示时仅仅能显示成yyyy-MM-dd 后面的 HH:mm:ss不显示. 经过一番 ...

  5. highcharts中把X轴的名字竖着显示

    Highcharts.chart('container', { chart: { type: 'column' }, title: { text: 'Auto rotation limit' }, s ...

  6. android中Textview 和图片同时显示时,文字省略号显示,图片自动靠到右边

    很纠结的一个标题,实在是不知道怎么去描述这个现象. 上图片吧,先看看需求是什么样的. 1.需求: ​ 视频与票的图标跟在标题后面显示,当标题过长时icon显示到省略号…后(textview省略号显示, ...

  7. mybaits中date类型显示时分秒(orcle数据库)

    <insert id="insert" parameterType="daSysLoginLog"> insert into DA_SYS_LOGI ...

  8. 【winform】如何在DateTimePicker中显示时分秒

    1. 首先属性里面的Format属性value设置为Custom(默认为Long) 2. 对应的Custom属性value设置为yyyy-MM-dd HH:mm:ss

  9. JSP中根据不同的条件显示不一样的格式

    在做项目中遇到这样的场景: 当查询到记录时,需要将记录的字段作为下拉列表,让用户选择使用,即显示的是下拉列表. 当没有查询到记录时,则让用户手工填写该值,即显示的是文本框. 前段jsp使用if标签如下 ...

随机推荐

  1. HTML5 界面元素 Canvas 參考手冊

    HTML5 界面元素 Canvas 參考手冊 太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致"创作公用协 ...

  2. 最快的方式清除Chrome浏览器DNS缓存

    最快的方式就是直接数据url,然后清除不须要的dns缓存. chrome://net-internals/#dns 一般步骤.要经过下列几项. Chrome - > 扳手 - > 选项 - ...

  3. Nginx下部署Laravel项目

    Nginx下部署Laravel项目 标签(空格分隔): php Nginx配置文件 listen 80 default_server; #listen [::]:80 default_server i ...

  4. C#篇(三)——函数传参之引用类型和值类型

    首先应该认清楚在C#中只有两种类型: 1.引用类型(任何称为"类"的类型) 2.值类型(结构或枚举) 先来认识一下引用类型和值类型的区别: 函数传参之引用类型: 1.先来一个简单的 ...

  5. OpenGL编程逐步深入(七)旋转变换

    准备知识 这一节我们来看一下旋转变换.旋转变换指的是给我们一个指点的点和角度,我们需要绕着过该点的轴线將对象旋转对应的角度.这里我们只改变X/Y/Z中的两个分量,第三个分量保持不变.这意味着我们的图形 ...

  6. SVN: repository browser 库浏览器

    SVN: repository browser  库浏览器 -----如果不想全部下载,可以通过repository browser  库浏览器 从库中选择要下载的文件夹内容下载(svn针对性下载)

  7. dedecms4张关键表解析之2

    4张核心表的具体情况: 1.第一张表:dede_arctype  栏目表 字段解析: topid:上一级的id(0表示为顶级,1表示为下一级....) typename: 栏目名称 typedir:栏 ...

  8. 在Ubuntu上创建一个可以启动的U盘

    1.概观 使用可启动的Ubuntu USB盘,您可以: 安装或升级Ubuntu 在不触及PC配置的情况下测试Ubuntu桌面体验 在借来的机器或网吧上启动到Ubuntu 使用USB盘上默认安装的工具来 ...

  9. 3065: 带插入区间K小值_树套树_替罪羊树_权值线段树

    经过周六一天,周一3个小时的晚自习,周二2个小时的疯狂debug,终于凭借自己切掉了这道树套树题. Code: #include <cstdio> #include <algorit ...

  10. javascript--记忆函数

    function memory(val) { if(!memory.cached) {//判断是否创建了缓存 memory.cached = {}; } if(memory.cached[val] ! ...