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ライブラリを使用することをお勧めしますrelease notesによる...

jsapiローダーを介して利用できるままになっているGoogle Chartsのバージョンは、一貫して更新されなくなりました。新しい静的ローダーを今から使用してください。

これが唯一の...スニペット上記を参照、このソリューションの