Question

我有一个可视化表，服务器端构造了JSON。当我尝试使用基于单元格值的颜色格式时，它仅适用于特定情况。我需要根据单个单元格值为完整行应用颜色。例如，

        C1   C2   C3   C4

  R1     -    -    -    0  // This row should be "red"

  R2     -    -    -    1  // This row should be "green"

  R3     -    -    -    0

  R4     -    -    -    1

但颜色仅适用于C4。

MyCode：

var dataTable = new google.visualization.DataTable(data, 0.5);

var formatter_short1 = new google.visualization.DateFormat({pattern:'h:mm aa'});
formatter_short1.format(dataTable,1);
formatter_short1.format(dataTable,2);
var view = new google.visualization.DataView(dataTable);
view.hideColumns([0,3,4,5,8,9,14]);
var color_formatter = new google.visualization.ColorFormat();
color_formatter.addRange(0,1, 'green', 'orange');
color_formatter.addRange(1,null, 'orange', 'green');
//color_formatter.format(dataTable, 1,2,6,7,9,11,12,13); // Apply formatter to 10 column
color_formatter.format(dataTable, 10); // Apply formatter to 10 column

Answer 1

我没有找到这个问题的答案，所以我会在这里发布我的解决方案。

看起来Google不支持开箱即用的此类行为，但您可以使用自定义格式化程序来实现此功能。这个适用于我的情况：

function RowColorFormat() {
    var colorFormat = new google.visualization.ColorFormat();

    this.addRange = function(from, to, color, bgcolor) {
        colorFormat.addRange(from, to, color, bgcolor);
    };

    this.addGradientRange = function(from, to, color, fromBgColor, toBgColor) {
        colorFormat.addGradientRange(from, to, color, bgcolor);
    };

    this.format = function(dataTable, column) {
        dataTable.setPropertyOverriden = dataTable.setProperty;
        dataTable.setProperty = function (row, column, name, value) {
            var length = this.getNumberOfColumns();
            for (var i = 0; i < length; i++) {
                this.setPropertyOverriden(row, i, name, value);
            }
        };
        colorFormat.format(dataTable, column);
        dataTable.setProperty = dataTable.setPropertyOverriden;
        delete dataTable.setPropertyOverriden;
    };
}

并像google.visualization.ColorFormat

一样使用它

基于单元格值的完整行的可视化表颜色格式

1 个答案: