将数据从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）
此方法不不包括列标题，
必须手动添加......
要使用此方法，您可以添加一个按钮来构建下载内容，
请参见以下工作片段...
< pre class = snippet-code-js lang-js prettyprint-override>
google.charts.load（'current'，{回调：drawChart，包：['controls'，'charteditor']} ）; var axisX = Cas; var axisY = Tlak; var zoom = true; var仪表板;函数konfigurace（）{myOutput = document.getElementById（'b utton’）； 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（）;}函数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;对于（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'，选项：{title：'Prubeh tlaku v case'，titleTextStyle：{color：'＃333'，fontSize：18}， hAxis：{title：axisX}，vAxis：{title：axisY}，浏览器：{axis：'horizontal'，keepInBounds：true，maxZoomIn：4.0}}}））;函数setOptions（wrapper）{wrapper.setOption（‘width’，600）； } $（'。csv-button'）。on（'click'，function（）{var csvColumns; var csvContent; var downloadLink; //建立列标题csvColumns =''; for（var i = 0; i< data.getNumberOfColumns（）; i ++）{csvColumns + = data.getColumnLabel（i）; if（i<（data.getNumberOfColumns（）-1））{csvColumns + ='，';}} csvColumns + ='\ n'; // //获得数据行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（数据）; google.visualization.events.addListener（control，'statechange'，function（）{}）;}
<脚本src = https://www.gstatic.com/charts/loader.js>< / 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ázvuosy X< / td> < td>Nastavenínázvuosy Y< / td> < / tr> < tr> < td> < input type = text id = axisX maxlength = 30 placeholder = Zdenapíštenázevosy X ...> < / td> < td> < input type = text id = axisY maxlength = 40 placeholder = Zdenapíštenázevosy Y ...> < / td> < / tr> < tr> < td colspan = 2> Zmena barvy prubehu anázvu< td> < / tr> < tr> < td colspan = 2> < input type = text id = colorsignal maxlength = 30 placeholder = Barvavybranéosy ...> < tr> < td colspan = 2> < input onclick = konfigurace（） type = button class = button value = Potvrdit vykreslit> < / td> < / tr> < tr> < td colspan = 3> < div id = dashboard>< / div> < / td> < / tr> < tr> < td colspan = 3> < div id = chart_div style =宽度：100％；高度：100％;>< / div> < / td> < / tr> < tr> < td colspan = 3>Výberrozsahu< / 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> < / button> < / div> < / td> < / tr>< / table>
注意：根据loader.js 库Interactive / docs / release_notes rel = nofollow noreferrer>发行说明 ...
Google Charts版本仍然可以通过jsapi加载程序使用，而不再保持一致更新。从现在开始，请使用新的静态加载器。
这只会更改 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 += '\n';
// 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屋！
查看全文
