如何在 Google 应用程序脚本中创建包含时间列的条形图

Question

我尝试使用 google 应用程序脚本创建一个堆叠条形图，其中有一列时间。就像下面的图表。

我创建了 google 应用程序脚本的以下代码。但是，它不起作用。

function createSample(){
  var data = Charts.newDataTable()
    .addColumn(Charts.ColumnType.STRING, "date")
    .addColumn(Charts.ColumnType.TIMEOFDAY, "A")  // TIMEOFDAY is not defined in google apps script
    .addColumn(Charts.ColumnType.TIMEOFDAY, "B")  // TIMEOFDAY is not defined in google apps script
    .addRow(["2/22", [10, 00, 00], [10, 00, 00]])
    .addRow(["2/23", [8, 00, 00], [8, 00,00]])
    .addRow(["2/24", [5, 00, 00], [5, 00, 00]])
    .build();
  
  var chart = Charts.newColumnChart()
    .setDataTable(data)
    .setStacked()
    .build();

}

我认为 google 图表可以表示带有时间列的条形图。但我不知道如何在 google 应用程序脚本中创建它。

Answer 1

用Google可视化绘制图表API

gs:

function showChartDialog() {
  var ui=HtmlService.createHtmlOutputFromFile('ah2').setHeight(500).setWidth(500);
  SpreadsheetApp.getUi().showModelessDialog(ui, 'Chart')
}

html:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script>google.charts.load('current', {'packages':['corechart','bar']});</script>
  </head>
  <body>
  <div id="cht"></div><input type="button" value="Draw" onClick="createSample();" />
  <script>
    function createSample(){
      var data = new google.visualization.DataTable();
      data.addColumn('date', "Date");
      data.addColumn('timeofday', "A"); 
      data.addColumn('timeofday', "B"); 
      data.addRow([new Date(2020,2,22),[22,00,00],[22,00,00]]);
      data.addRow([new Date(2020,2,23),[20,00,00],[20,00,00]]);
      data.addRow([new Date(2020,2,24),[17,00,00],[17,00,00]]);
      var options = {
        title: 'Column Chart',
        width: 600,
        height: 400,
        bar: { groupWidth: '75%' },
        isStacked: true
        };
      var chart=new google.visualization.ColumnChart(document.getElementById('cht'));
      chart.draw(data,options)
    }
  </script>
  </body>
</html>

如何在 Google 应用程序脚本中创建包含时间列的条形图

How to create a bar chart that has a column of time of day in Google apps script

charts

google-visualization

google-apps-script