Question

我想让用户过滤图表上显示的结果。 Google API提供了按行强制过滤的CategoryFilter。这是我的代码完全正常

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

Answer 1

您希望将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});

在Google Charts API中合并两种类别的过滤器

1 个答案: