Question

我是Google Visualization的初学者。我已经制作了一个带谷歌可视化的仪表板。我的仪表板有一个在ChartWrapper的帮助下绘制的表格，我在String过滤器的帮助下通过其中一个列过滤表格。请查看以下我的脚本的样子

<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岁。所以任何人都可以帮助我这样做。

非常感谢提前

Answer 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，因为它是非包含的。但这只会使细胞着色而不是整行。您可以使用另一个hack来为行中的其余单元着色。

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

1 个答案: