Google Charts API 如何在以秒数形式传递值时将条形图值显示为小时:分钟:秒

Question

我有一个组合图，其中的条形显示每周平均反应时间秒数。我想将值显示为 HH:MM:SS 或 MM:SS 而不仅仅是条形上方的秒数。在示例中，最后一个值 849 秒应显示为 00:14:09。理想情况下，如果时间少于 1 小时，则仅显示 14:09

JavaScript

 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: "stringify",
             sourceColumn: 1,
             type: "string",
             role: "annotation"
         },
         2,
         {
             calc: "stringify",
             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);

我尝试使用我在网站上找到的代码将秒转换为 HH:MM:SS 格式，但我不知道如何正确实现它。

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(":")
}

Answer 1

从文档，它指导显示格式化的值

1. 定义格式化函数。要获取该值，您需要

   getValue(rowIndex, columnIndex)

   函数。

var getFormattedReactionTime = (column, dataTable, row) => {
  return toHHMMSS(dataTable.getValue(row, column));
};

2. 将格式化函数传递到

   calc

   属性，列索引为

   avgReactionTime

   值。

view.setColumns([
    0,
    1,
    {
      calc: getFormattedReactionTime.bind(undefined, 1),
      sourceColumn: 1,
      type: 'string',
      role: 'annotation',
    },
    ...
]);

JS 演示 @ StackBlitz