1

我在 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 更改标题行和表格行的格式，但我不知道如何做到这一点。我已经通读了配置选项，但作为一个相对较新的编码人员并没有帮助，需要逐步清楚地解释它。

具体来说，我在上面的代码中添加了什么来告诉图表使用我的自定义 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 代码有效果，但是当我添加 background-color: #ff0000; 例如，它没有效果。与 .headerRow 相同。背景取自https://ajax.googleapis.com/ajax/static/modules/gviz/1.0/table/table.css并且不想被覆盖。

知道为什么会这样吗？

如果绝对有必要，我很乐意完全禁用 Google CSS，并完全从我自己的 CSS 表中进行操作。

4

4 回答 4

2

一旦你创建了 CSS，我发现这是让它工作的关键：

var cssClasses = {headerRow: 'tblHeaderClass',hoverTableRow: 'tblHighlightClass'};
var options = {showRowNumber: false, allowHTML: true, 'cssClassNames':cssClasses};

table.draw(data,options);

强制指令 cssClassNames 使用“ticks”字符串，并确保使用您声明的对象来定义要用于暴露的表元素名称的 CSS 类。

于 2014-12-05T15:42:20.053 回答
0

我也是 Google Charts 的新手，但我已经探索了很多选项，因此我对如何设置表格样式有很好的了解。

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

最终，您所做的就是为表格行分配一个类名。在您可以分配您想要的任何 CSS 代码之后。您可以使用内联 CSS 的替代方案，但我不推荐它。

内联样式如下

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

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

如果您需要进一步澄清，请随时回复我的帖子。

于 2014-04-08T21:16:58.073 回答
0

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

HTML：

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

Javascript：

var cssClassNames = {headerRow: 'myAwesomeClass'};

CSS：

.myAwesomeClass {
   font-size: 24px;
}
于 2013-09-29T17:40:43.870 回答
0

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

示例 CSS：

.headerRow {
    color: #000!important;
}

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

于 2018-10-17T03:44:59.113 回答