
本文介绍了将数据从 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...
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...
this will only change the load
statement, see above snippet...
这篇关于将数据从 GoogleChart 保存到 CSV的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!