Javascript 高级图表到图像

我正在尝试将highchart转换为canvas，以便将其设置为img src

这是我的密码

Javascript:

html2canvas([document.getElementById('container')], {
    onrendered: function (canvas) {
        document.getElementById('canvas').appendChild(canvas);
        var data = canvas.toDataURL('image/png');
        var image = new Image();
        image.src = data;
        document.getElementById('image').appendChild(image);
    }
});

HTML:

<div id="canvas">
    <p>Canvas :</p>
</div>
<div id="image">
    <p>Image :</p>
</div>

画布：

图片：

我无法获取作为画布的highchart数据，请帮助我解决此导出部分 使用

canvg

库（由highcharts示例和其他SO问题提供，如注释中提供的问题）可以轻松处理导出

假设您的html中已经有一个

canvas

项：

引用的脚本：

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="http://canvg.googlecode.com/svn/trunk/canvg.js"></script>

通过一个按钮调用此功能：

---

脚本执行 主要问题是：我们应该如何/在哪里/何时执行此操作以使其正常工作

事实上，在执行所有动画时，似乎没有触发任何

完成

事件。我尝试了以下方法：

• 使用

  Load

  event（请参阅）：脚本正在循环，尽管在以下情况下应该触发事件：

在图表加载完成时激发

• 使用

  plotOptions.series中的
  animation complete
  ：此事件被触发多次==>不能用于此目的
  

• 使用

  highchart

  函数的回调：脚本也在这里循环，即使回调只调用一个

例如，highcharts论坛已经提出了这个

ready

事件问题：但我找不到使用他们提供的示例的方法

---

编辑

多亏了PawełFus（参见对这个答案的评论）：export函数创建了另一个图表，解释了为什么在我们前面的例子中它是循环的

调用导出函数时，标志

chart.userOptions.chart.forExport

设置为true，因此我们只需在回调中进行筛选，以避免循环

---

更新fiddle:jsfiddle.net/c2Dp2/232

如何使用Canvg？它允许将SVG转换为画布。From-SVG图像未呈现。@PawełFus您能建议示例代码，如何实现这一点吗？@speeday125:您能提供一个带有基本图表/html结构的示例JSFIDLE吗？@NicolasR我正在尝试获取饼图的图像参见类似问题：有一个示例：非常感谢您回答并对这个问题表示兴趣，你真是太棒了：）谢谢你的+1/接受。我很失望没有找到启动脚本的方法。不好的方法是使用计时器（例如，基于plotOptions.series.animation.duration参数），但这种方法有几个缺点。。。我想你只需要onclick，这很好（在这种情况下，它可能是另一个问题的复制品）。我对Pawel的评论投了赞成票，这些评论让我走上了正确的道路

getSVG（）

通过另一个回调创建了另一个图表，从而创建了无限循环。要防止这种情况，只需在未创建用于导出的图表时调用

exportChart（）

。您可以检查

chart.userOptions.chart.forExport

标志，请参阅：谢谢Pawel！我会用你的项目更新我的答案

function exportChart() {
    var svg = canvg(document.getElementById('canvas'), getSVG(), {
        //ignoreDimensions: true
    });
}

function getSVG() {
    var chart = $('#container').highcharts();
    var svg = chart.getSVG();
    return svg;
}