首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >在使用Google Chart API仪表板时遇到getFilteredRows问题

在使用Google Chart API仪表板时遇到getFilteredRows问题
EN

Stack Overflow用户
提问于 2012-03-29 06:29:31
回答 1查看 3.3K关注 0票数 1

我正在组装一个仪表板,并尝试做一些应该简单明了的事情。将有一些控件筛选器在仪表板级别操作,但我还需要为单个表指定一些额外的筛选器(静态的,而不是通过控件)。getFilteredRows的方法似乎就是答案,但它并不起作用。

我已经模拟了Google在Code Playground中的例子,试图让它工作。在这种情况下,我试图让饼图只显示那些20岁或更早的人。

(链接到谷歌代码游乐场:http://code.google.com/apis/ajax/playground/?type=visualization#full_dashboard)

我正在尝试的代码:

代码语言:javascript
运行
复制
function drawVisualization() {
  // Prepare the data
  var data = google.visualization.arrayToDataTable([
    ['Name', 'Gender', 'Age', 'Donuts eaten'],
    ['Michael' , 'Male', 12, 5],
    ['Elisa', 'Female', 20, 7],
    ['Robert', 'Male', 7, 3],
    ['John', 'Male', 54, 2],
    ['Jessica', 'Female', 22, 6],
    ['Aaron', 'Male', 3, 1],
    ['Margareth', 'Female', 42, 8],
    ['Miranda', 'Female', 33, 6]
  ]);  

  // Define a slider control for the Age column.
  var slider = new google.visualization.ControlWrapper({
    'controlType': 'NumberRangeFilter',
    'containerId': 'control1',
    'options': {
      'filterColumnLabel': 'Age',
    'ui': {'labelStacking': 'vertical'}
    }
  });

  // Define a category picker control for the Gender column
  var categoryPicker = new google.visualization.ControlWrapper({
    'controlType': 'CategoryFilter',
    'containerId': 'control2',
    'options': {
      'filterColumnLabel': 'Gender',
      'ui': {
      'labelStacking': 'vertical',
        'allowTyping': false,
        'allowMultiple': false
      }
    }
  });

  // Define a Pie chart
  var pie = new google.visualization.ChartWrapper({
    'chartType': 'PieChart',
    'containerId': 'chart1',
    'options': {
      'width': 300,
      'height': 300,
      'legend': 'none',
      'title': 'Donuts eaten per person',
      'chartArea': {'left': 15, 'top': 15, 'right': 0, 'bottom': 0},
      'pieSliceText': 'label'
    },
    // Instruct the piechart to use colums 0 (Name) and 3 (Donuts Eaten)
    // from the 'data' DataTable.
     'view': {
       'columns': [0,3],
       'rows': [
         {
           'calc': function(data) {
             return data.getFilteredRows({column: 2, minValue: 20});
           },
           'type': 'number'
         }]
     }
  });

  // Define a table
  var table = new google.visualization.ChartWrapper({
    'chartType': 'Table',
    'containerId': 'chart2',
    'options': {
      'width': '300px'
    }
  });

  // Create a dashboard
  new google.visualization.Dashboard(document.getElementById('dashboard')).
      // Establish bindings, declaring the both the slider and the category
      // picker will drive both charts.
      bind([slider, categoryPicker], [pie, table]).
      // Draw the entire dashboard.
      draw(data);
}

我对原始示例的唯一更改是添加到饼图的“view”部分。

有人有什么想法吗?

EN

回答 1

Stack Overflow用户

发布于 2012-03-31 02:05:42

几个小变化:*不需要'calc‘,因为它用于创建新的计算列。*即使是单个值,函数的格式也需要数组。

代码语言:javascript
运行
复制
 'view': {'columns': [0, 3], 
         'rows' : data.getFilteredRows([{column: 2, minValue: 20}])} 
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/9916586

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档