highcharts中的x轴如何显示时分秒时间格式
上一篇文章写道:三分钟上手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轴如何显示时分秒时间格式的更多相关文章
- iOS开发之--实现倒计时显示时分秒
这段时间写公司的一个外包项目,需要用到倒计时:需要显示时分秒,通过在网上搜集资料,找到了2中方法,我把这两种方法结合起来,可以很好的满足这个需求: 1.创建一个类继承自UIlabel,用来展示时分秒的 ...
- C# DateTimePicker控件如何精确设置显示时分秒
项目中需要使用DateTimePicker空间选定当前的时间,但是这个空间默认显示到天,如何能让它显示具体的小时和分钟呢? 我们看到有一个Format属性,Format令我们想到格式化,有这几种格式 ...
- 2018.2.2 java中的Date如何获取 年月日时分秒
package com.util; import java.text.DateFormat; import java.util.Calendar; import java.util.Date; pub ...
- 在jqueryEasyUI界面将时间以日期加时分秒的格式显示
问题描写叙述: oracle 10G中用户表有一个字段是日期型.数据格式为yyyy-MM-dd HH:mm:ss,前端显示时仅仅能显示成yyyy-MM-dd 后面的 HH:mm:ss不显示. 经过一番 ...
- highcharts中把X轴的名字竖着显示
Highcharts.chart('container', { chart: { type: 'column' }, title: { text: 'Auto rotation limit' }, s ...
- android中Textview 和图片同时显示时,文字省略号显示,图片自动靠到右边
很纠结的一个标题,实在是不知道怎么去描述这个现象. 上图片吧,先看看需求是什么样的. 1.需求: 视频与票的图标跟在标题后面显示,当标题过长时icon显示到省略号…后(textview省略号显示, ...
- mybaits中date类型显示时分秒(orcle数据库)
<insert id="insert" parameterType="daSysLoginLog"> insert into DA_SYS_LOGI ...
- 【winform】如何在DateTimePicker中显示时分秒
1. 首先属性里面的Format属性value设置为Custom(默认为Long) 2. 对应的Custom属性value设置为yyyy-MM-dd HH:mm:ss
- JSP中根据不同的条件显示不一样的格式
在做项目中遇到这样的场景: 当查询到记录时,需要将记录的字段作为下拉列表,让用户选择使用,即显示的是下拉列表. 当没有查询到记录时,则让用户手工填写该值,即显示的是文本框. 前段jsp使用if标签如下 ...
随机推荐
- 由动态库文件dll生成lib库文件
本文基于OpenBlas的编译和安装.来说明怎样从一个dll文件生成lib库文件. 參考OpenBlas的说明"Howto generate import library for MingW ...
- win8装win7出现蓝屏的解决方式
今天用PE装系统,在进入PE前会出现蓝屏: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMzAxODcyMQ==/font/5a6L5L2T/fo ...
- 23.STL容器小结
- 用jquery控制表格奇偶行及活动行颜色
虽然jquery流行已经很多年了,一直都感觉很难,也没有花时间去学习它,只是偶尔哪天心血来潮了去看一点点,时隔多日又会忘得一干二净.最近用到表格奇偶行不同色,不得不去再看jquery,虽然感觉还是难, ...
- fill,fill-n,memset的区别
这里在网上搜集归纳了一个总结 memset函数 按照字节填充某字符 在头文件<string.h>中 因为memset函数按照字节填充,所以一般memset只能用来填充char型数组,(因为 ...
- 我的PHP学习之路
由于工作中,做微信小程序需要我自己写一些后台代码.并且公司后台用的是php.所以我决定在周末和下班后抽空学习php.一开始,我想找一些入门视频来学,然后发现好像效率不是很好.不如看书来得痛快.(主要是 ...
- 编码问题异常处理:UnicodeDecodeError: 'gbk' codec can't...
作为编码问题集合: 2)UnicodeDecodeError: 'utf-8' codec can't decode byte 0xbd in position 0: invalid start by ...
- 题解 P3372 【【模板】线段树 1】(珂朵莉树解法)
这道题可以用珂朵莉树做,但是由于数据比较不随机,而我也没有手写一颗平衡树,所以就被卡掉了,只拿了70分. 珂朵莉树是一种基于平衡树的(伪)高效数据结构. 它的核心操作是推平一段区间. 简而言之,就是把 ...
- 【Codeforces Round #421 (Div. 2) B】Mister B and Angle in Polygon
[题目链接]:http://codeforces.com/contest/820/problem/B [题意] 给你一个正n边形; 然后让你在这正n边行中选3个点,组成一个角; 找出角的大小和所给的角 ...
- 使用安卓手机连接win7的热点
转载自:http://bbs.tgbus.com/thread-2354596-1-1.html 附件下载 亲测可用: wifi信号是满格的