在谷歌图表中更改表格标题背景颜色

Change table header background color in Google Charts

本文关键字：表格 标题 背景 颜色 谷歌      更新时间：2023-09-26

有没有办法更改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});

任何帮助将不胜感激！

使用表格可视化效果，您可以通过几种不同的方式控制颜色：

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

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

还有一些格式化程序可用于调整表中单元格的外观（ColorFormatter 可能会对您有所帮助）。

创建一个选项变量，然后在图表声明中使用。

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

那： 背景颜色： '#F4F4F4'，

[编辑]

也许这个答案可以帮助你： 谷歌图表背景颜色

对不起我的英语

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
      }
相关文章：