本文介绍了将数据从 GoogleChart 保存到 CSV的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在处理 GoogleCharts 项目,我想将函数导出数据添加到 CSV.我试图制作,但没有奏效.在小提琴 URL 是我的图表,我想在其中添加导出到 CSV 数据.请问有人可以帮我怎么做吗??谢谢,这是 CSV 函数的代码.

小提琴图:http://jsfiddle.net/ZmVcZ/292/

 函数 drawToolbar() {var 组件 = [{类型:'csv',数据源:'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA'}];var container = document.getElementById('toolbar_div');google.visualization.drawToolbar(容器,组件);};google.charts.setOnLoadCallback(draw);
解决方案

工具栏使用...

要使用工具栏,您的可视化必须从 URL 获取其数据;您不能传入手动填充的 DataTable 或 DataView 对象.

由于您是从头开始创建 DataTable,工具栏将不适合您...

然而,dataTableToCsv 有一个静态方法

google.visualization.dataTableToCsv(data)

此方法包括列标题,
必须手动添加那些...

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

请参阅以下工作片段...

google.charts.load('current', {回调:drawChart,包:['控件','图表编辑器']});varaxisX = "Cas";var axisY = "Tlak";var 缩放 = 真;无功仪表板;功能配置(){myOutput = document.getElementById('button');axisX = document.getElementById('axisX').value;axisY = document.getElementById('axisY').value;zoom = document.getElementById('zoomchart');if(document.getElementById('zoomchart').checked){缩放 = 真;}别的{缩放 = 假;}仪表板 = document.getElementById('dashboard');绘制图表();}函数 drawChart() {var data = new google.visualization.DataTable();data.addColumn('number', 'X');data.addColumn('number', 'Y1');data.addColumn('number', 'Y2');无功数据1 = 5;无功数据2 = 100;for (var i = 0; i <10000; i++) {数据.addRows([[我,我+数据1,我+数据2]]);}var dash = new google.visualization.Dashboard(document.getElementById('dashboard'));var control = new google.visualization.ControlWrapper({controlType: 'ChartRangeFilter',容器 ID: 'control_div',选项: {过滤列索引:0,用户界面:{图表选项:{身高:40,宽度:600,图表区域:{宽度:'90%'}}}}});var 图表 = 新的 google.visualization.ChartWrapper({图表类型:'线图',容器 ID: 'chart_div',选项: {title: 'Prubeh tlaku v case',标题文本样式:{颜色:'#333',字体大小:18},h轴:{标题:axisX},v轴:{标题:Y轴},探险家:{轴:'水平',keepInBounds: 真,最大放大:4.0}}});函数 setOptions(wrapper) {wrapper.setOption('width', 600);}$('.csv-button').on('click', function () {var csvColumns;var csvContent;var 下载链接;//建立列标题csvColumns = '';for (var i = 0; i < data.getNumberOfColumns(); i++) {csvColumns += data.getColumnLabel(i);如果 (i < (data.getNumberOfColumns() - 1)) {csvColumns += ',';}}csvColumns += '
';//获取数据行csvContent = csvColumns + google.visualization.dataTableToCsv(data);downloadLink = document.createElement('a');downloadLink.href = 'data:text/csv;charset=utf-8,' + encodeURI(csvContent);downloadLink.download = 'data.csv';下载Link.click();下载链接 = 空;});dash.bind([控制], [图表]);破折号.绘制(数据);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"/><表格><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="仪表板"></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;下载CSV</span>

</td></tr></table>

注意:根据 发行说明...

通过 jsapi 加载器保持可用的 Google Charts 版本不再持续更新.请从现在开始使用新的 gstatic 加载器.

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

I'm working on GoogleCharts project, I wanted add function export data to CSV. I tried to make, but didin´t worked. In fiddle URL is my chart where I want add export to CSV data. Please could someone help me how to do it?? thanks, Here is code for CSV function.

Fiddle Chart: 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);
解决方案

as stated in the documentation for toolbar usage...

since you're creating a DataTable from scratch, the toolbar will not work for you...

however, there is a static method for dataTableToCsv

google.visualization.dataTableToCsv(data)

this method does not include the column headings,
have to add those manually...

to use this method, you could add a button to build the download content,

see following working snippet...

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 += '
';

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

note: recommend using the loader.js library for google charts, according to the release notes...

this will only change the load statement, see above snippet...

这篇关于将数据从 GoogleChart 保存到 CSV的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-29 03:00
查看更多