将数据从 GoogleChart 保存到 CSV [英] Save data from GoogleChart to CSV
本文介绍了将数据从 GoogleChart 保存到 CSV的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在处理 GoogleCharts 项目，我想将函数导出数据添加到 CSV.我试图制作，但没有奏效.在小提琴 URL 是我的图表，我想在其中添加导出到 CSV 数据.请问有人可以帮我怎么做吗??谢谢，这是 CSV 函数的代码.
小提琴图:http://jsfiddle.net/ZmVcZ/292/
函数 drawToolbar() {var 组件 = [{类型:'csv'，数据源:'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA'}];var container = document.getElementById('toolbar_div');google.visualization.drawToolbar(容器，组件)；};google.charts.setOnLoadCallback(draw); 解决方案
如 工具栏使用...
<块引用>要使用工具栏，您的可视化必须从 URL 获取其数据；您不能传入手动填充的 DataTable 或 DataView 对象.
由于您是从头开始创建 DataTable，工具栏将不适合您...
然而，dataTableToCsv 有一个静态方法
google.visualization.dataTableToCsv(data)此方法不包括列标题，
必须手动添加那些...
要使用此方法，您可以添加一个按钮来构建下载内容，
请参阅以下工作片段...
google.charts.load('current', {回调:drawChart，包:['控件'，'图表编辑器']});varaxisX = "Cas";var axisY = "Tlak";var 缩放 = 真；无功仪表板；功能配置(){myOutput = document.getElementById('button');axisX = document.getElementById('axisX').value;axisY = document.getElementById('axisY').value;zoom = document.getElementById('zoomchart');if(document.getElementById('zoomchart').checked){缩放 = 真；}别的{缩放 = 假；}仪表板 = document.getElementById('dashboard');绘制图表()；}函数 drawChart() {var data = new google.visualization.DataTable();data.addColumn('number', 'X');data.addColumn('number', 'Y1');data.addColumn('number', 'Y2');无功数据1 = 5;无功数据2 = 100;for (var i = 0; i <10000; i++) {数据.addRows([[我，我+数据1，我+数据2]]);}var dash = new google.visualization.Dashboard(document.getElementById('dashboard'));var control = new google.visualization.ControlWrapper({controlType: 'ChartRangeFilter',容器 ID: 'control_div',选项: {过滤列索引:0，用户界面:{图表选项:{身高:40，宽度:600，图表区域:{宽度:'90%'}}}}});var 图表 = 新的 google.visualization.ChartWrapper({图表类型:'线图'，容器 ID: 'chart_div',选项: {title: 'Prubeh tlaku v case',标题文本样式:{颜色:'#333'，字体大小:18},h轴:{标题:axisX},v轴:{标题:Y轴},探险家:{轴:'水平'，keepInBounds: 真,最大放大:4.0}}});函数 setOptions(wrapper) {wrapper.setOption('width', 600);}$('.csv-button').on('click', function () {var csvColumns;var csvContent;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);downloadLink = document.createElement('a');downloadLink.href = 'data:text/csv;charset=utf-8,' + encodeURI(csvContent);downloadLink.download = 'data.csv';下载Link.click();下载链接 = 空；});dash.bind([控制], [图表]);破折号.绘制(数据)；google.visualization.events.addListener(control, 'statechange', function() {});}<script src="https://www.gstatic.com/charts/loader.js"></script><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script><link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" type="text/css"/><表格><tr><td colspan="3">Nastavení vlastností</td></tr><tr><td>Nastavení názvu osy X</td><td>Nastavení názvu osy Y</td></tr><tr><td><input type="text" id="axisX" maxlength="30" placeholder="Zde napíšte název osy X ..."></td><td><input type="text" id="axisY" maxlength="40" placeholder="Zde napíšte název osy Y ..."></td></tr><tr><td colspan="2">Zmena barvy prubehu a názvu</td></tr><tr><td colspan="2"><input type="text" id="colorsignal" maxlength="30" placeholder="Barva vybrané osy ..."><tr><td colspan="2"><input onclick="konfigurace()" type="button" class="button" value="Potvrdit a vykreslit"></td></tr><tr><td colspan="3"><div id="仪表板"></div></td></tr><tr><td colspan="3"><div id="chart_div" style="width: 100%; height: 100%;"></div></td></tr><tr><td colspan="3">Výber rozsahu</td></tr><tr><th colspan="3"><div id="control_div"></div></th></tr><tr><td><div id="toolbar_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></td></tr></table>
注意:根据 发行说明...
<块引用>通过 jsapi 加载器保持可用的 Google Charts 版本不再持续更新.请从现在开始使用新的 gstatic 加载器.
这只会改变 load 语句，见上面的片段...
I'm working on GoogleCharts project, I wanted add function export data to CSV. I tried to make, but didin´t worked. In fiddle URL is my chart where I want add export to CSV data. Please could someone help me how to do it?? thanks, Here is code for CSV function.
Fiddle Chart: http://jsfiddle.net/ZmVcZ/292/
function drawToolbar() {
var components = [
{type: 'csv', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA'}
];
var container = document.getElementById('toolbar_div');
google.visualization.drawToolbar(container, components);
};
google.charts.setOnLoadCallback(draw);
解决方案
as stated in the documentation for toolbar usage...
To use a toolbar, your visualization must get its data from a URL; you cannot pass in hand-populated DataTable or DataView objects.
since you're creating a DataTable from scratch, the toolbar will not work for you...
however, there is a static method for dataTableToCsv
google.visualization.dataTableToCsv(data)
this method does not include the column headings,
have to add those manually...
to use this method, you could add a button to build the download content,
see following working snippet...
google.charts.load('current', {
callback: drawChart,
packages: ['controls', 'charteditor']
});
var axisX = "Cas";
var axisY = "Tlak";
var zoom = true;
var dashboard;
function konfigurace() {
myOutput = document.getElementById('button');
axisX = document.getElementById('axisX').value;
axisY = document.getElementById('axisY').value;
zoom = document.getElementById('zoomchart');
if(document.getElementById('zoomchart').checked)
{
zoom = true;
}
else
{
zoom = false;
}
dashboard = document.getElementById('dashboard');
drawChart();
}
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Y1');
data.addColumn('number', 'Y2');
var data1 = 5;
var data2 = 100;
for (var i = 0; i < 10000; i++) {
data.addRows([
[i, i + data1, i + data2]
]);
}
var dash = new google.visualization.Dashboard(document.getElementById('dashboard'));
var control = new google.visualization.ControlWrapper({
controlType: 'ChartRangeFilter',
containerId: 'control_div',
options: {
filterColumnIndex: 0,
ui: {
chartOptions: {
height: 40,
width: 600,
chartArea: {
width: '90%'
}
}
}
}
});
var chart = new google.visualization.ChartWrapper({
chartType: 'LineChart',
containerId: 'chart_div',
options: {
title: 'Prubeh tlaku v case',
titleTextStyle: {
color: '#333',
fontSize: 18
},
hAxis: {
title: axisX
},
vAxis: {
title: axisY
},
explorer: {
axis: 'horizontal',
keepInBounds: true,
maxZoomIn: 4.0
}
}
});
function setOptions(wrapper) {
wrapper.setOption('width', 600);
}
$('.csv-button').on('click', function () {
var csvColumns;
var csvContent;
var downloadLink;
// build column headings
csvColumns = '';
for (var i = 0; i < data.getNumberOfColumns(); i++) {
csvColumns += data.getColumnLabel(i);
if (i < (data.getNumberOfColumns() - 1)) {
csvColumns += ',';
}
}
csvColumns += '
';
// get data rows
csvContent = csvColumns + google.visualization.dataTableToCsv(data);
downloadLink = document.createElement('a');
downloadLink.href = 'data:text/csv;charset=utf-8,' + encodeURI(csvContent);
downloadLink.download = 'data.csv';
downloadLink.click();
downloadLink = null;
});
dash.bind([control], [chart]);
dash.draw(data);
google.visualization.events.addListener(control, 'statechange', function() {});
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" type="text/css"/>
<table>
<tr>
<td colspan="3">Nastavení vlastností</td>
</tr>
<tr>
<td>Nastavení názvu osy X</td>
<td>Nastavení názvu osy Y</td>
</tr>
<tr>
<td>
<input type="text" id="axisX" maxlength="30" placeholder="Zde napíšte název osy X ...">
</td>
<td>
<input type="text" id="axisY" maxlength="40" placeholder="Zde napíšte název osy Y ...">
</td>
</tr>
<tr>
<td colspan="2"> Zmena barvy prubehu a názvu</td>
</tr>
<tr>
<td colspan="2">
<input type="text" id="colorsignal" maxlength="30" placeholder="Barva vybrané osy ...">
<tr>
<td colspan="2">
<input onclick="konfigurace()" type="button" class="button" value="Potvrdit a vykreslit">
</td>
</tr>
<tr>
<td colspan="3">
<div id="dashboard"></div>
</td>
</tr>
<tr>
<td colspan="3">
<div id="chart_div" style="width: 100%; height: 100%;"></div>
</td>
</tr>
<tr>
<td colspan="3">Výber rozsahu</td>
</tr>
<tr>
<th colspan="3">
<div id="control_div"></div>
</th>
</tr>
<tr>
<td>
<div id="toolbar_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>
</td>
</tr>
</table>
note: recommend using the loader.js library for google charts, according to the release notes...
The version of Google Charts that remains available via the jsapi loader is no longer being updated consistently. Please use the new gstatic loader from now on.
this will only change the load statement, see above snippet...
这篇关于将数据从 GoogleChart 保存到 CSV的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
