Question

我正在开发GoogleCharts项目，我想将功能导出数据添加到CSV。我试图做，但没有奏效。在小提琴中，URL是我想要添加导出到CSV数据的图表。请有人帮我怎么做？谢谢，这是CSV功能的代码。

    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对象。

因为您从头开始创建!!newRecord，所以工具栏不适合您......

但是，DataTable

有一种静态方法

dataTableToCsv

此方法不包括列标题，
必须手动添加......

要使用此方法，您可以添加一个按钮来构建下载内容，

请参阅以下工作代码段...

＆＃13;

google.visualization.dataTableToCsv(data)

＆＃13;

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() {});

}

＆＃13;

注意：根据release notes ...

，建议您使用

<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>

库添加谷歌图表

通过jsapi加载程序保留的Google Charts版本不再一致更新。从现在开始请使用新的gstatic装载机。

这只会更改loader.js语句，请参阅上面的代码段...

将GoogleChart中的数据保存为CSV

1 个答案: