获取类别过滤器控件的类型

我有一个简单的Google可视化控制面板，其代码如下。获取类别过滤器控件的类型

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
    <title> 
     Google Visualization API Sample 
    </title> 
    <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', '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 category picker control for the Gender column 
     var categoryPicker = new google.visualization.ControlWrapper({ 
      'controlType': 'CategoryFilter', 
      'containerId': 'control1', 
      'options': { 
      'filterColumnLabel': 'Gender', 
      'ui': { 
      'labelStacking': 'vertical', 
       'allowTyping': false, 
       'allowMultiple': false 
      } 
      } 
     }); 

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

     // Create a dashboard 
     new google.visualization.Dashboard(document.getElementById('dashboard')). 
      bind(categoryPicker,table). 
      // Draw the entire dashboard. 
      draw(data); 
     } 

     google.setOnLoadCallback(drawVisualization); 
    </script> 
    </head> 
    <body style="font-family: Arial;border: 0 none;"> 
    <div id="dashboard"> 
     <table> 
     <tr style='vertical-align: top'> 
      <td style='width: 300px; font-size: 0.9em;'> 
      <div id="control1"></div> 
      </td> 
      <td style='width: 600px'> 
      <div style="float: left;" id="chart1"></div> 
      </td> 
     </tr> 
     </table> 
    </div> 
    </body> 
</html>

我想在我的javascript使用if条件访问categoryfilter（假设我有5个类别过滤器约束对方）。也就是说，我想是这样

function myfunction() { 
    var whereClauses = []; 
    if (categorypicker1.statechange) { 
     whereClauses.push("something1 = '" + categorypicker1.changedstate + "'") 
    } 
    if (categorypicker2.statechange) { 
     whereClauses.push("something2 = '" + categorypicker2.changedstate + "'") 
    } 
    whereClause = whereClauses.join(" AND "); 

    //do something... 
    }

但我无法得到正确的格式。那么，如果条件是什么使用正确的格式？

来源

2013-07-18 mpsbhat

从“statechange”事件处理程序

除此之外，没有办法告诉当控制改变。如果你需要执行一些代码，当控制变化，这是你会怎么做：

google.visualization.events.addListener(control, 'statechange', function() { 
    var state = control.getState(); 
    // do something with the state, eg: 
    var whereClauses = []; 
    whereClauses.push('something1 = "' + state.selectedValues[0] + '"'); 
    // ... 
});

但是，如果因此要执行一些代码时，任何相关的控件的改变，那么你可以创建功能并通过功能的事件处理程序：

function foo() { 
    var state1 = control1.getState(); 
    var state2 = control2.getState(); 
    var whereClauses = []; 
    whereClauses.push('something1 = "' + state1.selectedValues[0] + '"'); 
    whereClauses.push('something2 = "' + state2.selectedValues[0] + '"'); 
    // ... 
} 

// add event handlers to control1 and control2 using foo 
google.visualization.events.addListener(control1, 'statechange', foo); 
google.visualization.events.addListener(control2, 'statechange', foo);

如果函数需要知道哪些控制来改变，那么你可以做这样的事情：

function foo (control, columnName) { 
    var state = control.getState(); 
    var whereClauses = []; 
    whereClauses.push(columnName + ' = "' + state.selectedValues[0] + '"'); 
    // ... 
} 

// add event handlers to control1 and control2 using foo 
google.visualization.events.addListener(control1, 'statechange', function() { 
    foo(control1, 'something1'); 
}); 
google.visualization.events.addListener(control2, 'statechange', function() { 
    foo(control2, 'something2'); 
});

来源

2013-07-22 22:41:49 asgallant

充分利用categoryPicker对象drawVisualization函数外部访问，然后使用getState().selectedValues值：

var categoryPicker; 
function drawVisualization() { 
    // etc. 
    categoryPicker = // etc... 

    // Register to hear state changes. 
    google.visualization.events.addListener(categoryPicker, 'statechange', foo); 

    // etc. 
} 

function foo() { 
    // Insert your if condition here. 
}

来源

2013-07-18 14:45:31

如何把它if条件里面？也就是说，如果选择了类别过滤器，那么将执行一些代码。 – mpsbhat

呵呵，你想在条件设定的时候准确地调用一些代码。然后你需要在'categoryPicker'上注册'statechange'事件，并在注册函数中执行一些代码。代码[here]（https://developers.google.com/chart/interactive/docs/events）将有所帮助，有关更多信息，请参阅“ControlWrapper”外观[https://developers.google.com/chart /交互式/文档/画廊/控制＃controlwrapperobject）。 –

但我很困惑如何使用if语句中的事件。 – mpsbhat

获取类别过滤器控件的类型

回答

相关问题