(Google 图表) 如何使堆叠柱形图与小时、分钟和秒一起工作？

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。

The DataTable timeofday column data type takes an array of either 3 or 4 numbers, representing hours, minutes, seconds, and optionally milliseconds, respectively. Using timeofday is different than using date and datetime in that the values are not specific to a date, whereas date and datetime always specify a date. For example, the time 8:30am would be: [8, 30, 0, 0], with the 4th value being optional ([8, 30, 0] would output the same timeofday value).

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

  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 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>

注释

jsapi 加载程序已被弃用，不应再使用。
相反，使用新的 loader.js
<script src="https://www.gstatic.com/charts/loader.js"></script>
这只会更改 load 语句，请参阅上面的代码段。
不推荐使用material图表。 (google.charts.Bar)
它们不适用于 'timeofday' 列，
它们不支持 'annotation'、
等列角色许多图表选项根本不起作用，请参阅 Tracking Issue for Material Chart Feature Parity
相反，我们可以在经典图表 (google.visualization.ColumnChart)
上使用选项 --> theme: 'material'

(Google 图表) 如何使堆叠柱形图与小时、分钟和秒一起工作？

(Google Charts) How to make stacked column charts work with hours, minutes and seconds?

html

javascript

charts

google-visualization