get the type of Category filter control

2019-08-29 03:45发布

站内问答 / JavaScript
1735 2 5

I have a simple Google visualization dashboard with following code.

<!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>

I want to access the categoryfilter using an if condition in my javascript (assume I have 5 category filters bound each other). That is, I want something like 

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...
  }

But I unable to get the correct format. So what is the correct format to use if condition? ​

2条回答
forever°为你锁心
2楼-- · 2019-08-29 04:31

Make the categoryPicker object accessible outside the drawVisualization function, and then use the getState().selectedValues value:

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.
}
查看更多
0人赞 添加讨论(0) 举报
再贱就再见
3楼-- · 2019-08-29 04:50

Aside from a "statechange" event handler, there is no way to tell when a control has changed. If you need to execute some code when a control changes, this is how you would do it:

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] + '"');
    // ...
});

If, however, so you want to execute some code when any of the related controls change, then you can create a function and pass the function to the event handler:

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

If the function needs to know which control changed, then you can do something like this:

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');
});
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)