代码之家 › 专栏 › 技术社区 › Babasaheb Dhodad Nicholas J. Markkula

如何将导出csv选项设置为google可视化饼图中的按钮

pie-chart google-visualization charts html javascript

Babasaheb Dhodad Nicholas J. Markkula · 技术社区 · 8 年前

我使用谷歌可视化饼图来显示事务状态。我想导出到csv,有一个功能工具栏可以导出csv、html、iGoogle,但我只想指定到csv,不需要选择选项。

2 回复 | 直到 8 年前

WhiteHat 8 年前

您可以使用静态方法--> dataTableToCsv

google.visualization.dataTableToCsv

这将在数据表中创建csv数据字符串。

它不会导出列标题,但可以手动添加这些标题。。。

请参阅以下工作段。。。

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Label', 'Value'],
    ['A', 10],
    ['B', 20],
    ['C', 30],
    ['D', 40],
    ['E', 50],
    ['F', 60]
  ]);

  var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
  chart.draw(data);

  $('.csv-button').on('click', function () {
    var browserIsIE;
    var csvColumns;
    var csvContent;
    var downloadLink;
    var fileName;

    // build column headings
    csvColumns = '';
    for (var i = 0; i < data.getNumberOfColumns(); i++) {
      csvColumns += data.getColumnLabel(i);
      if (i < (data.getNumberOfColumns() - 1)) {
        csvColumns += ',';
      }
    }
    csvColumns += '\n';

    // build data rows
    csvContent = csvColumns + google.visualization.dataTableToCsv(data);

    // download file
    browserIsIE = false || !!document.documentMode;
    fileName = 'data.csv';
    if (browserIsIE) {
      window.navigator.msSaveBlob(new Blob([csvContent], {type: 'data:text/csv'}), fileName);
    } else {
      downloadLink = document.createElement('a');
      downloadLink.href = 'data:text/csv;charset=utf-8,' + encodeURI(csvContent);
      downloadLink.download = fileName;
      raiseEvent(downloadLink, 'click');
      downloadLink = null;
    }
  });

  function raiseEvent(element, eventType) {
    var eventRaised;
    if (document.createEvent) {
      eventRaised = document.createEvent('MouseEvents');
      eventRaised.initEvent(eventType, true, false);
      element.dispatchEvent(eventRaised);
    } else if (document.createEventObject) {
      eventRaised = document.createEventObject();
      element.fireEvent('on' + eventType, eventRaised);
    }
  }
});

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<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>
<div id="chart_div"></div>

-1

Negi Rox 8 年前

谷歌将为您提供所需的API密钥

<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart']});
var visualization;

function draw() {
  drawVisualization();
  drawToolbar();
}

function drawVisualization() {
  var container = document.getElementById('visualization_div');
  visualization = new google.visualization.PieChart(container);
  new google.visualization.Query('https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA').
      send(queryCallback);
}

function queryCallback(response) {
  visualization.draw(response.getDataTable(), {is3D: true});
}

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);
</script>
</head>
<body>
<div id="visualization_div" style="width: 270px; height: 200px;"></div>
<div id="toolbar_div"></div>
</body>
</html>