如何在Google Chart的vAxis将百秒数值转换为分:秒,百分秒格式显示？

核心思路 #

通过**自定义纵轴刻度（ticks）**将百秒数值转换为mm:ss,ff格式（如4:40,85），同时可配合数据格式化器让 tooltip 也显示对应时长。

步骤1：编写百秒转时长的工具函数 #

添加一个JavaScript函数，将百秒数计算并格式化为目标时长格式：

function formatHunsToTime(huns) {
    const totalSeconds = Math.floor(huns / 100);
    const minutes = Math.floor(totalSeconds / 60);
    const seconds = totalSeconds % 60;
    const centiseconds = huns % 100;
    // 补零确保两位数显示，比如秒数为5时显示05，百分秒为3时显示03
    return `${minutes}:${seconds.toString().padStart(2, '0')},${centiseconds.toString().padStart(2, '0')}`;
}

步骤2：动态生成自定义纵轴刻度 #

根据你设置的纵轴范围（0到20000），动态生成带格式化标签的刻度：

// 在创建ChartWrapper之前添加这段代码
const minHuns = 0;
const maxHuns = 20000;
const tickCount = 5; // 可根据需求调整刻度数量
const tickInterval = (maxHuns - minHuns) / (tickCount - 1);
const customTicks = [];

for (let i = 0; i < tickCount; i++) {
    const value = minHuns + i * tickInterval;
    customTicks.push({
        value: value,
        label: formatHunsToTime(value)
    });
}

步骤3：修改ChartWrapper配置 #

更新vAxis选项，移除原有的format，替换为自定义ticks，并修改标题：

var wrapper = new google.visualization.ChartWrapper({
    chartType: 'LineChart',
    dataTable: data_val,
    options: {
        'legend': 'bottom',
        'colors': ['#D70005'], 
        'chartArea': {left: 100, top: 10, width: 450}, 
        'vAxis': {
            'viewWindow': {max: 20000, min: 0},
            title: '时长',
            ticks: customTicks // 使用自定义刻度
        },
        'hAxis': {
            title: '日期'
        },
        'pointSize': 6
    },
    containerId: 'columnchart'
});

可选：让Tooltip也显示时长格式 #

如果希望鼠标悬停时的提示框也显示时长而非百秒数，添加数据格式化器：

// 在创建data_val之后添加
const timeFormatter = new google.visualization.NumberFormat({
    formatter: function(value) {
        return formatHunsToTime(value);
    }
});
timeFormatter.format(data_val, 1); // 格式化第二列（百秒数列）

完整修改后的代码 #

function drawChart() {
    // 百秒转时长的工具函数
    function formatHunsToTime(huns) {
        const totalSeconds = Math.floor(huns / 100);
        const minutes = Math.floor(totalSeconds / 60);
        const seconds = totalSeconds % 60;
        const centiseconds = huns % 100;
        return `${minutes}:${seconds.toString().padStart(2, '0')},${centiseconds.toString().padStart(2, '0')}`;
    }

    var data_val = google.visualization.arrayToDataTable([
        ['Date', 'huns of secs'],
        <?php
        $select_query = "SELECT * FROM records WHERE id_Race='10' GROUP BY date_record ORDER BY date_record ";
        $query_result = mysqli_query($connection, $select_query);
        while ($row_val = mysqli_fetch_array($query_result)) {
            echo "['" . $row_val['date_record'] . "'," . $row_val['total_huns'] . "],";
        }
        ?>
    ]);

    // 格式化tooltip显示时长
    const timeFormatter = new google.visualization.NumberFormat({
        formatter: function(value) {
            return formatHunsToTime(value);
        }
    });
    timeFormatter.format(data_val, 1);

    // 生成自定义纵轴刻度
    const minHuns = 0;
    const maxHuns = 20000;
    const tickCount = 5;
    const tickInterval = (maxHuns - minHuns) / (tickCount - 1);
    const customTicks = [];

    for (let i = 0; i < tickCount; i++) {
        const value = minHuns + i * tickInterval;
        customTicks.push({
            value: value,
            label: formatHunsToTime(value)
        });
    }

    var wrapper = new google.visualization.ChartWrapper({
        chartType: 'LineChart',
        dataTable: data_val,
        options: {
            'legend': 'bottom',
            'colors': ['#D70005'], 
            'chartArea': {left: 100, top: 10, width: 450}, 
            'vAxis': {
                'viewWindow': {max: 20000, min: 0},
                title: '时长',
                ticks: customTicks
            },
            'hAxis': {
                title: '日期'
            },
            'pointSize': 6
        },
        containerId: 'columnchart'
    });

    wrapper.draw();
}

内容的提问来源于stack exchange，提问作者N.K.