Tạo biểu đồ Google Bảng

Question

Tôi đang cố gắng thêm kiểu CSS vào Bảng xếp hạng của Google. Tôi cố gắng này:

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

vào ô đầu tiên (Mike) nhưng nó đã không làm việc. Tôi đặt allowHtml thành true trong biến tùy chọn. Làm cách nào để thay đổi màu nền, màu văn bản, v.v. của từng ô? Cảm ơn bạn.

<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

Làm thế nào tôi có thể thay đổi nền, màu chữ, vv của các tế bào cá nhân? Cảm ơn bạn.

Theo nhận xét của @ Bondye, câu trả lời được tìm thấy trong hướng dẫn dành cho nhà phát triển.

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

Xác định quy tắc phong cách phù hợp với tiêu chí của bạn:

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

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

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

Áp dụng chúng để bàn khi rút ra.

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