使用Java脚本（仪表板）在Google图表中向下钻取

Question

我有一个代码来获取chart.em的向下钻取功能，无法将其放在Google仪表板中，我在其中拥有类别过滤器的任何人都可以将我的代码作为新手来帮助我。

这是我需要仪表板使用的Google图表的代码。

<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">

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

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

      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
function drawChart () {
    var data = google.visualization.arrayToDataTable([
        ['Category', 'Name', 'Value'],
        ['Foo', 'Fiz', 5],
        ['Foo', 'Buz', 2],
        ['Bar', 'Qud', 7],
        ['Bar', 'Piz', 4],
        ['Cad', 'Baz', 6],
        ['Cad', 'Nar', 8]
    ]);

    var aggregateData = google.visualization.data.group(data, [0], [{
        type: 'number',
        label: 'Value',
        column: 2,
        aggregation: google.visualization.data.sum
    }]);

    var topLevel = true;

    var chart = new google.visualization.ColumnChart(document.querySelector('#chart'));
    var options = {
        height: 400,
        width: 600
    };

    function draw (category) {
        if (topLevel) {
            // rename the title
            options.title = 'Top Level data';
            // draw the chart using the aggregate data
            chart.draw(aggregateData, options);
        }
        else {
            var view = new google.visualization.DataView(data);
            // use columns "Name" and "Value"
            view.setColumns([1, 2]);
            // filter the data based on the category
            view.setRows(data.getFilteredRows([{column: 0, value: category}]));
            // rename the title
            options.title = 'Category: ' + category;
            // draw the chart using the view
            chart.draw(view, options);
        }
    }

    google.visualization.events.addListener(chart, 'select', function () {
        if (topLevel) {
            var selection = chart.getSelection();
            // drill down if the selection isn't empty
            if (selection.length) {
                var category = aggregateData.getValue(selection[0].row, 0);
                topLevel = false;
                draw(category);
            }
        }
        else {
            // go back to the top
            topLevel = true;
            draw();
        }
    });

    draw();
}
//google.load('visualization', '1', {packages: ['corechart'], callback: drawchart});
//google.load('visualization', '1', {packages: ['corechart'], callback: drawchart});

    </script>
  </head>

  <body>
    <!--Div that will hold the pie chart-->
    <div id="chart"></div>
  </body>

仪表板代码

<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">

      // Load the Visualization API and the piechart package.
    //  google.load('visualization', '1.0', {'packages':['corechart']});
google.load('visualization', '1.0', {'packages':['controls']});
      // Set a callback to run when the Google Visualization API is loaded.
      google.setOnLoadCallback(drawChart);

      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
function drawChart () {
    var data = google.visualization.arrayToDataTable([
        ['Category', 'Name', 'Value'],
        ['Foo', 'Fiz', 5],
        ['Foo', 'Buz', 2],
        ['Bar', 'Qud', 7],
        ['Bar', 'Piz', 4],
        ['Cad', 'Baz', 6],
        ['Cad', 'Nar', 8]
    ]);

    var aggregateData = google.visualization.data.group(data, [0], [{
        type: 'number',
        label: 'Value',
        column: 2,
        aggregation: google.visualization.data.sum
    }]);

     var category_picker1 = new google.visualization.ControlWrapper({
            'controlType': 'CategoryFilter',
            'containerId': 'category_picker_div1',
            'options': {
                'filterColumnLabel': 'Category',
                'ui': {
                    'labelStacking': 'vertical',
                    'allowTyping': false,
                    'allowMultiple': true
                }
            }
        });
    var topLevel = true;

    // Create a Column chart, passing some options
        var chart = new google.visualization.ChartWrapper({
          'chartType': 'ColumnChart',
          'containerId': 'ColumnChart_div',
          'options': {
             'height': 400,
       'width': 600

          }
        });



    function draw (category) {
        if (topLevel) {
            // rename the title
            options.title = 'Top Level data';
            // draw the chart using the aggregate data
            chart.draw(aggregateData);
        }
        else {
            var view = new google.visualization.DataView(data);
            // use columns "Name" and "Value"
            view.setColumns([1, 2]);
            // filter the data based on the category
            view.setRows(data.getFilteredRows([{column: 0, value: category}]));
            // rename the title
            options.title = 'Category: ' + category;
            // draw the chart using the view
            chart.draw(view);
        }
    }

    google.visualization.events.addListener(chart, 'select', function () {
        if (topLevel) {
            var selection = chart.getSelection();
            // drill down if the selection isn't empty
            if (selection.length) {
                var category = aggregateData.getValue(selection[0].row, 0);
                topLevel = false;
                draw(category);
            }
        }
        else {
            // go back to the top
            topLevel = true;
            draw();
        }
    });
    // Create a dashboard

        new google.visualization.Dashboard(document.getElementById('dashboard')).


         bind([category_picker1],[chart]).
            // Draw the entire dashboard.

            draw(data);

      }


  /*  
   function _log(data) {
       console.log(data);
   } */

   </script>
   </head>
  <body>
  <div id="dashboard"/>

      <!--Divs that will hold each control and chart-->

       <div id="category_picker_div1"></div>


         <div id="ColumnChart_div"></div>
    <!--Div that will hold the pie chart-->



    </div>
  </body>
</html>

请提出建议。

问候，般若