在谷歌圖表API中結合兩種類別過濾器

我想讓用戶能夠過濾圖表上顯示的結果。 Google API提供了按行進行過濾的CategoryFilter。這裏是我的代碼工作完全正常在谷歌圖表API中結合兩種類別過濾器

<html> 
    <head> 
    <!--Load the Ajax API--> 
    <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
    <script type="text/javascript"> 

    // Load the Visualization API and the piechart package. 
    google.load('visualization', '1', {'packages':['controls']}); 

    // Set a callback to run when the Google Visualization API is loaded. 
    google.setOnLoadCallback(drawChart); 

    function drawChart() { 

     // Create our data table out of JSON data loaded from server. 
     var data = new google.visualization.DataTable(<?=$jsonTable?>); 

    var countryPicker = new google.visualization.ControlWrapper({ 
    controlType: 'CategoryFilter', 
    containerId: 'negeri', 
    dataTable: data, 
    options: { 
     filterColumnLabel: 'Negeri', 
     ui: { 
     labelStacking: 'vertical', 
     allowTyping: false, 
     allowMultiple: true 
     } 
    }, 
    // Define an initial state, i.e. a set of metrics to be initially selected. 
    state: {'selectedValues': ['Kedah', 'Johor']} 
    }); 


     var chart = new google.visualization.ChartWrapper({ 
     chartType: 'ColumnChart', 
     containerId: 'chart_div', 
     options: { 
      title: 'Statistik Negeri vs. Kategori Sukan', 
      width: 1000, 
      height: 1000, 
      hAxis: {title: 'Negeri', titleTextStyle: {color: 'blue'}}, 
      vAxis: {title: 'Jumlah Kategori', titleTextStyle: {color: 'blue'}} 
     } 
    }); 




    // Create the dashboard. 
    new google.visualization.Dashboard(document.getElementById('dashboard')). 
    // Configure the controls so that: 
    // - the 'Country' selection drives the 'Region' one, 
    // - the 'Region' selection drives the 'City' one, 
    // - and finally the 'City' output drives the chart 
    bind(countryPicker, chart). 
    // Draw the dashboard 
    draw(data); 
    } 
    </script> 
    </head> 

    <body> 
    <div id="dashboard"> 
<div id="negeri"></div> 
<div id="chart_div"></div> 
</div> 
    </body> 
</html>

然而，在我的數據表，我也想按列進行篩選。這兩種類型的過濾應該一起工作。（依賴;通過bind（）函數）。我提到了@asgallant http://jsfiddle.net/asgallant/WaUu2/，這是我想要結合的功能。

我該如何將它們結合起來？我試圖將@asgallant的setChartView（）與google的儀表板（）結合起來，但它不工作。

<html> 
    <head> 
    <!--Load the Ajax API--> 
    <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
    <script type="text/javascript"> 

    // Load the Visualization API and the piechart package. 
    google.load('visualization', '1', {'packages':['controls']}); 

    // Set a callback to run when the Google Visualization API is loaded. 
    google.setOnLoadCallback(drawChart); 

    function drawChart() { 

     // Create our data table out of JSON data loaded from server. 
     var data = new google.visualization.DataTable(<?=$jsonTable?>); 

     var columnsTable = new google.visualization.DataTable(); 
    columnsTable.addColumn('number', 'colIndex'); 
    columnsTable.addColumn('string', 'colLabel'); 
    var initState= {selectedValues: []}; 
    // put the columns into this data table (skip column 0) 
    for (var i = 1; i < data.getNumberOfColumns(); i++) { 
     columnsTable.addRow([i, data.getColumnLabel(i)]); 
     // you can comment out this next line if you want to have a default selection other than the whole list 
     initState.selectedValues.push(data.getColumnLabel(i)); 
    } 

    var countryPicker = new google.visualization.ControlWrapper({ 
    controlType: 'CategoryFilter', 
    containerId: 'negeri', 
    dataTable: data, 
    options: { 
     filterColumnLabel: 'Negeri', 
     ui: { 
     labelStacking: 'vertical', 
     allowTyping: false, 
     allowMultiple: true 
     } 
    }, 
    // Define an initial state, i.e. a set of metrics to be initially selected. 
    state: {'selectedValues': ['Kedah', 'Johor']} 
    }); 

var columnFilter = new google.visualization.ControlWrapper({ 
     controlType: 'CategoryFilter', 
     containerId: 'colFilter_div', 
     dataTable: columnsTable, 
     options: { 
      filterColumnLabel: 'colLabel', 
      ui: { 
       label: 'Kategori Sukan', 
       allowTyping: false, 
       allowMultiple: true, 
       allowNone: false, 
       selectedValuesLayout: 'belowStacked' 
      } 
     }, 
     state: initState 
    }); 


     var chart = new google.visualization.ChartWrapper({ 
     chartType: 'ColumnChart', 
     containerId: 'chart_div', 
     options: { 
      title: 'Statistik Negeri vs. Kategori Sukan', 
      width: 1000, 
      height: 1000, 
      hAxis: {title: 'Negeri', titleTextStyle: {color: 'blue'}}, 
      vAxis: {title: 'Jumlah Kategori', titleTextStyle: {color: 'blue'}} 
     } 
    }); 




    // Create the dashboard. 
    new google.visualization.Dashboard(document.getElementById('dashboard')). 
    // Configure the controls so that: 
    // - the 'Country' selection drives the 'Region' one, 
    // - the 'Region' selection drives the 'City' one, 
    // - and finally the 'City' output drives the chart 
    bind(countryPicker, columnFilter). 
    bind(columnFilter, chart). 
    // Draw the dashboard 
    draw(data); 
    } 
    </script> 
    </head> 

    <body> 
    <div id="dashboard"> 
<div id="negeri"></div> 
<div id="chart_div"></div> 
</div> 
    </body> 
</html>

來源

2014-01-28 mfmz

你想你的countryPicker過濾器綁定到圖表作爲正常的，但不要將columnFilter控制任何東西綁定 - 將setChartView函數處理一切爲了columnFilter。您需要調整其他幾行以使其與儀表板協同工作，但沒有什麼重要的。這應該是這樣的：

function drawChart() { 
    // Create our data table out of JSON data loaded from server. 
    var data = new google.visualization.DataTable(<?=$jsonTable?>); 

    var columnsTable = new google.visualization.DataTable(); 
    columnsTable.addColumn('number', 'colIndex'); 
    columnsTable.addColumn('string', 'colLabel'); 
    var initState= {selectedValues: []}; 
    // put the columns into this data table (skip column 0) 
    for (var i = 1; i < data.getNumberOfColumns(); i++) { 
     columnsTable.addRow([i, data.getColumnLabel(i)]); 
     // you can comment out this next line if you want to have a default selection other than the whole list 
     initState.selectedValues.push(data.getColumnLabel(i)); 
    } 

    var countryPicker = new google.visualization.ControlWrapper({ 
     controlType: 'CategoryFilter', 
     containerId: 'negeri', 
     dataTable: data, 
     options: { 
      filterColumnLabel: 'Negeri', 
      ui: { 
       labelStacking: 'vertical', 
       allowTyping: false, 
       allowMultiple: true 
      } 
     }, 
     // Define an initial state, i.e. a set of metrics to be initially selected. 
     state: {'selectedValues': ['Kedah', 'Johor']} 
    }); 

    var columnFilter = new google.visualization.ControlWrapper({ 
     controlType: 'CategoryFilter', 
     containerId: 'colFilter_div', 
     dataTable: columnsTable, 
     options: { 
      filterColumnLabel: 'colLabel', 
      ui: { 
       label: 'Kategori Sukan', 
       allowTyping: false, 
       allowMultiple: true, 
       allowNone: false, 
       selectedValuesLayout: 'belowStacked' 
      } 
     }, 
     state: initState 
    }); 

    var chart = new google.visualization.ChartWrapper({ 
     chartType: 'ColumnChart', 
     containerId: 'chart_div', 
     options: { 
      title: 'Statistik Negeri vs. Kategori Sukan', 
      width: 1000, 
      height: 1000, 
      hAxis: {title: 'Negeri', titleTextStyle: {color: 'blue'}}, 
      vAxis: {title: 'Jumlah Kategori', titleTextStyle: {color: 'blue'}} 
     } 
    }); 

    // Create the dashboard. 
    var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard')). 
    bind(countryPicker, chart); 

    function setChartView() { 
     var state = columnFilter.getState(); 
     var row; 
     var view = { 
      columns: [0] 
     }; 
     for (var i = 0; i < state.selectedValues.length; i++) { 
      row = columnsTable.getFilteredRows([{column: 1, value: state.selectedValues[i]}])[0]; 
      view.columns.push(columnsTable.getValue(row, 0)); 
     } 
     // sort the indices into their original order 
     view.columns.sort(function (a, b) { 
      return (a - b); 
     }); 
     chart.setView(view); 
     chart.draw(); 
    } 
    google.visualization.events.addListener(columnFilter, 'statechange', setChartView); 
    var runOnce = google.visualization.events.addListener(dashboard, 'ready', function() { 
     google.visualization.events.removeListener(runOnce); 
     setChartView(); 
    }); 

    columnFilter.draw(); 
    dashboard.draw(data); 
} 
google.load('visualization', '1', {packages:['corechart'], callback: drawChart});

來源

2014-01-28 17:05:01 asgallant

我已經使用了您的建議代碼，並在html正文中添加了columnFilter的div id。然而，某些地方可能出錯了，columnFilter沒有像countryPicker那樣出現在圖表上。 – mfmz

對不起，您需要爲列過濾器添加繪圖調用。我將在電話中編輯答案。 – asgallant

你真的很擅長這個。謝啦。 – mfmz

在谷歌圖表API中結合兩種類別過濾器

回答

相關問題