如何在图表加载后获取Google可视化数据表中的数据？

Question

我希望从页面中获取Google图表数据，将其转换为CSV格式，然后将其传递给下载器。

在chartpage.js文件中：

function downloadCSV(args) {
  var csvData, filename, link;
  var action = args.action_name;
  var csv = convertArrayOfObjectsToCSV({
    action_name: action
  });
  filename = args.filename || 'export.csv';

  csvData = encodeURI(csv);

  link = document.createElement('a');
  link.setAttribute('href', 'data:text/csv;charset=utf-8,' + csvData);
  link.setAttribute('type', 'data:text/csv;charset=utf-8');
  link.setAttribute('download', filename);
  link.click();
 }

然后在 chart.coffee 中：

 init_chart = ->
   chart = new google.visualization.BarChart(document.getElementById('chart_div'));  //#chart_div in chart.html.haml

render_chart = (items, year)->
  @data = new google.visualization.DataTable()
  data.addColumn 'string', I18n.t('charts.name')

  // Other logic for building chart from Rails DB Data

  for key_item in items
  label = []
  [key, item] = key_item.split(':')

  if key == 'competitor_meded_involvement'
    label.push I18n.t('charts.competitor')

  label.push I18n.t("kol_items.#{item}")

  data.addColumn 'number', label.join(' - ')

// and so on.

google.charts.load 'current', 'packages': ['corechart']

google.visualization.events.addListener(@data, 'ready', setData) // I read this was a solution but it doesn't seem to help

google.charts.setOnLoadCallback ->

init_chart()

render_chart()

$(setData(@data)) //I tried passing this to a setter method over in chartpage.js which takes @data and tries to set it globally but that makes no difference at page load time.

在 chart.html.haml 文件中:

 %h5{id: "downloadCSV"}= link_to '<i class="fa fa-file-excel-o"></i> Download CSV'.html_safe, "#"

 #chart_div

所以我在主JS中尝试了以上两种方法以及以下方法：

case 'chart_kol_comparison':
        google.setOnLoadCallback(function() {
          str = google.visualization.dataTableToCsv(window.data); //This builds the CSV string and returns it to the download JS for output
        });

但页面的JS（HAML）中的数据变量：

 @data = new google.visualization.DataTable()

似乎只有在页面加载后才可用 - 而不是在上面的JS加载并尝试抓取数据时。

当我在控制台中运行以下内容时，它可以工作，但页面加载时却不能。这是在Rails应用程序中。

 str = google.visualization.dataTableToCsv(data); //var data is populated after page loads (available from console) but not from the JS at page load time.

我该如何开始处理这个问题？

- rcd

---

@WhiteHat 谢谢。我更新了问题。请让我知道这是否澄清了问题。 - rcd

@WhiteHat 我又更新了问题。图表是在chart.html.haml中绘制的，在chart.coffee的render_chart方法中，在google.charts.setOnLoadCallback中完成。 - rcd

现有答案有任何反馈吗？ - Tarun Lalwani

Answer 1

这里发生的事情似乎是在调用draw之后，您没有等待图表/数据表完全渲染。因此，最好的方法是创建一个事件处理程序，等待图表/数据表的ready事件。

google.visualization.events.addListener(tableChart, 'ready', myReadyHandler);

并且你添加一个函数来填充你的变量，但要在图表/数据表准备就绪之后进行。

function myReadyHandler(){
  // fill variables here or call directly your other methods, 
  // this will ensure, you can grab data from the chart/datatable
  // because is completely rendered and you can play with that
}

- xploshioOn

Answer 2

对我而言，事件绑定从来没有起作用过。所以我不得不在chart page.js文件中做以下操作：

function setData(data) {
  after_data = data;
}

google.visualization.dataTableToCsv(window.after_data);

而在 chart.coffee 文件中：

setData(data)

其中数据是Google dataTable对象。

基本上，我不得不在页面的Google JS文件之外创建一个setter。

- rcd