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才能生效。示例：'border：1px solid green;'。

要使用其中之一，您必须设置此选项 - ＆gt; allowHtml: true

参考：表格图表data format

请参阅以下工作代码段，该代码段实现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动态设置属性

请参阅以下工作代码段...

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>

彩色谷歌虚拟化布尔列

代码

1 个答案: