Google Apps 脚本：TableChart - 如何使用 cssClassNames

Question

我正在尝试修改已添加到 Google 幻灯片的表格图表的格式。

我发现 setOption 将是用于实现此目的的函数，但我无法验证是否可以修改以下属性：

• 标题颜色
• 文本对齐
• 文本环绕：环绕

此 < a href="https://developers.google.com/apps-script/reference/charts/table-chart-builder#setOption(String,Object)" rel="nofollow noreferrer">参考 表明我们有以下配置选项位于此处。

其中 cssClassNames 被提到为

一个对象，其中每个属性名称描述一个表元素，并且 属性值是一个字符串

我尝试将其应用到我的代码中：

function TablesConstructor(){
  //slide_obj is an object that contains all the information needed.
  //Let's open the file
  var slide_file = SlidesApp.openById("your_slide_id");
  
  //Get the Slides
  var slides = slide_file.getSlides();
  var slide_elements = slides[0].getPageElements();
         
  //Create Data Table chart
  var table_data = Charts.newDataTable()
  .addColumn(Charts.ColumnType.NUMBER, "Col1")
  .addColumn(Charts.ColumnType.NUMBER, "Col2")
  .addColumn(Charts.ColumnType.NUMBER, "Col3")
  .addColumn(Charts.ColumnType.NUMBER, "Col4")
  
  //Populate data table chart with the 2D array inside my object   
  for(var i = 0; i < 4; i++){
    table_data.addRow([(i + 1),
    (i + 2), 
    (i + 3), 
    (i + 4), 
    );
  }
  
  var cssClassNames = {
    headerRow: 'italic-darkblue-font large-font bold-font'
  };
  
  //Build the table
  var table_chart = Charts.newTableChart()
  .setOption('cssClassNames', cssClassNames)
  .useAlternatingRowStyle(false)
  .setDataTable(table_data)
  .setDimensions(720, 480).build();

  slide_elements[0].asShape().replaceWithImage(table_chart.getAs('image/jpeg'));
 
  slide_file.saveAndClose();  
}

How should the cssClassNames 参数用于更改其文本颜色、背景颜色？它看起来与我所知道的常规 CSS 有点不同。或者有其他方法可以修改表格格式吗？

Answer 1

设置 cssClassNames 的方法似乎是正确的，
并且在典型的 html 示例中工作正常，如下所示...

只需确保您的 css 在页面上的某个位置可用...

google.charts.load('current', {
  packages: ['table']
}).then(function () {
  var data = new google.visualization.arrayToDataTable([
    ['Category', 'value'],
    ['a', 2924],
    ['b', 2075],
    ['c', 2516],
    ['d', 2153],
    ['e', 2348],
    ['f', 1925]
  ]);
  var container = document.getElementById('chart');
  var chart = new google.visualization.Table(container);
  chart.draw(data, {
    cssClassNames: {
      headerRow: 'italic-darkblue-font large-font bold-font'
    }
  });
});

.italic-darkblue-font {
  color: darkblue;
  font-style: italic;
}

.large-font {
  font-size: 24px;
}

.bold-font {
  font-weight: bold;
}

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