Google 可视化表中一般“格式化程序”的 CSS 属性

Question

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

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

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

这些是我的班级名称：

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

JS fiddle script in action

如果您注意到，当一个单元格被选中时，字体大小会发生变化。这仅在应用 google.visualization.ArrowFormat 时发生。

我想摆脱桌子的边界，但这不受类名或类属性的影响（参考小提琴），

与parens.format 和google.visualization.NumberFormat 也存在冲突。小数位不带括号显示。

不直接显示在代码或小提琴中：单元格宽度属性会随着应用了格式化程序的单元格而偏移。

Answer 1

这里发生了几件事。首先，ArrowFormat 覆盖放置在单元格上的所有其他类，因此这些单元格没有all-cells 类。这很好，只要 <tr> 有 all-cells 类。当您取消选择 <tr> 时，它们会丢失 all-cells 类，因为 all-cells 是偶数/奇数行和选定行类的一部分（并且取消选择一行会删除您放置在其上的任何类。

如果您将all-cells 作为所选行类的原因是因为您不想要默认类中的样式，我建议将类更改为没有与之关联的样式，如下所示：

'selectedTableRow': 'noStyle'

另外，附带说明一下，您在偶数行类中有一个拼写错误：even-background 之前不应有 .：

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

在这里看到它的工作：http://jsfiddle.net/asgallant/1q8yk4f5/3/