[英]How can I grab Google Visualization DataTable data after chart is loaded?
我想從頁面中獲取Google Chart數據,將其轉換為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.
我怎么能這樣做?
這里似乎發生的事情是你在調用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
}
對我來說,事件綁定從未起作用。 所以我必須做的是,在圖表page.js:
function setData(data) {
after_data = data;
}
google.visualization.dataTableToCsv(window.after_data);
並在chart.coffee中:
setData(data)
數據是Google dataTable對象的位置。
所以基本上我必須在頁面的google js文件之外創建一個setter。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.