javascript - Highcharts 图像

Question

我正在尝试将 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 数据作为 Canvas ，请帮我解决这个问题

Answer 1

导出部分

使用 canvg 库(由 highcharts 示例和其他 SO 问题提供，如评论 canvg and highcharts how to include chart legend and keep the chart size? 中提供的问题)，导出很容易处理。

假设您的 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>

Javascript 函数:

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

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

通过按钮调用此函数的工作 fiddle :http://jsfiddle.net/c2Dp2/231/

---

脚本执行

主要问题是:我们应该如何/在何处/何时执行它以使其正常工作？

事实上，当执行所有 动画时，似乎没有触发任何complete 事件。我尝试了以下方法:

• 使用 Load 事件(参见 Highcharts documentation):脚本正在循环，尽管该事件应该在以下情况下触发:

Fires when the chart is finished loading

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

• 使用highchart函数的回调:脚本也在此处循环，即使只调用了一个回调。

此ready 事件问题已在highcharts 论坛中提出，例如:http://forum.highcharts.com/viewtopic.php?f=9&t=10078但我找不到使用他们提供的示例的方法。

---

编辑

感谢 Paweł Fus(请参阅对此答案的评论):export 函数创建了另一个图表，解释了为什么它在我们之前的案例中循环。

当我们调用导出函数时，标志 chart.userOptions.chart.forExport 被设置为 true，所以我们只需要在回调中过滤以避免循环。

更新 fiddle :jsfiddle.net/c2Dp2/232