将数据从GoogleChart保存到CSV

Question

我正在研究GoogleCharts项目，我希望将功能导出数据添加到CSV。我试图做，但没有工作。在小提琴URL是我想要添加导出到CSV数据的图表。请有人可以帮助我如何做到这一点？谢谢，这里是CSV函数的代码。

小提琴图表：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); 

Answer 1

为toolbar usage的文件中指出...

使用工具栏，可视化必须从一个URL的数据;您无法传递手动填充的DataTable或DataView对象。

因为你从头创建DataTable，工具栏将不会为你工作...

然而

，对于dataTableToCsv

google.visualization.dataTableToCsv(data) 

这种方法做一个静态方法不是包括列标题，
必须手动添加这些...

使用这种方法，您可以添加一个按钮来建立下载内容，

看到下面的工作片段...

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>&nbsp;Download CSV</span> 
 
      </button> 
 
     </div> 
 
     </td> 
 
    </tr> 
 
</table>

注：建议使用loader.js库对于google排行榜，根据release notes ...

通过jsapi加载程序保持可用的Google图表版本不再一致地更新。请从现在开始使用新的gstatic loader。

这只会改变load声明，请参阅上面的片段......