在使用Google Chart API儀表板的getFilteredRows時遇到問題

我正在組建一個儀表板並嘗試做一些應該是直截了當的事情。將有控制過濾器在儀表板級別上運行，但我還需要指定一些額外的過濾器（靜態，而不是通過控件）到一個表。 getFilteredRows的方法似乎是答案，但它不起作用。在使用Google Chart API儀表板的getFilteredRows時遇到問題

我嘲笑了Google在代碼遊樂場中嘗試使用此功能的示例。在這種情況下，我試圖讓餅圖只顯示那些年齡在20歲以上的人。

（鏈接到谷歌代碼遊樂場：http://code.google.com/apis/ajax/playground/?type=visualization#full_dashboard）

代碼我想：

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); 
}

我已經從最初的例子唯一改變的是增加的「視圖」部分餅圖。

任何人有任何想法？

來源

2012-03-28 overanalyst79

幾個小變化： *不需要'calc'，因爲它用於創建新的計算列。 *函數的格式需要數組，即使是單個值。

'view': {'columns': [0, 3], 
     'rows' : data.getFilteredRows([{column: 2, minValue: 20}])}

來源

2012-03-30 18:05:41 Guy

在使用Google Chart API儀表板的getFilteredRows時遇到問題

回答

相關問題