javascript - 将数据从 GoogleChart 保存到 CSV

Question

我正在从事 GoogleCharts 项目，我想将函数导出数据添加到 CSV。我试着做，但没有成功。在 fiddle URL 中是我的图表，我想在其中添加导出到 CSV 数据。请问有人可以帮我怎么做吗？？谢谢，这是 CSV 函数的代码。

fiddle 图表: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 的文档中所述...

To use a toolbar, your visualization must get its data from a URL; you cannot pass in hand-populated DataTable or DataView objects.

由于您是从头开始创建 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>

注意:根据 release notes，推荐使用 loader.js 库来制作谷歌图表。 ...

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.

这只会改变 load 语句，见上面的片段......