在Google图表仪表板中向下钻取

Question

谁能建议我使用代码来实现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>

问候，般若

Answer 1

这是我的仪表板示例。

<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 controls package.
      google.load('visualization', '1.0', {'packages':['controls']});

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

      // Callback that creates and populates a data table,
      // instantiates a dashboard, a range slider and a pie chart,
      // passes in the data and draws it.
      function drawDashboard() {

        // Create our data table.
        var data = google.visualization.arrayToDataTable([
          ["Month","Order Count","Total Cancelled","Total Sales"],["August 2014",4,0,120],["July 2014",3,0,30]
        ]);

        var data2 = google.visualization.arrayToDataTable([
        ["Month","Day","Order Count","Total Cancelled","Total Sales"],["July 2014","2014-07-10",1,0,0],["July 2014","2014-07-21",2,0,0],["August 2014","2014-08-01",4,0,120]
        ]);

        var formatter = new google.visualization.NumberFormat({pattern:'###,###.00',prefix:'$'});

        formatter.format(data,3);

        // Create a dashboard.
        var dashboard = new google.visualization.Dashboard(
            document.getElementById('dashboard_div'));

        // Create a range slider, passing some options
        var categoryFilter = new google.visualization.ControlWrapper({
          'controlType': 'CategoryFilter',
          'containerId': 'filter_div',
          'options': {
            'filterColumnLabel': 'Month',
            'ui':{label:''}
          }
        });

        // Create a pie chart, passing some options
        var columnChart = new google.visualization.ChartWrapper({
          'chartType': 'ColumnChart',
          'containerId': 'chart_div',
          'view': {'columns':[0,3,1]},
          'options':{'height':'400','legend':'none',hAxis: {title: '', textStyle: {color: 'none'},viewWindow:{max:12}},
                 vAxis:{title:'',textStyle:{fontName: 'Lato Light',italic:false},format:'$###,###.00'},
                colors:['#64b964','#eba034'],
                chartArea:{left:80,top:80,width:"100%",height:"70%"},
                'animation':{duration: 1000,easing: 'out'},
                bar: {groupWidth: '85%'}
                }
        });

          var cssClassNames = {
            'headerRow': 'italic-darkblue-font large-font bold-font',
            'tableRow': 'no-border',
            'oddTableRow': 'beige-background',
            'selectedTableRow': 'orange-background large-font',
            'hoverTableRow': '',
            'headerCell': 'no-border',
            'tableCell': 'no-border',
            'rowNumberCell': 'no-border'
        };

        var table = new google.visualization.ChartWrapper({
            'chartType':'Table',
            'containerId':'table_div',
            'options':{'page':'enable','pageSize':50,'allowHtml': true,'cssClassNames': cssClassNames}
        })

        var status = 0;


        function columnselectHandler() {
          var selectedItem = columnChart.getChart().getSelection()[0];
          if (selectedItem) {
            if (status == 0){
                var name = data.getValue(selectedItem.row, 0);
                //categoryFilter1.setState({'selectedValues':[name]});
                //dashboard1.bind(categoryFilter1, [columnChart1]);
                //dashboard1.draw(data2);
                columnChart.setView({'columns':[1,4,2]});
                table.setView({'columns':[1,2,3,4]});
                categoryFilter.setState({'selectedValues':[name]});
                columnChart.setOption('hAxis.viewWindow.max',31);
                dashboard.bind(categoryFilter, [columnChart],table);
                dashboard.draw(data2);
                status = status+1
                //document.getElementById("dashboard_div").style.display = "none";
                //document.getElementById("dashboard_div1").style.display = "block";
            }
          }
        }

        function tableselectHandler() {
          var selectedItem = table.getChart().getSelection()[0];
          if (selectedItem) {
          if (status == 0){
            var name = data.getValue(selectedItem.row, 0);
            columnChart.setView({'columns':[1,4,2]});
            table.setView({'columns':[1,2,3,4]});
            categoryFilter.setState({'selectedValues':[name]});
            columnChart.setOption('hAxis.viewWindow.max',31);
            dashboard.bind(categoryFilter, [columnChart],table);
            dashboard.draw(data2);
            status = status+1
            }
          }
        }

        function categoryHandler(){
            var selectedMonth = categoryFilter.getState()['selectedValues'];
            if(selectedMonth.length == 0){
                columnChart.setView({'columns':[0,3,1]});
                table.setView({'columns':[0,1,2,3]});
                columnChart.setOption('hAxis.viewWindow.max',12);
                dashboard.bind(categoryFilter, [columnChart,table]);
                dashboard.draw(data);
                status = status-1
            }
        }



        google.visualization.events.addListener(columnChart, 'select', columnselectHandler);
        google.visualization.events.addListener(categoryFilter, 'statechange', categoryHandler);
        google.visualization.events.addListener(table, 'select', tableselectHandler);


        // Establish dependencies, declaring that 'filter' drives 'pieChart',
        // so that the pie chart will only display entries that are let through
        // given the chosen slider range.
        dashboard.bind(categoryFilter, [columnChart,table]);

        // Draw the dashboard.
        dashboard.draw(data);
      }
    </script>
    <style>
    .charts-combobox
    {
    display:none;
    }
    .charts-inline-block
    {
    display:none;
    }
    .label-input-label
    {
    display:none;
    }
    .charts-combobox-button
    {
    display:none;
    }
    .no-border {
    border: 0px solid white;
    border-bottom: 1px solid #BDBDBD;
    align-self: left;
    padding: 10px 10px 10px 10px !important;
    }
    .bold-font {
    font-weight: bold;
    }
    .google-visualization-table-td-number{
    text-align: left !important;

    }
    .google-visualization-table-sorthdr{
    text-align: left !important;
    padding: 10px 10px 10px 10px !important;
    }

    </style>
  </head>

  <body>
    <!--Div that will hold the dashboard-->
    <div id="dashboard_div">
      <!--Divs that will hold each control and chart-->
      <div id="chart_div" ></div>
      <div id="filter_div" style="margin-left:52px;margin-top:-20px"></div>
      <div id="table_div" style="margin-top:10px"></div>
    </div>
  </body>
</html>