Javascript 使用java脚本在google图表中向下搜索（仪表板）_Javascript_Google Visualization

Javascript 使用java脚本在google图表中向下搜索（仪表板）

javascript google-visualization

Javascript 使用java脚本在google图表中向下搜索（仪表板）,javascript,google-visualization,Javascript,Google Visualization,我有一个代码来获取图表的向下钻取功能。em无法将相同的功能放在google dashboard中，我有一个类别过滤器。作为em新手，有人能帮我编写代码吗这是我需要的用于仪表板的谷歌图表的代码 <html> <head>  <script type="text/javascript" src="https://www.google.com/jsapi"></script>

我有一个代码来获取图表的向下钻取功能。em无法将相同的功能放在google dashboard中，我有一个类别过滤器。作为em新手，有人能帮我编写代码吗

这是我需要的用于仪表板的谷歌图表的代码

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

请建议

问候,，

般若

到底什么不起作用？@juvian的问题是正确的。我将其复制并粘贴到plnkr.co中，效果很好。此代码正在运行，我需要在goole dashboard中使用控件。有人可以帮助我使用此代码吗。@juvian我需要在dashboard中使用此代码，em在使用dashboard时无法使用此代码。那么，请使用dashboard发布您的代码。您需要使用ChartWrapper、ControlWrapper、Dashboard，事件监听器会随着ChartWrapper.getChart而不是chart发生一些变化