Html 通用'的CSS属性；格式化程序&x27；在Google可视化表格中

GoogleVisualizationAPI包括“格式化程序”，允许您使用彩色文本和箭头等表示数据质量的内容。可以找到有关格式化程序的更多信息

现在，当我编辑表的CSS值或使用配置选项（find）时，使用fomatters的表似乎在显示某些CSS属性（即单元格宽度和文本大小）时遇到问题。我注意到的一个例子是，当整个表格文本小于默认字体，并且选中了一行时，情况就是这样。取消选择时，选中的行将恢复为10pt Arial字体

虽然这个特定实例很烦人，但我对所有的格式化程序css属性及其类名很好奇。据我所知，谷歌开发者网站上没有任何信息

这是我的班名：

        'headerRow': 'header-cells',
            'tableRow': '.even-background all-cells',
            'oddTableRow': 'odd-background all-cells',
            'selectedTableRow': 'all-cells',
            'hoverevenTableRow': '',
            'hoveroddrTableRow': '',
            'headerCell': 'header-cells white bold darkgreen-background',
            'tableCell': 'all-cells'
    };

这些是正在使用的格式化程序

 var changecolor = new google.visualization.ColorFormat();
            changecolor.addRange(null, 0, 'red', 'none');
            changecolor.addRange(0.000001, null, 'green', 'none');
            changecolor.format(dt, 1); // Apply formatter to second column

            var parens = new google.visualization.NumberFormat({
                prefix: "$",
                negativeParens: true
            });
            parens.format(dt, 1); // Apply formatter to second column

                var arrow = new google.visualization.ArrowFormat();
                arrow.format(dt, 1); // Apply formatter to second column
  var FormatAll = new google.visualization.NumberFormat({
                prefix: "$",
                pattern: '#.00##'
            });

样式属性：

 <style>
    .all-cells {
        border: 0px;
        border-collapse: collapse;
        font-size: 9px;
        padding-right: 0;
    }
    .header-cells {
        border: 0px;
        border-collapse: collapse;
        font-size: 9px;
        padding-right: 0;
        color: white;
        font-weight: bold;
    }
    .darkgreen-background {
        background-color: #0B3B0B;
    }
    .odd-background {
        background-color: #E6F8E0;
    }
    .even-background {
        background-color: #FFF5E3;
    }
    .bold {
        font-weight: bold
    }
    .White {
        fontcolor: white;
    }
    </style>

.所有细胞{
边界：0px；
边界塌陷：塌陷；
字体大小：9px；
右边填充：0；
}
.标题单元格{
边界：0px；
边界塌陷：塌陷；
字体大小：9px；
右边填充：0；
颜色：白色；
字体大小：粗体；
}
.暗绿色背景{
背景色：#0B3B0B；
}
.奇怪的背景{
背景色：#E6F8E0；
}
.甚至背景{
背景色：#FFF5E3；
}
.bold{
字体大小：粗体
}
怀特先生{
颜色：白色；
}

如果您注意到，当选定单元格时，字体大小会发生变化。仅当应用了

google.visualization.ArrowFormat

时才会发生这种情况

我想去掉表的边界，但这不受类名或类属性的影响（请参阅fiddle）

与

parens.format

和

google.visualization.NumberFormat

也存在冲突。小数不带括号显示

---

未直接显示在代码或fiddle中：单元格宽度属性与应用了格式化程序的单元格偏移。

这里发生了一些事情。首先，箭头格式覆盖放置在单元格上的所有其他类，因此这些单元格没有

所有单元格

类。只要

具有

所有单元格

类，这就可以了。取消选择时，

将丢失

所有单元格

类，因为

所有单元格

都是偶数/奇数行和所选行类的一部分（取消选择行将删除放置在其上的任何类）

如果将

all cells

作为所选行类的原因是您不希望使用默认类中的样式，我建议将该类更改为没有与之关联的样式，如下所示：

'selectedTableRow': 'noStyle'

另外，在旁注中，偶数行类中有一个输入错误：在偶数背景之前不应该有一个

：

'tableRow': 'even-background all-cells'

---

在此处查看效果：

悬停和选择效果不应该对行的样式产生永久性影响。如果您可以提供一个演示此效果的代码示例，我们可以查看它并了解发生了什么。如果您对表的基本CSS感兴趣，您可以查看当前版本。作为示例，我包含了代码和一把小提琴。再次感谢您的帮助！很抱歉，我在键入问题时进行了一些编辑。我浏览了您的示例。它似乎不包括我的任何格式设置程序。如果您按任何列组织图表，所选行将更改字体。我不确定您认为您做了什么，但同样的问题仍然存在我知道格式化程序会覆盖其他css属性。这就是为什么我要寻找其他css类名，或者与格式化程序相关的css类属性。你是对的-选定的行在排序时丢失了它们的自定义类；你可以在此基础上提交一个文件。表特定的格式化程序（箭头格式、条形格式、彩色格式）将类或内联样式应用于单元格；细节没有文档记录，最好的办法是使用DOM检查器检查表并查看格式化程序正在执行的操作。我查看了一些相关问题的错误报告，他们似乎从2008年起就没有提到过谷歌。我希望找到更多有关堆栈的信息。如果您不介意，请对研究工作表示感谢，以便将此主题推广给其他可能有更多知识的人。再次感谢您。您在谷歌可视化和JavaScript问题上不止一次地帮助了我。