Question

状态列中有五种值 - {none，active，hold，...}。因此，我希望将“激活”设为“强>绿色”，并将“保持”设置为黄色颜色等。同样，在 Days Left 列中，小于10的值应为红色。

var f_div = document.createElement("div");
                        f_div.id = "filter_div119_PlanName";
                        parent_w_div.insertBefore(f_div,w_div); 


                        var PlanNamefilter = new google.visualization.ControlWrapper({
                          "controlType": "CategoryFilter",
                          "containerId": "filter_div119_PlanName",
                          "options": {
                             "filterColumnLabel": "Plan Name", 

                            "values": ["Silver","Delux","Premium","Basic","Gold","Diamond"],
                            "ui": {
                              "allowTyping": false,
                              "allowMultiple": true
                            }
                          }
                        });
                        filters_bind.push(PlanNamefilter);

var data119 = google.visualization.arrayToDataTable([[{type:"string", label:"Plan Name"}, {type:"string",label:"Status"}, ...
var chart119 = new google.visualization.ChartWrapper({
                chartType: "Table",
                containerId: "widget_119",

                options : {hAxis: {title: "Labale", textPosition: "out"},vAxis: {title: "Value"},legend: {position:"none"},width:"100%",height:"100%",chartArea:{top:30,height:"85%",width:"85%"},showRowNumber: true,allowHtml: true, page: "enable", pageSize: 8, pagingSymbols: {prev: 'prev', next: 'next'}}
                }); dashboard.bind(filters_bind, chart119);
                            dashboard.draw(data119);}

如果解决方案不需要第三方库，那就更好了。

Answer 1

Google Visualization中的ColorFormat应该是您正在寻找的东西，因为您已经在使用Google Visualization。

您可以查看reference。

状态列的示例代码

var formatter = new google.visualization.ColorFormat();
formatter.addRange("active", null, 'green', 'white');
formatter.addRange("hold", null, 'yellow', 'white');
formatter.format(data, 1); // Apply formatter to second column

状态列的示例代码

var formatter = new google.visualization.ColorFormat();
formatter.addRange(null, 10, 'red', 'white');
formatter.format(data, 3); // Apply formatter to fourth column

代码说明

formatter.addRange(from, to, color, bgcolor)将指定一条规则，当单元格的值在color范围内时，文本颜色将更改为bgcolor，背景颜色将更改为from到to。

formatter.format(dataTable, columnIndex)会将上面指定的格式化程序应用于dataTable列的columnIndex（在您的情况下，状态位于索引1，而剩余天数位于索引3）

Answer 2

    var table = new google.visualization.Table(document.getElementById('table_div7'));

    var formatter = new google.visualization.ColorFormat();

    formatter.addRange('normal', null, 'white', 'green');
    formatter.addRange('falla' ,  null, 'white', 'red');
    formatter.format(data, 0); //  colores  columna fanstatus   

table.draw(data, {allowHtml: true, width: '80%', height: '10%'});
  }

<div id="table_div7"></div>

不，我不喜欢在颜色上串... o正常o法利亚

如何设置包含特定值的Google表格图表列的样式

2 个答案:

状态列的示例代码

状态列的示例代码

代码说明