CSS在Google可视化表格中的应用_Css_Wordpress_Google Visualization_Css Tables

CSS在Google可视化表格中的应用

css wordpress google-visualization

CSS在Google可视化表格中的应用,css,wordpress,google-visualization,css-tables,Css,Wordpress,Google Visualization,Css Tables,我在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 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:

table_div允许我将表格作为一个整体进行编辑，因此当前的CSS代码有效果，但当我添加背景色时：#ff0000；例如，它没有效果。海德罗也一样。背景正在从中提取，不希望被覆盖

知道为什么会这样吗

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

请快速访问获取更多信息，但您应该能够在head标记中链接您自己的样式表，然后在JS中引用该类。我唯一不确定的是，您是否可以使用Wordpress创建自定义CSS文件，但总体思路是：

HTML:

CSS:

我也是谷歌图表的新手，但是我已经探索了很多选项，所以我对如何设计你的表格有很好的理解

有关正确的谷歌示例，请参见此链接：

最后，您要做的是为表行指定一个类名。之后，您可以分配任何CSS代码您想要的。有一种替代方法可以使用内联CSS，但我不推荐

内联样式如下

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

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

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

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

var cssClasses={headerRow:'tblHeaderClass'，hoverTableRow:'tblHighlightClass'}；
var options={showRowNumber:false，allowHTML:true，'cssClassNames'：cssClasses}；
表.绘制（数据、选项）你试过了吗！在CSS属性的末尾很重要吗
CSS示例：
.headerRow {
    color: #000!important;
}

这个！重要属性将始终应用，无论该规则在CSS中出现在何处。
如果有人愿意讨论此问题，请转到：稍后将在此处发布答案。使用DOM检查器（如Chrome或Firefox），您可能会看到这些类正被适当地应用于行。如果您没有看到CSS效果，那么很可能是标题单元格和表格单元格的默认CSS类覆盖了行CSS，因此您也应该将CSS类分配给“headerCell”和“tableCell”。是的，这正是发生的情况。我创建的CSS效果在那里，但正在被超越（通过CSS代码）。例如，当我输入背景色时：#000；在表格标题部分中，它没有效果，被默认的谷歌CSS覆盖，这是一个复杂的渐变背景，每个浏览器都有一个部分！如何将CSS类分配给headerCell和tableCell？使用“cssClassNames”下的“headerCell”和“tableCell”子选项，就像使用“headerRow”和“tableRow”一样。@asgallant通过更新我的问题来回答，以便可以包含当前代码。在此之前，它仍然读取默认的google CSS。是否有任何方法可以禁用此功能？或者至少使标题/表格行等部分的背景颜色可以更改？我正在查看您发布的代码，没有引用您正在引用的外部（自定义）CSS文件。您可以通过ui:cssClass…更改CSS规则。第二个选项是检查元素，如果确实需要覆盖某些规则，则可以随时设置！重要的。。。但我不推荐。哈哈。这在这里可能很有效，但请记住！重要信息
是一种钝性工具，如果使用，应极其谨慎。在整个CSS中频繁使用此属性可能会导致难以调试的问题，如果！重要信息代码库的一部分中的标记会覆盖另一部分。没错，但OP似乎已经达到了“如果所有其他操作都失败”的点，这通常是我个人使用此选项的点。
<link href="css/myCustomCss.css" rel="stylesheet">

var cssClassNames = {headerRow: 'myAwesomeClass'};

.myAwesomeClass {
   font-size: 24px;
}

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

.headerRow {
    color: #000!important;
}