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

我有一个服务器端构建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

---

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

看起来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;
    };
}

函数RowColorFormat（）{
var colorFormat=new google.visualization.colorFormat（）；
this.addRange=函数（from、to、color、bgcolor）{
colorFormat.addRange（从、到、颜色、bgcolor）；
};
this.addGradientRange=函数（from、to、color、fromBgColor、toBgColor）{
colorFormat.addGradientRange（从、到、颜色、bgcolor）；
};
this.format=函数（数据表，列）{
dataTable.setPropertyOverriden=dataTable.setProperty；
dataTable.setProperty=函数（行、列、名称、值）{
var length=this.getNumberOfColumns（）；
对于（变量i=0；i

---

像google.visualization.ColorFormat一样使用它

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

看起来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;
    };
}

函数RowColorFormat（）{
var colorFormat=new google.visualization.colorFormat（）；
this.addRange=函数（from、to、color、bgcolor）{
colorFormat.addRange（从、到、颜色、bgcolor）；
};
this.addGradientRange=函数（from、to、color、fromBgColor、toBgColor）{
colorFormat.addGradientRange（从、到、颜色、bgcolor）；
};
this.format=函数（数据表，列）{
dataTable.setPropertyOverriden=dataTable.setProperty；
dataTable.setProperty=函数（行、列、名称、值）{
var length=this.getNumberOfColumns（）；
对于（变量i=0；i

并像google.visualization.ColorFormat一样使用它