如何在Google Charts中将条形图秒数值显示为HH:MM:SS/MM:SS格式

你当前的问题是在生成图表标注时，直接使用了"stringify"来输出原始秒数，没有调用自定义的toHHMMSS转换函数。只需修改DataView中对应标注的计算逻辑，替换成调用转换函数的自定义方法即可：

关键修改部分 #

var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
    {
        // 替换stringify为自定义计算逻辑，调用toHHMMSS转换秒数
        calc: function(dataTable, rowIndex) {
            var seconds = dataTable.getValue(rowIndex, 1);
            return toHHMMSS(seconds);
        },
        sourceColumn: 1,
        type: "string",
        role: "annotation"
    },
    2,
    {
        // 若Reaction Goal也需要显示时间格式，同样修改此处
        calc: function(dataTable, rowIndex) {
            var seconds = dataTable.getValue(rowIndex, 2);
            return toHHMMSS(seconds);
        },
        sourceColumn: 2,
        type: "string",
        role: "annotationText"
    },
    3,
    {
        calc: "stringify",
        sourceColumn: 3,
        type: "string",
        role: "annotation"
    }
]);

完整修改后的代码 #

google.charts.load('current', { packages: ['corechart'] });
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
    var data = new google.visualization.DataTable();

    var jsonList = @(Json.Serialize(Model.listWeeklyWebLeadReactionTime))

    var title = 'Weekly Web Lead Reaction Time';

    data.addColumn('string', 'Week Of');
    data.addColumn('number', 'Avg Reaction Time');
    data.addColumn('number', 'Reaction Goal');
    data.addColumn('number', '% Change');

    data.addRows(jsonList.map((p) => {
        return [p.weekOf, p.avgReactionTime, p.reactionTimeGoal, p.reactionPercentChange];
    }));

    var toHHMMSS = (secs) => {
        var sec_num = parseInt(secs, 10)
        var hours = Math.floor(sec_num / 3600)
        var minutes = Math.floor(sec_num / 60) % 60
        var seconds = sec_num % 60

        return [hours, minutes, seconds]
            .map(v => v < 10 ? "0" + v : v)
            .filter((v, i) => v !== "00" || i > 0)
            .join(":")
    }

    var formatPercent = new google.visualization.NumberFormat({ pattern: '#.#%' });
    formatPercent.format(data, 3);

    var view = new google.visualization.DataView(data);
    view.setColumns([0, 1,
        {
            calc: function(dataTable, rowIndex) {
                var seconds = dataTable.getValue(rowIndex, 1);
                return toHHMMSS(seconds);
            },
            sourceColumn: 1,
            type: "string",
            role: "annotation"
        },
        2,
        {
            calc: function(dataTable, rowIndex) {
                var seconds = dataTable.getValue(rowIndex, 2);
                return toHHMMSS(seconds);
            },
            sourceColumn: 2,
            type: "string",
            role: "annotationText"
        },
        3,
        {
            calc: "stringify",
            sourceColumn: 3,
            type: "string",
            role: "annotation"
        }
    ]);
    var options = {
        interpolateNulls: true,
        title: title,
        titlePosition: 'out',
        isStacked: false,
        seriesType: "bars",
        vAxes: {
            0: {
                textPosition: 'out',
                viewWindowMode: 'pretty',
                title: "",
                viewWindow: { min: -5000, max: 5000 },
                gridlines: { color: 'lightgray' }
            },
            1: {
                textPosition: 'out',
                viewWindow: { min: -1, max: 1 },
                format: 'percent',
                gridlines: { color: 'transparent' }
            },
        },
        series: {
            0: {
                targetAxisIndex: 0,
                color: 'lightgray',
                annotations: {
                    alwaysOutside: true,
                    stem: {
                        color: 'gray',
                        length: 8
                    },
                    textStyle: {
                        color: 'gray',
                        fontSize: 11,
                        bold: false
                    },
                }
            },
            1: {
                targetAxisIndex: 0,
                color: 'purple',
                type: 'line',
                lineWidth: 1,
                lineDashStyle: [4, 4],
                pointSize: 0,
                highContrast: true,
                annotations: {
                    stem: {
                        color: 'transparent',
                        length: -30
                    },
                    textStyle: {
                        color: 'purple',
                        fontSize: 11,
                        bold: false,
                        format: '#,###'
                    },
                }
            },
            2: {
                targetAxisIndex: 1,
                color: 'red',
                type: 'line',
                lineWidth: 1,
                lineDashStyle: [4, 4],
                pointSize: 5,
                highContrast: true,
                annotations: {
                    stem: {
                        color: 'red',
                        length: 10
                    },
                    textStyle: {
                        color: 'red',
                        fontSize: 11,
                        bold: false,
                        format: '#%'
                    },
                }
            }
        },
        width: '100%',
        height: '450',

        legend: { position: 'top' },
        chartArea: {
            height: '100%',
            width: '100%',
            top: 48,
            left: 60,
            right: 60,
            bottom: 75
        },
    }

    var chart = new google.visualization.ComboChart(document.getElementById('WeeklyWebLeadReactionTime'));
    chart.draw(view, options);
}

说明 #

• 通过自定义calc函数，从DataTable中获取对应行的秒数值，传入toHHMMSS转换为HH:MM:SS或MM:SS格式后作为标注文本返回。
• 若Reaction Goal的标注也需要显示时间格式，按照同样逻辑修改对应的calc部分即可。

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