如何将导出 csv 选项设置为谷歌可视化饼图中的按钮 [英] How to set export csv option to button in google visualization Pie chart
本文介绍了如何将导出 csv 选项设置为谷歌可视化饼图中的按钮的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在使用 Google 可视化饼图来显示交易状态.我想导出到 csv,工具栏有导出 csv、html、iGoogle 的功能,但我只想特定于 csv,没有选择选项.
解决方案
你可以使用静态方法 --> dataTableToCsv
google.visualization.dataTableToCsv
这将在数据表中创建数据的 csv 字符串.
它不会导出列标题,但可以手动添加...
请参阅以下工作片段...
google.charts.load('current', {包:['corechart']}).then(函数(){var 数据 = google.visualization.arrayToDataTable([['标签','值'],['A', 10],['B', 20],['C', 30],['D', 40],['E', 50],['F', 60]]);var chart = new google.visualization.PieChart(document.getElementById('chart_div'));图表绘制(数据);$('.csv-button').on('click', function () {var browserIsIE;var csvColumns;var csvContent;var 下载链接;var 文件名;//建立列标题csvColumns = '';for (var i = 0; i < data.getNumberOfColumns(); i++) {csvColumns += data.getColumnLabel(i);如果 (i < (data.getNumberOfColumns() - 1)) {csvColumns += ',';}}csvColumns += '
';//构建数据行csvContent = csvColumns + google.visualization.dataTableToCsv(data);//下载文件browserIsIE = false ||!!document.documentMode;文件名 = 'data.csv';如果(浏览器IsIE){window.navigator.msSaveBlob(new Blob([csvContent], {type: 'data:text/csv'}), fileName);} 别的 {downloadLink = document.createElement('a');downloadLink.href = 'data:text/csv;charset=utf-8,' + encodeURI(csvContent);downloadLink.download = 文件名;raiseEvent(downloadLink, 'click');下载链接 = 空;}});函数 raiseEvent(element, eventType) {var eventRaised;如果(document.createEvent){eventRaised = document.createEvent('MouseEvents');eventRaised.initEvent(eventType, true, false);element.dispatchEvent(eventRaised);} else if (document.createEventObject) {eventRaised = document.createEventObject();element.fireEvent('on' + eventType, eventRaised);}}});
<script src="https://code.jquery.com/jquery-1.12.4.js"></脚本><script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script><script src="https://www.gstatic.com/charts/loader.js"></script><link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"><div><button class="csv-button ui-button ui-widget ui-corner-all"><span class="ui-icon ui-icon-circle-triangle-s"></span><span> 下载CSV</span>按钮>
<div id="chart_div"></div>
I am using Google visualization pie chart for showing transaction state. I want to export to csv, there is functionality ToolBar to export csv,html,iGoogle but I want to specific to csv only without select options.
解决方案
you can use static method --> dataTableToCsv
google.visualization.dataTableToCsv
this will create a csv string of the data in a data table.
it will not export the column headings, but those can be added manually...
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['A', 10],
['B', 20],
['C', 30],
['D', 40],
['E', 50],
['F', 60]
]);
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data);
$('.csv-button').on('click', function () {
var browserIsIE;
var csvColumns;
var csvContent;
var downloadLink;
var fileName;
// build column headings
csvColumns = '';
for (var i = 0; i < data.getNumberOfColumns(); i++) {
csvColumns += data.getColumnLabel(i);
if (i < (data.getNumberOfColumns() - 1)) {
csvColumns += ',';
}
}
csvColumns += '
';
// build data rows
csvContent = csvColumns + google.visualization.dataTableToCsv(data);
// download file
browserIsIE = false || !!document.documentMode;
fileName = 'data.csv';
if (browserIsIE) {
window.navigator.msSaveBlob(new Blob([csvContent], {type: 'data:text/csv'}), fileName);
} else {
downloadLink = document.createElement('a');
downloadLink.href = 'data:text/csv;charset=utf-8,' + encodeURI(csvContent);
downloadLink.download = fileName;
raiseEvent(downloadLink, 'click');
downloadLink = null;
}
});
function raiseEvent(element, eventType) {
var eventRaised;
if (document.createEvent) {
eventRaised = document.createEvent('MouseEvents');
eventRaised.initEvent(eventType, true, false);
element.dispatchEvent(eventRaised);
} else if (document.createEventObject) {
eventRaised = document.createEventObject();
element.fireEvent('on' + eventType, eventRaised);
}
}
});
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<div>
<button class="csv-button ui-button ui-widget ui-corner-all">
<span class="ui-icon ui-icon-circle-triangle-s"></span><span> Download CSV</span>
</button>
</div>
<div id="chart_div"></div>
这篇关于如何将导出 csv 选项设置为谷歌可视化饼图中的按钮的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文