如何编写Javascript用户脚本将Azure资源图表UTC时间转换为本地时间

前置准备 #

• 在你使用的Chrome/Edge/Firefox浏览器的官方扩展商店，搜索安装Tampermonkey（油猴脚本管理器），安装完成后浏览器右上角会显示油猴扩展图标

使用步骤 #

1. 点击浏览器右上角的油猴图标，选择「添加新脚本」
2. 清空编辑器内默认生成的所有代码，将下方完整脚本代码全部粘贴替换
3. 按下Ctrl+S（Mac系统按Command+S）保存脚本，之后打开Azure资源页面即可自动生效，所有图表x轴的UTC时间会自动转换为你设备的本地时间展示

适配说明 #

你提到的Azure资源图表时间展示示例如下：

脚本已完全适配该Highcharts类型x轴时间标签结构，无需修改任何参数即可直接使用，同时支持页面动态刷新/切换时间范围后的自动转换。

完整脚本代码 #

// ==UserScript==
// @name         Azure图表UTC转本地时间
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  将Azure资源图表的UTC时间转换为本地时间展示
// @match        *://*.azure.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    // 时间转换函数
    function utcToLocal(timeStr) {
        let utcDate;
        // 匹配两种格式：YYYY-MM-DD 或者 MM-DD HH:mm
        if (/^\d{4}-\d{2}-\d{2}$/.test(timeStr.trim())) {
            utcDate = new Date(timeStr.trim() + 'T00:00:00Z');
        } else if (/^\d{2}-\d{2} \d{2}:\d{2}$/.test(timeStr.trim())) {
            // 短日期默认补全当前年份，跨年场景可手动修改为对应年份
            const year = new Date().getFullYear();
            utcDate = new Date(`${year}-${timeStr.trim()}Z`);
        } else {
            // 格式不匹配直接返回原内容
            return timeStr;
        }
        // 格式化为本地时间，和原展示格式保持一致
        const month = (utcDate.getMonth() + 1).toString().padStart(2, '0');
        const day = utcDate.getDate().toString().padStart(2, '0');
        const hour = utcDate.getHours().toString().padStart(2, '0');
        const minute = utcDate.getMinutes().toString().padStart(2, '0');
        // 如果原内容是日期（无时间）则返回本地日期，否则返回月日时分
        if (/^\d{4}-\d{2}-\d{2}$/.test(timeStr.trim())) {
            return `${utcDate.getFullYear()}-${month}-${day}`;
        } else {
            return `${month}-${day} ${hour}:${minute}`;
        }
    }
    // 转换所有时间标签
    function convertAllTimes() {
        const timeLabels = document.querySelectorAll('.highcharts-xaxis-labels text');
        timeLabels.forEach(label => {
            // 避免重复转换
            if (label.dataset.converted === 'true') return;
            const originalText = label.textContent;
            const localText = utcToLocal(originalText);
            if (localText !== originalText) {
                label.textContent = localText;
                label.dataset.converted = 'true';
            }
        });
    }
    // 页面加载完成后执行一次
    window.addEventListener('load', convertAllTimes);
    // 每2秒检测一次，适配动态加载/切换时间范围的场景
    setInterval(convertAllTimes, 2000);
})();

注意事项 #

• 脚本仅在本地修改页面展示的文本内容，不会修改Azure平台的原始数据，不会影响任何平台功能
• 如果后续Azure页面结构更新导致脚本失效，调整对应元素选择器即可恢复使用
• 如果展示的是跨年的历史数据，手动修改脚本中补全年份的数值为对应年份即可正常转换

内容的提问来源于stack exchange，提问作者shadowz1337