樣式谷歌圖表表格

Question

我想添加CSS樣式到谷歌圖表表格。我嘗試這樣做：

https://developers.google.com/chart/interactive/docs/gallery/table#customproperties

在第一個單元格（麥克），但沒有奏效。我在options變量中設置了allowHtml爲true。我怎樣才能改變單個單元格的背景，文字顏色等？謝謝。

<script type="text/javascript"> 
     google.load('visualization', '1', {packages:['table']}); 
     google.setOnLoadCallback(drawTable); 
     function drawTable() { 
      var data = new google.visualization.DataTable(); 
      data.addColumn('string', 'Employee Name'); 
      data.addColumn('date', 'Start Date'); 
      data.addRows(3); 
      data.setCell(0, 0, 'Mike', {style: 'background-color:red;'}); 
      data.setCell(0, 1, new Date(2008, 1, 28)); 
      data.setCell(1, 0, 'Bob'); 
      data.setCell(1, 1, new Date(2007, 5, 1)); 
      data.setCell(2, 0, 'Alice'); 
      data.setCell(2, 1, new Date(2006, 7, 16)); 

      var options = { 
       allowHtml: true 
      }; 

      // Create a formatter. 
      // This example uses object literal notation to define the options. 
      var formatter = new google.visualization.DateFormat({formatType: 'long'}); 

      // Reformat our data. 
      formatter.format(data, 1); 

      // Draw our data 
      var table = new google.visualization.Table(document.getElementById('dateformat_div')); 
      table.draw(data, options); 
     } 
    </script> 

Answer 1

我如何可以改變背景，文字顏色等的單個細胞的？謝謝。

Per @ Bondye的評論，答案在開發人員指南中找到。

https://developers.google.com/chart/interactive/docs/examples#custom_table_example

定義符合條件的樣式規則：

<style> 
.orange-background { 
    background-color: orange; 
    } 

.orchid-background { 
    background-color: orchid; 
} 

.beige-background { 
background-color: beige; 
    } 
</style> 

繪製時將它們應用到表中。

var cssClassNames = { 
'headerRow': 'italic-darkblue-font large-font bold-font', 
'tableRow': '', 
'oddTableRow': 'beige-background', 
'selectedTableRow': 'orange-background large-font', 
'hoverTableRow': '', 
'headerCell': 'gold-border', 
'tableCell': '', 
'rowNumberCell': 'underline-blue-font'}; 

var options = {'showRowNumber': true, 'allowHtml': true, 'cssClassNames': cssClassNames}; 

var data = new google.visualization.DataTable(); 

//... add data here ... 

var table = new google.visualization.Table(container); 
table.draw(data, options);