（谷歌图表）如何使堆积柱形图与小时、分钟和秒一起工作？

Question

我试图在条形图上总结两个条形的分钟数，但它会中断。 jsfiddle

我以Stacked column charts 中的示例为基础，但我无法让它与“H: i: s”一起使用

这是我的代码

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


    function drawChart() {

 var dtos= [];
 var data = google.visualization.arrayToDataTable([
        ['','preparation time ', 'time when he retired', 
          { role: 'annotation' } ],
        ['box 1',  '00:43:22',  '00:03:22',  ''],
        ['box 2',  '00:13:22', '00:73:22' , ''],
        ['box 3',  '00:23:22', '00:53:22', '']
      ]);

        
   var options = {
            height: 350,
           isStacked: true
          };

  var chart = new google.charts.Bar(document.getElementById('chart_div'));
           //chart.draw(data, options);
          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>

谢谢。

Answer 1

您可以使用'timeofday' 列，请参阅working with timeofday。

DataTable timeofday 列数据类型采用由 3 或 4 个数字组成的数组，分别表示小时、分钟、秒和可选的毫秒。使用 timeofday 与使用 date 和 datetime 不同，因为这些值不是特定于日期的，而 date 和 datetime 总是指定一个日期。例如，上午 8:30 的时间是：[8, 30, 0, 0]，第 4 个值是可选的（[8, 30, 0] 将输出相同的 timeofday 值）。

用于绘制图表的数据表将类似于以下...

  var data = google.visualization.arrayToDataTable([
    ['', 'time of ', 'retirar', {role: 'annotation', type: 'string'}],
    ['Caja 1', [0, 43, 22], [0, 3, 22], ''],
    ['Caja 2', [0, 13, 22], [0, 73, 22], ''],
    ['caja 3', [0, 23, 22], [0, 53, 22], '']
  ]);

请参阅以下工作 sn-p...

var GoogleColumnBasic = function() {
  var _googleColumnBasic = function() {
    google.charts.load('current', {
      packages: ['corechart']
    }).then(drawChart);

    function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['', 'time of ', 'retirar', {role: 'annotation', type: 'string'}],
        ['Caja 1', [0, 43, 22], [0, 3, 22], ''],
        ['Caja 2', [0, 13, 22], [0, 73, 22], ''],
        ['caja 3', [0, 23, 22], [0, 53, 22], '']
      ]);

      var options = {
        height: 350,
        isStacked: true,
        colors: ['#4285f4', '#a1c2fa'],
        theme: 'material',
        chartArea: {
          left: 64,
          top: 48,
          right: 32,
          bottom: 64,
          height: '100%',
          width: '100%'
        },
        height: '100%',
        legend: {
          position: 'top'
        },
        width: '100%'
      };

      var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
      chart.draw(data, (options));
    }
  }
  return {
    init: _googleColumnBasic
  }
}();
GoogleColumnBasic.init();

html, body {
  height: 100%;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
}

#chart_div {
  height: 100%;
  min-height: 400px;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

---

注意事项

1. jsapi 加载程序已被弃用，不应再使用。
   而是使用新的loader.js
<script src="https://www.gstatic.com/charts/loader.js"></script>
   这只会改变load 语句，见上面的sn-p。

2. 不推荐使用材质图表。 (google.charts.Bar)
   它们不适用于'timeofday' 列，
   他们不支持列角色，例如'annotation',
   而且许多图表选项根本不起作用，请参阅Tracking Issue for Material Chart Feature Parity
   相反，我们可以在经典图表上使用选项 --> theme: 'material' (google.visualization.ColumnChart)