javascript - 使用可视化 ChartEditor 时将 google Chart 保存为图像；

Question

我希望能够为我的用户提供编辑图表，然后能够获取 Img(通过 getImageURI 作为 PNG)，以便他们可以轻松拖放到演示文稿/电子邮件中。

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

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

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

因此，您可以看到 Column1(在“编辑我”下!)允许更改图表格式，但是，这就是问题所在，按钮 [PNG - 仅执行原始图表] 遗憾的是仅执行其在 jar 头上所说的操作，呈现原始图表(通过使用 .getImageURI())而不是更改后的图表。

第二专栏我曾尝试这样做并取得了部分成功。 [编辑 - 还获取新图表的渲染!] 允许更改图表，然后立即渲染(新图表的)图像。但是，这是如何按需完成的(在他们突出显示图表上的一列之后)？为什么“chart2Ed”对函数 Chart2PNG() 不可用？

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

(请注意 - 通常通过以下方式加载谷歌图表:google.charts.load('当前', {packages:['charteditor']});并包括 https://www.gstatic.com/charts/loader.js但这无法作为沙盒加载，哦，当前在 I.E 10 中不起作用，因为这是 45.1 而不是 45 [叹气])

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>