颜色 google 虚拟化布尔列

Question

我正在尝试使用 ColorPattern 格式化程序为包含布尔数据但没有任何运气的单元格着色。

任何人都知道这是否可能，或者您是否必须以不同的方式处理它，因为它的布尔数据？

小提琴here

代码

google.charts.load('current', {'packages':['table']});
google.charts.setOnLoadCallback(drawTable);

function drawTable() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Name');
    data.addColumn('number', 'Salary');
    data.addColumn('boolean', 'Full Time Employee');
    data.addRows([
        ['Mike',  {v: 10000, f: '$10,000'}, true],
        ['Jim',   {v:8000,   f: '$8,000'},  false],
        ['Alice', {v: 12500, f: '$12,500'}, true],
        ['Bob',   {v: 7000,  f: '$7,000'},  true]
    ]);

    var formatter = new google.visualization.ColorFormat();
    formatter.addRange(true, true, 'red', 'red');
    formatter.format(data, 2); // Apply formatter to second column
    var table = new google.visualization.Table(document.getElementById('table_div'));
    table.draw(data, {showRowNumber: true, width: '100%', height: '100%'});
}

Answer 1

ColorFormat 为数字单元格的前景或背景分配颜色

---

但是，表格图表是独一无二的，使用放置在数据中的自定义单元格属性，您可以分配...

className - 分配给单个单元格的字符串类名称。使用它为单个单元格分配 CSS 样式。

style - 将内联分配给单元格的样式字符串。这将覆盖应用于该单元格的 CSS 类样式。您必须设置属性 allowHtml=true 才能正常工作。示例：'边框：1px 纯绿色；'。

要使用其中一个，您必须设置此选项 --> allowHtml: true

参考：表格图表data format

---

参见下面的工作 sn-p，它实现了style...

google.charts.load('current', {
  callback: drawTable,
  packages:['table']
});

function drawTable() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Name');
  data.addColumn('number', 'Salary');
  data.addColumn('boolean', 'Full Time Employee');
  data.addRows([
    ['Mike',  {v: 10000, f: '$10,000'}, {v: true, p: {style: 'background-color: red;'}}],
    ['Jim',   {v:8000,   f: '$8,000'},  false],
    ['Alice', {v: 12500, f: '$12,500'}, {v: true, p: {style: 'background-color: red;'}}],
    ['Bob',   {v: 7000,  f: '$7,000'},  {v: true, p: {style: 'background-color: red;'}}]
  ]);

  var table = new google.visualization.Table(document.getElementById('table_div'));
  table.draw(data, {
    allowHtml: true,
    showRowNumber: true,
    width: '100%',
    height: '100%'
  });
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="table_div"></div>

---

编辑

使用setProperty动态设置属性

请参阅以下工作 sn-p...

google.charts.load('current', {
  callback: drawTable,
  packages:['table']
});

function drawTable() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Name');
  data.addColumn('number', 'Salary');
  data.addColumn('boolean', 'Full Time Employee');
  data.addRows([
    ['Mike',  {v: 10000, f: '$10,000'}, true],
    ['Jim',   {v:8000,   f: '$8,000'},  false],
    ['Alice', {v: 12500, f: '$12,500'}, true],
    ['Bob',   {v: 7000,  f: '$7,000'},  true]
  ]);

  // check each row
  for (var i = 0; i < data.getNumberOfRows(); i++) {
    // check boolean value
    if (data.getValue(i, 2)) {
      data.setProperty(i, 2, 'style', 'background-color: red;');
    }
  }

  var table = new google.visualization.Table(document.getElementById('table_div'));
  table.draw(data, {
    allowHtml: true,
    showRowNumber: true,
    width: '100%',
    height: '100%'
  });
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="table_div"></div>