Styling Google Charts Tabella

Question

Sto tentando di aggiungere lo stile CSS a una tabella di Google Charts. Ho provato questo:

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

sulla prima cella (Mike), ma non ha funzionato. Ho impostato allowHtml su true nella variabile options. Come posso cambiare lo sfondo, il colore del testo, ecc. Delle singole celle? Grazie.

<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

Come posso cambiare lo sfondo, colore del testo, ecc delle singole celle? Grazie.

Per il commento di @ Bondye, la risposta si trova nella guida per gli sviluppatori.

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

Definire regole di stile con i tuoi criteri:

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

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

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

applicarli al tavolo quando viene disegnata.

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