Google 可视化 - 突出显示表格中的数据答案

【问题标题】：Google Visualization - Highlight data in a TableGoogle 可视化 - 突出显示表格中的数据
【发布时间】：2015-09-29 11:52:46
【问题描述】：

我是谷歌可视化的初学者。我用谷歌可视化制作了一个仪表板。我的仪表板有一个在 ChartWrapper 的帮助下绘制的表格，我在字符串过滤器的帮助下按其中一列过滤表格。请检查下面我的脚本的样子

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load('visualization', '1.1', {packages: ['controls']});
    </script>
    <script type="text/javascript">
      function drawVisualization() {
        // Prepare the data.
        var data = google.visualization.arrayToDataTable([
          ['Name', 'Age'],
          ['Michael' , '17'],
          ['Elisa', '17'],
          ['Robert', '17'],
          ['John', '17'],
          ['Jessica', '18'],
          ['Aaron', '19'],
          ['Margareth', '17'],
          ['Miranda', '15']
        ]);

        // Define a StringFilter control for the 'Name' column
        var stringFilter = new google.visualization.ControlWrapper({
          'controlType': 'StringFilter',
          'containerId': 'control1',
          'options': {
            'filterColumnLabel': 'Name'
          }
        });

        // Define a table visualization
        var table = new google.visualization.ChartWrapper({
          'chartType': 'Table',
          'containerId': 'chart1',
          'options': {'height': '13em', 'width': '20em'}

        });

        // Create the dashboard.
        var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard')).
          // Configure the string filter to affect the table contents
          bind(stringFilter, table).
          // Draw the dashboard
          draw(data);
      }


      google.setOnLoadCallback(drawVisualization);
    </script>

但我想在表格中以“红色”颜色突出显示所有行，其中一个人的年龄不等于 17。所以任何人都可以帮我做这件事。

提前致谢

【问题讨论】：

在这里，添加格式化程序范围developers.google.com/chart/interactive/docs/…

标签： google-visualization

【解决方案1】：

使用颜色格式化语法来指定您的范围和样式。

var formatter = new google.visualization.ColorFormat();
formatter.addRange(null, 17, 'white', 'red');
formatter.addRange(17, null, 'white', 'red');
formatter.format(data, 1);

这将搜索从 -∞ 到 17 和 17 到 +∞ 的值，但不包括 17，因为它不包含在内。但这只会给单元格上色，而不是整行。您可以使用另一种技巧为行中的其余单元格着色。

【讨论】：