highcharts中的x轴如何显示时分秒时间格式

简介: highcharts中的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
            }
        } ]
    });
    }
相关文章
|
小程序
微信小程序:本地开发环境和线上环境配置
微信小程序:本地开发环境和线上环境配置
1235 0
|
SQL 数据库 开发者
PyCharm社区版够用吗
PyCharm社区版够用吗
2167 0
【安装教程】【Visio2019】(附带安装包下载)
【安装教程】【Visio2019】(附带安装包下载)
7164 0
【安装教程】【Visio2019】(附带安装包下载)
|
5月前
|
人工智能 API
阿里云百炼API-KEY在哪查询?如何获取阿里云AI百炼大模型的API-KEY?
阿里云百炼是阿里云推出的AI大模型平台,用户可通过其管理控制台获取API-KEY。需先开通百炼平台及大模型服务,即可创建并复制API-KEY。目前平台提供千万tokens免费额度,详细操作流程可参考官方指引。
|
人工智能 自然语言处理 搜索推荐
gemini国内能用吗?请收下这份gemini使用攻略!
在当今技术迅猛发展的时代,人工智能(AI)语言模型已经成为一股变革性的力量,推动着从自然语言处理到对话生成等广泛应用领域的创新。在众多杰出的AI语言模型中,Gemini以其卓越的性能和广泛的用途脱颖而出,备受推崇。作为谷歌旗下的多模态AI巨头,Gemini融合了最先进的语言处理技术,为用户提供了无与伦比的语言理解和生成能力。
|
前端开发 C++ iOS开发
几款主流好用的markdown编辑器介绍
几款主流好用的markdown编辑器介绍
1179 1
|
机器学习/深度学习 人工智能 自然语言处理
【深度学习】探讨最新的深度学习算法、模型创新以及在图像识别、自然语言处理等领域的应用进展
深度学习作为人工智能领域的重要分支,近年来在算法、模型以及应用领域都取得了显著的进展。以下将探讨最新的深度学习算法与模型创新,以及它们在图像识别、自然语言处理(NLP)等领域的应用进展。
741 6
|
人工智能 自然语言处理 数据可视化
什么是AIGC?如何使用AIGC技术辅助办公?
2分钟了解AIGC技术及其如何提高日常办公效率!
4184 4
什么是AIGC?如何使用AIGC技术辅助办公?
|
存储 网络协议 算法
OSPF中的Link-State Database (LSDB): 概述与深入解析
OSPF中的Link-State Database (LSDB): 概述与深入解析
1903 1

热门文章

最新文章