图表的 HTML 可视化答案

【问题标题】：HTML Visualization for Charts图表的 HTML 可视化
【发布时间】：2015-05-06 07:52:00
【问题描述】：

我正在尝试使用 HTML 可视化来显示图表，类似于 UiApp 的做法（现已弃用）。我找到了这个例子：

.gs

function doGet() {

return HtmlService.createTemplateFromFile('html')
.evaluate() 
.setTitle('My WebApp')
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
};

function doSomething() {
  return SpreadsheetApp.openById("ABC123").getActiveSheet.getRange(1, 1).getValue;
};

.html

<html>
<script>
function onSuccess(A1) {
  var value = A1
}

  google.script.run.withSuccessHandler(onSuccess)
      .doSomething();
</script>

<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load('visualization', '1', {'packages':['corechart', 'controls']});
  google.setOnLoadCallback(drawChart);



  function drawChart() {

    var dashboard = new google.visualization.Dashboard(
      document.getElementById('programmatic_dashboard_div'));

    // We omit "var" so that programmaticSlider is visible to changeRange.
    programmaticSlider = new google.visualization.ControlWrapper({
      'controlType': 'NumberRangeFilter',
      'containerId': 'programmatic_control_div',
      'options': {
        'filterColumnLabel': 'Donuts eaten',
        'ui': {'labelStacking': 'vertical'}
      }
    });


   programmaticChart  = new google.visualization.ChartWrapper({
    'chartType': 'PieChart',
    'containerId': 'programmatic_chart_div',
    'options': {
      'width': 300,
      'height': 300,
      'legend': 'none',
      'chartArea': {'left': 15, 'top': 15, 'right': 0, 'bottom': 0},
      'pieSliceText': 'value'
    }
  });

  var data = google.visualization.arrayToDataTable([

    ['Name', 'Donuts eaten', 'Gender'],
    ['Michael' , value, 'Male'],
    ['Elisa', 7, 'Female'],
    ['Robert', 3, 'Male'],
    ['John', 2, 'Male'],
    ['Jessica', 6, 'Female'],
    ['Aaron', 1, 'Male'],
    ['Margareth', 8, 'Female']
  ]);

  dashboard.bind(programmaticSlider, programmaticChart);
  dashboard.draw(data);
}

</script>
  </head>
  <body>
    <div id="programmatic_dashboard_div" style="border: 1px solid #ccc">
    <table class="columns">
    <tr>
      <td>
        <div id="programmatic_control_div" style="padding-left: 2em; min-width: 250px"></div>
        <div>
          <button style="margin: 1em 1em 1em 2em" onclick="changeRange();">
            Select range [2, 5]
          </button><br />
          <button style="margin: 1em 1em 1em 2em" onclick="changeOptions();">
            Make the pie chart 3D
          </button>
        </div>
        <script type="text/javascript">
          function changeRange() {
            programmaticSlider.setState({'lowValue': 2, 'highValue': 5});
            programmaticSlider.draw();
          }

          function changeOptions() {
            programmaticChart.setOption('is3D', true);
            programmaticChart.draw();
          }
        </script>
      </td>
      <td>
        <div id="programmatic_chart_div"></div>
      </td>
    </tr>
  </table>
</div>

这工作得很好，但我不想自己输入数据，而是想从电子表格中提取数据。例如：

SpreadsheetApp.openById("ABC123").getActiveSheet.getRange(1, 1).getValue;

我尝试将那段代码放在脚本的开头、中间、几乎所有地方，但它似乎不起作用。任何想法如何实现这一目标？

提前致谢

【问题讨论】：

标签： javascript html charts google-apps-script google-visualization

【解决方案1】：

包含图表数据的变量名为data

var data = google.visualization.arrayToDataTable([Two D array here]);

因此，在您的 onSuccess 函数中，将返回值设置为 data：

function onSuccess(A1) {
  var data = A1;
};

现在，图表会在页面加载时自动加载。 HTML Script 标记中的代码在页面加载时正在运行。代码不在函数内部，然后会被调用。没关系，如果您希望该代码在页面加载时自动运行。

google.load(

上述代码行在页面加载时自动运行。我之所以提到这一点，是因为当您从电子表格中获取数据时，如果数据在函数内部，则数据在其变量中的时间段仅在函数运行期间。函数运行完成后，函数内部变量中的值将丢失。如果您在两个单独的实例中运行图表创建代码和数据检索代码，您需要一种长期存储数据的方法，以便将其传递给图表创建代码。

也许把图表代码放在你的成功函数中：

function onSuccess(A1) {
  // Gets a cache that is specific to the current user of the script
  var cache = CacheService.getUserCache();
  cache.put('chartData', A1);

  google.load('visualization', '1', {'packages':['corechart', 'controls']});
  google.setOnLoadCallback(drawChart);
};

function drawChart() {
  //cache is available to use here
  var cachedData = cache.get('chartData');
  var data = google.visualization.arrayToDataTable(cachedData);
};

【讨论】：

我已经尝试过了，虽然它可以在普通的 html 脚本中工作，但放在
请查看我更新的帖子，看看我是如何尝试的。谢谢
你用那个globalVariable做什么？它是全局定义的，但也在onSuccess() 中本地定义，因此该函数中的赋值不会影响全局。此外，当调用drawChart() 时，它将与onSuccess() 回调在不同的执行实例中，因此globalVariable 将为空白。虽然情况不同，但this answer 的缓存解决方案将适用于这种情况。
感谢您指出全局问题。我添加了一些使用cache的代码。