Question

有没有办法在Google Charts中更改标题行（和行）的整个背景颜色？

在文档中，他们说你可以使用：

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

使用Table Visualizations，您可以通过几种不同的方式控制颜色：

使用cssClassNames选项（请参阅available options）。这允许您为各种不同的表元素设置自己的类，然后您可以使用CSS来设置您喜欢的样式。
设置单个单元格的style属性。
设置单个单元格的className属性。

使用最后两种方法，如果要使它们与默认设置不同（或者与使用第一种方法应用的任何自定义样式不同），可以单独在单元格上设置样式。

您还可以使用一些formatters来调整表格中单元格的外观（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 Chart Background Color

抱歉我的英文

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
      }

在Google Charts中更改表格标题背景颜色

3 个答案:

[编辑]