Highcharts中x轴为时间时的设置

最新推荐文章于 2025-06-03 09:05:57 发布

原创最新推荐文章于 2025-06-03 09:05:57 发布 · 1.6w 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#Highcharts x轴时间

Highcharts学习专栏收录该内容

0 篇文章

订阅专栏

本文记录了在Highcharts中设置时间x轴的详细步骤和时间格式，包括second, minute, hour, day, week, month, year等不同时间单位的显示格式，方便日后查阅。" 45311663,5018727,VS2010配置WDK快速指南,"['Windows驱动开发', 'Visual Studio', 'C++', '开发工具']

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

最近项目需要使用Highcharts画图，就学习了一下，怕以后忘记了，记录一下。

$(function () {
        $('#container').highcharts({
            global:{
                useUTC:false
            },
            chart: {
                type: 'spline'

            },
            credits:{
                enabled:false
            },
            title: {
                text: '请求次数'
            },
            xAxis: {
                type: 'datetime',
                // maxZoom:24 * 3600 * 1000, // x轴总共显示的时间
                //min:<?=strtotime(date('Y-m-d'))?>,
                dateTimeLabelFormats: {
//                  minute: '%H:%M'
                    day: '%H:%M'

                }
            },
            yAxis: {
                title: {
                    text: '次数'
                },
                min:0
            },
            tooltip: {
                valueSuffix: '次数'
            },
            plotOptions: {
                spline: {
                    lineWidth: 2,
                    states: {
                        hover: {
                            lineWidth: 3
                        }
                    },
                    marker: {
                        enabled: false
                    },
                    // pointInterval: 300 * 1000, // 曲线每个点的间隔
                    // pointStart: Date.UTC(2014, 6, 10)
                }
            },
            series: [{
                name:'测试一下',
                data:[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,214,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,22,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,99,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
                ],
                pointInterval: 306000,
                pointStart: Date.UTC(2014, 6, 10,0,0,0),
                pointEnd:Date.UTC(2014,6,10,23,59,59),
                // pointEnd:Date.UTC(<?php date('Y , m, d',strtotime('-1 month'))?>, 0, 0, 0;?>)
            }],
 
        });
    });

一下是运行结果：

时间格式的设置：

--------------------------------------------------------

second: '%Y-%m-%d %H:%M:%S',
minute: '%Y-%m-%d %H:%M',
hour: '%Y-%m-%d %H:%M',
day: '%Y %m-%d',
week: '%Y %m-%d',
month: '%Y-%m',
year: '%Y'
--------------------------------------------------------
second: '%H:%M:%S',
minute: '%e. %b %H:%M',
hour: '%b/%e %H:%M',
day: '%e日/%b',
week: '%e. %b',
month: '%b %y',
year: '%Y'