0

有没有办法改变谷歌图表中标题行（和行）的整个背景颜色？

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

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

任何帮助将不胜感激！

4

3 回答 3

2

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

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

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

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

于 2013-09-23T23:09:46.490 回答
1

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

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'，

[编辑]

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

对不起我的英语不好

于 2013-09-23T20:47:09.013 回答
1 
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
      }
于 2014-10-03T02:25:36.477 回答