在Google圖表中更改表格標題的背景顏色

Question

有沒有辦法更改Google圖表中標題行（和行）的整個背景顏色？

他們在文檔中說您可以使用以下方法進行操作：

dataTable.setCell(22, 2, 15, 'Fifteen', {style: 'font-style:bold; font-size:22px;'}); 

但是我需要根據使用PHP從數據庫中獲得的一些值來動態地更改顏色。

目前這是我的工作代碼（不更改任何樣式）

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

<?php foreach($table['TITLES'] as $title) { ?>

data.addColumn('string', '<?php echo $title['TITLE_TEXT']; ?>');

<?php } ?>

<?php foreach($table['ROWS'] as $row) {

    $cols = "";
    foreach($row['COLS'] as $col)
        $cols .= "'".$col['VALUE']."',";
    $cols = rtrim($cols,",");

?>

data.addRow([<?php echo $cols; ?>]);

<?php } ?>

var table = new google.visualization.Table(document.getElementById('chart_div_<?php echo $item; ?>'));
table.draw(data, {showRowNumber: true});

任何幫助將不勝感激！

Answer 1

使用表格可視化，您可以通過幾種不同的方式控制顏色：

1. 使用cssClassNames選項（請參閱可用選項 ）。 這使您可以為各種不同的表格元素設置自己的類，然后可以使用CSS隨意設置樣式。
2. 設置單個單元格的style屬性。
3. 設置單個單元格的className屬性。

使用后兩種方法，如果要使它們與默認值不同（或與使用第一種方法應用的任何自定義樣式不同），可以分別對單元格設置樣式。

您還可以使用一些格式化程序來調整表格中單元格的外觀（ ColorFormatter可能會幫助您）。

Answer 2

創建一個選項變量，然后在圖表聲明中使用。

var options = {
  title: 'Markup by Period',
  legend:'bottom',
  hAxis: {title: 'Period',  titleTextStyle: {color: 'black'}} ,
  vAxis: {title: 'Amount',  titleTextStyle: {color: 'black'}}  ,
  width:400,
  height:250,
  backgroundColor: '#F4F4F4',
  chartArea:{width:300, left:60}};

var chart = new google.visualization.LineChart(document.getElementById('chart_div2'));

// You can pass the options array in draw method.
chart.draw(data, options);

那： backgroundColor：'＃F4F4F4'，

[編輯]

也許這個答案可以幫助您： Google圖表背景色

對不起我的英語不好

Answer 3

function drawSettingsTable() {
    document.settingsData = new google.visualization.DataTable();
    document.settingsData.addColumn('string', 'Setting');
    document.settingsData.addColumn('string', 'Current Value');
    document.settingsData.addColumn('string', 'Meaning');
    document.settingsData.addRows(
                [["          ", "         ", "                  "],
                ["           ", "         ", "                  "],
                ["           ", "         ", "                  "],
                ["           ", "         ", "                  "]
            ]
            );
    document.settingsTable = new google.visualization.Table(document.getElementById('settingsDiv'));
    document.settingsTable.draw(document.settingsData, {
        showRowNumber: false,
        allowHtml: true,
        width: "100%",
        cssClassNames: {headerRow:'columnTitle'}
    });

並在CSS文件中使用所需的適當領帶創建類.columnTitle，例如：

.columnTitle {
          font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
          font-size: 14px; 
          color:white;
          background-color: #607A75
      }