Google Apps脚本：TableChart-如何使用css类名称 [英] Google Apps Script: TableChart - How to use cssClassNames

问题描述

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

我发现可以使用setOption函数来实现这一点，但我还无法验证是否可以修改以下属性：

• 页眉颜色
• 文本对齐
• 文本换行：换行

这reference表示我们有以下配置选项here。

其中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();  
}

应如何使用cssClassNames参数更改其文本颜色、背景颜色？它看起来和我所知道的普通的css有点不同。或者是否有其他方法可以修改表格格式？

推荐答案

cssClassNames设置方法似乎正确，
并且在典型的html示例中运行良好，如下所示...

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

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

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>

这篇关于Google Apps脚本：TableChart-如何使用css类名称的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！