如何从电子表格创建 google 仪表板，包括饼图和范围 select 过滤器？

Question

有谁知道如何将仪表板绑定到 Google Spreadsheet 的范围？

在我当前的代码中，我假设仪表板可以像这样绑定到 Google Spreadsheet 的范围，但是 setDataTable 函数调用让我很难过。

仅从 sheet 名称和时间中选择两列。

  <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([
                  ['Name', 'Donuts eaten'],
                  ['Michael' , 5],
                  ['Elisa', 7],
                  ['Robert', 3],
                  ['John', 2],
                  ['Jessica', 6],
                  ['Aaron', 1],
                  ['Margareth', 8]
                ]);

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

                // Create a range slider, passing some options
                var donutRangeSlider = new google.visualization.ControlWrapper({
                  'controlType': 'NumberRangeFilter',
                  'containerId': 'filter_div',
                  'options': {
                    'filterColumnLabel': 'Donuts eaten'
                  }
                });

                // Create a pie chart, passing some options
                var pieChart = new google.visualization.ChartWrapper({
                  'chartType': 'PieChart',
                  'containerId': 'chart_div',
                  'options': {`enter code here`
                    'width': 300,
                    'height': 300,
                    'pieSliceText': 'value',
                    'legend': 'right'
                  }
                });

                // 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(donutRangeSlider, pieChart);

                // Draw the dashboard.
                dashboard.draw(data);
              }
            </script>
          </head>

          <body>
            <!--Div that will hold the dashboard-->
            <div id="dashboard_div">
              <!--Divs that will hold each control and chart-->
              <div id="filter_div"></div>
              <div id="chart_div"></div>
            </div>
          </body>
        </html>

Answer 1

所以，您只想将 Name/Time 转换为数据表？您必须将 google 服务器中的数组，return 转换为 HTML 页面，然后转换为数据表，例如：

在code.gs

function getTimes(){
  var playTimes = SpreadsheetApp.openById("1csv3OQ0IrVNyNIALcpqoLewccgYEEwErsS-Tp43IZfQ").getSheetByName("players").getRange("B1:E").getValues();
  for( i in playTimes ){
    playTimes[i] = [ playTimes[i].splice(0, 1)[0], playTimes[i].splice(2, 1)[0] ];
  }
  return playTimes;
}

在HTML页面->将google.setOnLoadCallback(drawDashboard);改为google.setOnLoadCallback(loadPlayTimes);，同时将function drawDashboard()改为function drawDashboard( playTimes )接受一个参数：

function loadPlayTimes(){
  google.script.run.withSuccessHandler(drawDashboard).getTimes();
}

并这样创建数据表：

var data = google.visualization.arrayToDataTable( playTimes );

如何从电子表格创建 google 仪表板，包括饼图和范围 select 过滤器？

How to create google dashboard including piechart and range select filter from a spreadsheet?

google-visualization

google-sheets

google-apps-script