Question

我有一个简单的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...
  }

但我无法获得正确的格式。那么条件下使用的正确格式是什么？

Answer 1

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

Answer 2

除了“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');
});

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

2 个答案: