javascript - 如何设置包含特定值的谷歌表格图表列的样式

Question

status 列中有五种值- {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) 会将上面指定的格式化程序应用到列 columnIndex 的 dataTable(在您的情况下 Status 位于索引 1 和剩余天数在索引 3)