0

任何人都可以建议我使用代码来实现谷歌聊天仪表板中的向下钻取功能。

说如果我点击年份，它应该深入到下一个级别，比如月份，然后是几周，然后是几天。

它称为向下钻取功能。这是用于图表的代码......我想知道如何在仪表板中使用 - 说类别过滤器。

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

问候，般若

4

1 回答 1

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>
于 2015-02-12T08:13:59.167 回答