如何让Google Charts堆叠柱状图支持时分秒格式并正确求和？

你遇到的核心问题是Google Charts的堆叠柱状图需要数值型数据才能进行求和堆叠，但你传入的是H:i:s格式的字符串，图表无法识别这些字符串为可计算的数值，所以堆叠功能失效，也无法正确求和。下面是具体的解决方案：

关键思路 #

1. 将H:i:s格式的时间字符串转换为总秒数（或分钟数）——这是数值类型，图表可以对其进行堆叠计算；
2. 使用Google Charts的NumberFormat工具，将计算后的数值重新格式化为H:i:s格式，让图表上显示的还是用户友好的时间格式。

修正后的完整代码 #

var GoogleColumnBasic = function() {
  var _googleColumnBasic = function() {
    google.charts.load('visualization', '1.0', {'packages':['bar']});
    google.charts.setOnLoadCallback(drawChart);

    // 辅助函数：将H:i:s时间字符串转换为总秒数
    function timeToSeconds(timeStr) {
      const [hours, minutes, seconds] = timeStr.split(':').map(Number);
      // 注意：修复你代码中的无效时间（比如00:73:22，分钟不能超过59）
      return hours * 3600 + minutes * 60 + seconds;
    }

    // 辅助函数：将总秒数转换回H:i:s格式
    function secondsToTime(totalSeconds) {
      const hours = Math.floor(totalSeconds / 3600);
      const remainingSeconds = totalSeconds % 3600;
      const minutes = Math.floor(remainingSeconds / 60);
      const seconds = remainingSeconds % 60;
      // 补零确保格式统一
      return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
    }

    function drawChart() {
      // 原始时间数据
      const rawData = [
        ['box 1', '00:43:22', '00:03:22'],
        ['box 2', '00:13:22', '01:13:22'], // 修复了00:73:22的无效时间
        ['box 3', '00:23:22', '00:53:22']
      ];

      // 转换为数值型数据（总秒数），同时保留原时间作为注释
      const chartData = rawData.map(row => {
        return [
          row[0],
          timeToSeconds(row[1]),
          timeToSeconds(row[2]),
          // 注释显示两个时间的总和
          `${row[1]} + ${row[2]} = ${secondsToTime(timeToSeconds(row[1]) + timeToSeconds(row[2]))}`
        ];
      });

      // 添加表头
      chartData.unshift(['', 'preparation time', 'time when he retired', { role: 'annotation' }]);

      const data = google.visualization.arrayToDataTable(chartData);

      // 创建时间格式化器，将秒数转为H:i:s
      const timeFormatter = new google.visualization.NumberFormat({
        pattern: 'HH:mm:ss',
        valueFormatter: function(value) {
          return secondsToTime(value);
        }
      });

      // 对数值列应用格式化器
      timeFormatter.format(data, 1);
      timeFormatter.format(data, 2);

      const options = {
        height: 350,
        isStacked: true,
        // 确保工具提示显示格式化后的时间
        tooltip: {isHtml: true}
      };

      const chart = new google.charts.Bar(document.getElementById('chart_div'));
      chart.draw(data, google.charts.Bar.convertOptions(options));
    }
  }

  return {
    init: function() {
      _googleColumnBasic();
    }
  }
}();

GoogleColumnBasic.init();

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="chart_div"></div>

重要说明 #

1. 修复无效时间：你原来的代码中'00:73:22'是无效的（分钟数不能超过59），我将其调整为'01:13:22'，实际使用时请根据真实数据修正；
2. 数据转换逻辑：通过timeToSeconds把时间转成秒数，图表会基于这些数值进行堆叠求和；再通过secondsToTime和NumberFormat把数值转回时间格式，保证前端显示友好；
3. 注释优化：注释列显示了两个时间的总和，方便直观查看堆叠后的总时长。

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