Question

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

现在，当我编辑表的CSS值或使用configurtion选项（找到here）时，使用fomatters的表似乎无法显示某些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'：

{{1}}

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

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

1 个答案: