Question

我在Google Visualization中创建了一个使用以下代码的表：

<html>
  <head>
      <script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1', {packages:['table']});
      google.setOnLoadCallback(drawTable);
      function drawTable() {
         var cssClassNames = {
    'headerRow': 'headerRow',
    'tableRow': 'tableRow'};
var options = {'allowHtml': true, 'cssClassNames': cssClassNames, 'alternatingRowStyle': true};
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Username');
        data.addColumn('number', 'Won');
        data.addColumn('number', 'Lost');
        data.addColumn('number', 'Win/Loss Ratio');
        data.addColumn('number', 'Goals For');
        data.addColumn('number', 'Goals Against');
        data.addColumn('number', 'Score');
        data.addRows([
          ['Mike', 22, 13, 0.63, 65, 30, 600],
          ['Andy', 25, 10, 0.71, 60, 18, 630],
          ['Steve', 5, 20, 0.20, 10, 50, 475],
          ['Chris', 40, 10, 0.80, 120, 20, 670],
          ['Jake', 15, 15, 0.50, 70, 50, 525],
        ]);
        var table = new google.visualization.Table(document.getElementById('table_div'));
        table.draw(data, {showRowNumber: true});
      }
    </script>
  </head>

  <body>
    <div id='table_div'></div>
  </body>
</html>

我希望能够使用CSS更改标题行和表行的格式，但我无法弄清楚如何执行此操作。我已经阅读了Configuration Options，但作为编码的相对新来者，这并没有帮助，需要一步一步地清楚解释。

具体来说，我将如何添加到上面的代码中，告诉图表使用我的自定义CSS。我会把什么放在我的主角？ CSS样式表。不确定是（对于标题）#headerRow { }还是.headerRow { }。

如果您有任何不同，可以通过自定义字段通过Wordpress插入此信息。

如果我在问题中没有说清楚，请跟进。欢呼声。

更新： @asgallant - 在更改为headerCell和tableCell时仍然无法正常工作。

我目前的代码是： HTML /使用Javascript：

<html>
  <head>
      <script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1', {packages:['table']});
      google.setOnLoadCallback(drawTable);
      function drawTable() {
         var cssClassNames = {
    headerCell: 'headerCell',
    tableCell: 'tableCell'};
var options = {'allowHtml': true, 'cssClassNames': cssClassNames, 'alternatingRowStyle': true};
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Username',{style: 'background-color:red;'});
        data.addColumn('number', 'Won');
        data.addColumn('number', 'Lost');
        data.addColumn('number', 'Win/Loss Ratio');
        data.addColumn('number', 'Goals For');
        data.addColumn('number', 'Goals Against');
        data.addColumn('number', 'Score');
        data.addRows([
          ['Mike', 22, 13, 0.63, 65, 30, 600],
          ['Andy', 25, 10, 0.71, 60, 18, 630],
          ['Steve', 5, 20, 0.20, 10, 50, 475],
          ['Chris', 40, 10, 0.80, 120, 20, 670],
          ['Jake', 15, 15, 0.50, 70, 50, 525],
        ]);
        var table = new google.visualization.Table(document.getElementById('table_div'));
        table.draw(data, {showRowNumber: true});
      }
    </script>
  </head>

  <body>
    <div id='table_div'></div>
  </body>
</html>

CSS：

#table_div table {
    color: #000;
    margin-top: 10px;
}

.headerRow {
    color: #000;
}

table_div允许我整体编辑表格，所以当前的CSS代码有效，但是当我添加背景颜色时：＃ff0000;例如，它没有任何效果。与.headerRow相同。背景来自https://ajax.googleapis.com/ajax/static/modules/gviz/1.0/table/table.css并且不想被覆盖。

知道为什么会这样吗？

如果绝对必要，我会很乐意完全禁用Google CSS，并完全不用我自己的CSS表格。

Answer 1

创建CSS后，我发现这是让它工作的关键：

＆＃13;

var cssClasses = {headerRow: 'tblHeaderClass',hoverTableRow: 'tblHighlightClass'};
var options = {showRowNumber: false, allowHTML: true, 'cssClassNames':cssClasses};

table.draw(data,options);

＆＃13;

强制指令cssClassNames为＆＃34; ticks＆＃34;并确保使用您声明的对象来定义用于公开的表元素名称的CSS类。

Answer 2

在https://developers.google.com/chart/interactive/docs/gallery/table快速了解更多信息，但您应该能够在头标记中链接自己的样式表，然后在JS中引用该类。我唯一不确定的是你是否可以使用Wordpress创建自定义CSS文件，但这是一般的想法：

HTML：

<link href="css/myCustomCss.css" rel="stylesheet">

使用Javascript：

var cssClassNames = {headerRow: 'myAwesomeClass'};

CSS：

.myAwesomeClass {
   font-size: 24px;
}

Answer 3

我也是谷歌图表的新手，但我已经探索了很多选项，我对如何设置表格风格非常了解。

请参阅此链接以获取正确的Google示例： https://developers.google.com/chart/interactive/docs/examples?hl=fr

最终，您要做的是为表行分配一个类名。您可以分配任何所需的CSS代码。您可以使用内联CSS，但我不建议使用它。

内联样式如下

[{v: 'cell string', p: {'style': 'font-weight: bold;'}}],

您还可以添加格式或其他任何内容。

如果您需要进一步澄清，请不要犹豫回复我的帖子。

Answer 4

您是否在CSS属性的末尾尝试过！important？

示例CSS：

.headerRow {
    color: #000!important;
}

无论该规则在CSS中的什么位置，都将始终应用！important属性。

将CSS应用于Google可视化表

4 个答案: