Question

我希望能够为我的用户提供一个编辑图表，然后能够获得一个Img（通过getImageURI作为PNG），这样他们就可以轻松地拖放到演示文稿/电子邮件中。

这是一个例子：https://jsfiddle.net/BSherwood/98obbjh2/

＆＃13;

  var chartEd = null;
  var chartWrap = null;
  var chartEditorDiv = null;
  // Populates the chart div on startup and initiates global vars. Called on page load.
  function chartDraw(){
    // Initialize Chart editor handle
    chartEd = new google.visualization.ChartEditor();
    google.visualization.events.addListener(chartEd, 'ok', chartSave);
    chartEditorDiv = document.getElementById('chartEditorDiv');

    // Add the chart to the page
    chartWrap = new google.visualization.ChartWrapper({
       'chartType':'LineChart',
       'dataSourceUrl':'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1',
       'query':'SELECT A,D WHERE D > 100 ORDER BY D',
       'options': {'title':'Population Density (people/km^2)', 'legend':'none'}
    });
    chartWrap.draw(chartEditorDiv);
  }

  // User clicked 'ok' to save chart
  function chartSave(){
    chartEd.getChartWrapper().draw(chartEditorDiv);
  }

  // Onclick handler, opens the editor
  function chartLoadEditor() {
    chartEd.openDialog(chartWrap, {});
  }
	function chartPNG(){
  	var sIMG = chartWrap.getChart().getImageURI();
    //var sIMG = chartEd.getChartWrapper().getChart().getImageURI(); // this way not working.
    document.getElementById('imagePrint').innerHTML = '<img src=' + sIMG + '>'
  }
  google.setOnLoadCallback(chartDraw);
  
  // Chart 2
  var chart2Ed;
  var chart2Wrap = null;
  var chart2EditorDiv = null;
  var chart2Object = null;
  // Populates the chart div on startup and initiates global vars. Called on page load.
  function chart2Draw(){
    // Initialize Chart editor handle
    chart2Ed = new google.visualization.ChartEditor();
    google.visualization.events.addListener(chart2Ed, 'ok', chart2Save);
    google.visualization.events.addListener(chart2Ed, 'print', chart2PNG);
    chart2EditorDiv = document.getElementById('chart2EditorDiv');

    // Add the chart to the page
    chart2Wrap = new google.visualization.ChartWrapper({
       'chartType':'LineChart',
       'dataSourceUrl':'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1',
       'query':'SELECT A,D WHERE D > 100 ORDER BY D',
       'options': {'title':'Population Density (people/km^2)', 'legend':'none'}
    });
    chart2Object = chart2Wrap.draw(chart2EditorDiv);
  }

  // User clicked 'ok' to save chart
  function chart2Save(){
  	var sT = chart2Ed.getChartWrapper();
    chart2Object = sT.draw(chart2EditorDiv);
    document.getElementById('image2Print').innerHTML = '<img src=' + sT.getChart().getImageURI() + '>'
  }

  // Onclick handler, opens the editor
  function chart2LoadEditor() {
    chart2Ed.openDialog(chart2Wrap, {});
  }
  function chart2PNG(){
  	var chIMG = chart2Ed.getChartWrapper().getChart().getImageURI();
    document.getElementById('image2Print').innerHTML = '<img src=' + chIMG + '>'
  }
  google.setOnLoadCallback(chart2Draw);

＆＃13;

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.0','packages':['table, charteditor']}]}"></script>
<div id="dashboard_div" style="border: 1px solid #ccc; margin-top: 1em">
  <table class="columns" width="100%">
    <tr>
      <td>Col 1</td>
      <td>Col 2</td>
    <tr>
      <td>
          <input type="submit" name="loadcharteditor" id="chartLoadeditor" value="Edit me!" onClick="chartLoadEditor()" style="font-size:18px;">
      </td>
      <td>
        <input type="submit" name="loadcharteditor2" id="chart2Loadeditor" value="Edit - also gets render of new chart!" onClick="chart2LoadEditor()" style="font-size:18px;">
      </td>
    </tr>
    <tr>
      <td>
        <div id="chartEditorDiv"></div>
      </td>
      <td>
        <div id="chart2EditorDiv"></div>
      </td>
    </tr>
        <tr>
      <td>
          <input type="submit" name="PNGChart" value="PNG - only does original chart" onClick="chartPNG()" style="font-size:18px;">
      </td>
      <td>
        <input type="submit" name="PNGChart2" value="PNG 2. Any ideas?" onClick="chart2PNG()" style="font-size:18px;">
      </td>
    </tr>
    <tr>
      <td>
        IMG1:<div id=imagePrint></div>
       </td>
      <td>
        IMG:<div id=image2Print></div>
      </td>
    </tr>
  </table>
  
</div>

＆＃13;

所以你可以看到Column1（在Edit me！下面）允许更改图表格式，但是，这就是问题，按钮[PNG - 只做原始图表]遗憾地只做它在锡上所说的内容，渲染原始（通过使用.getImageURI（））而不是它被更改为的图表。

第二栏我试图这样做并取得了部分成功。 [编辑 - 也可以渲染新图表！]允许更改图表，然后立即渲染图像（新图表）。但这是如何按需完成的（在他们突出显示图表上的一列之后）？为什么＆＃39; chart2Ed＆＃39;函数chart2PNG（）无法使用？

事实上，这可能是一个javascript变量范围问题，但随后......帮助

（请注意 - 通常按以下方式加载谷歌排行榜： google.charts.load（＆＃39; current＆＃39;，{packages：[＆＃39; charteditor＆＃39;]}）; 并包含https://www.gstatic.com/charts/loader.js 但这无法加载为沙箱，哦，电流在I.E 10中不起作用，因为这是45.1而不是45 [sigh]）

Answer 1

按如下方式更改chartSave，以更正 Column1 ...

function chartSave(){
  chartWrap = chartEd.getChartWrapper();
  chartWrap.draw();
}

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

var chartEd = null;
  var chartWrap = null;
  var chartEditorDiv = null;
  // Populates the chart div on startup and initiates global vars. Called on page load.
  function chartDraw(){
    // Initialize Chart editor handle
    chartEd = new google.visualization.ChartEditor();
    google.visualization.events.addListener(chartEd, 'ok', chartSave);
    chartEditorDiv = document.getElementById('chartEditorDiv');

    // Add the chart to the page
    chartWrap = new google.visualization.ChartWrapper({
       'chartType':'LineChart',
       'dataSourceUrl':'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1',
       'query':'SELECT A,D WHERE D > 100 ORDER BY D',
       'options': {'title':'Population Density (people/km^2)', 'legend':'none'}
    });
    chartWrap.draw(chartEditorDiv);
  }

  // User clicked 'ok' to save chart
  function chartSave(){
    chartWrap = chartEd.getChartWrapper();
    chartWrap.draw();
  }

  // Onclick handler, opens the editor
  function chartLoadEditor() {
    chartEd.openDialog(chartWrap, {});
  }
  function chartPNG(){
    var sIMG = chartWrap.getChart().getImageURI();
    //var sIMG = chartEd.getChartWrapper().getChart().getImageURI(); // this way not working.
    document.getElementById('imagePrint').innerHTML = '<img src=' + sIMG + '>'
  }
  google.setOnLoadCallback(chartDraw);

  // Chart 2
  var chart2Ed;
  var chart2Wrap = null;
  var chart2EditorDiv = null;
  var chart2Object = null;
  // Populates the chart div on startup and initiates global vars. Called on page load.
  function chart2Draw(){
    // Initialize Chart editor handle
    chart2Ed = new google.visualization.ChartEditor();
    google.visualization.events.addListener(chart2Ed, 'ok', chart2Save);
    google.visualization.events.addListener(chart2Ed, 'print', chart2PNG);
    chart2EditorDiv = document.getElementById('chart2EditorDiv');

    // Add the chart to the page
    chart2Wrap = new google.visualization.ChartWrapper({
       'chartType':'LineChart',
       'dataSourceUrl':'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1',
       'query':'SELECT A,D WHERE D > 100 ORDER BY D',
       'options': {'title':'Population Density (people/km^2)', 'legend':'none'}
    });
    chart2Object = chart2Wrap.draw(chart2EditorDiv);
  }

  // User clicked 'ok' to save chart
  function chart2Save(){
    var sT = chart2Ed.getChartWrapper();
    chart2Object = sT.draw(chart2EditorDiv);
    document.getElementById('image2Print').innerHTML = '<img src=' + sT.getChart().getImageURI() + '>'
  }

  // Onclick handler, opens the editor
  function chart2LoadEditor() {
    chart2Ed.openDialog(chart2Wrap, {});
  }
  function chart2PNG(){
    var chIMG = chart2Ed.getChartWrapper().getChart().getImageURI();
    document.getElementById('image2Print').innerHTML = '<img src=' + chIMG + '>'
  }
  google.setOnLoadCallback(chart2Draw);

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.0','packages':['table, charteditor']}]}"></script>
<div id="dashboard_div" style="border: 1px solid #ccc; margin-top: 1em">
  <table class="columns" width="100%">
    <tr>
      <td>Col 1</td>
      <td>Col 2</td>
    <tr>
      <td>
          <input type="submit" name="loadcharteditor" id="chartLoadeditor" value="Edit me!" onClick="chartLoadEditor()" style="font-size:18px;">
      </td>
      <td>
        <input type="submit" name="loadcharteditor2" id="chart2Loadeditor" value="Edit - also gets render of new chart!" onClick="chart2LoadEditor()" style="font-size:18px;">
      </td>
    </tr>
    <tr>
      <td>
        <div id="chartEditorDiv"></div>
      </td>
      <td>
        <div id="chart2EditorDiv"></div>
      </td>
    </tr>
        <tr>
      <td>
          <input type="submit" name="PNGChart" value="PNG - only does original chart" onClick="chartPNG()" style="font-size:18px;">
      </td>
      <td>
        <input type="submit" name="PNGChart2" value="PNG 2. Any ideas?" onClick="chart2PNG()" style="font-size:18px;">
      </td>
    </tr>
    <tr>
      <td>
        IMG1:<div id=imagePrint></div>
       </td>
      <td>
        IMG:<div id=image2Print></div>
      </td>
    </tr>
  </table>
  
</div>

使用可视化ChartEditor时将Google图表保存为图像;

1 个答案: