Google API：表格图表中列单元格的闪烁背景颜色答案

【问题标题】：Google API : Blink background color of a column cell in table chartGoogle API：表格图表中列单元格的闪烁背景颜色
【发布时间】：2019-09-18 09:57:39
【问题描述】：

是否可以根据值闪烁单元格的背景颜色。例如，在下面的示例中，如果薪水大于 5000 且小于 10000，它应该以红色背景闪烁

【问题讨论】：

标签： javascript charts google-api google-visualization

【解决方案1】：

您可以使用表格单元格属性className 为单元格指定特定的css 类。

然后只需找到符合条件的单元格并分配闪烁的类。

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

google.charts.load('current', {
  packages: ['table']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Name');
  data.addColumn('number', 'Salary');
  data.addRows([
    ['Mike', 10000],
    ['Jim', 8000],
    ['Alice', 12500],
    ['Bob', 7000]
  ]);

  // determine if salary is in blink range
  for (var i = 0; i < data.getNumberOfRows(); i++) {
    var salary = data.getValue(i, 1);
    if ((salary > 5000) && (salary < 10000)) {
      // set blink class
      data.setProperty(i, 1, 'className', 'blink-cell');
    }
  }

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

  table.draw(data, {
    allowHtml: true
  });
});

.blink-cell {
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% {
    background-color: #ff0000;
    font-weight: bold;
  }
}

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

【讨论】：

干杯！请您使用投票按钮附近的复选标记将答案标记为已接受吗？