如何用FusionCharts在客户端将图表导出为图片-控件新闻-慧都网

如何用FusionCharts在客户端将图表导出为图片

原创|使用教程|编辑：郝浩|2013-08-12 10:36:31.000|阅读 933 次

概述：当你比较Javescript图表库的时候，你会考虑到一个重要的特性，那就是他是否可以在任何情况下导出你的图表——服务器端，客户端或者两者间的组合。这也是为什么现在许多的客户会选择FusionCharts图表的原因。

当你比较Javescript图表库的时候，你会考虑到一个重要的特性，那就是他是否可以在任何情况下导出你的图表——服务器端，客户端或者两者间的组合。这也是为什么现在许多的客户会选择FusionCharts图表的原因。 FusionCharts可以让你在客服端，服务器端，用JavaScript功能批量处理图表，或者在浏览器中使用FCimg、wkhtmltoimage以及PhantomJS，而不需要渲染。

如何将FusionCharts在客户端将图表导出为图片

虽然这些功能选项可以适用于大多数情况，但我们依旧得到一些来自客户的需求反馈，他们希望自己的最终用户可以在客户端输出图片，而不用提交给服务器。如果你的用户保存图片太频繁，你又想减少在服务器上的开销，或者想要避免隐私泄露，这个工作可能会很困难。但是，如果能让最终用户在本地存储图表，也是一个省事的方式，会给他们一个不一样的体验。所以InfoSoft公司也决定为FusionCharts图表实现这个功能，功能可能不是最好的解决方案，但是，至少可以实现在客户端输出图片。

需求：

转换时，当我们启用额外的条码canvas API元素将图表导出为图片时，使用canvg JavaScript库将SVG转换为HTML5画布。

步骤：

1、在你的页面“Head”处包含cang使用说明中提到的三种cang script，其中包含FusionCharts.js。
2、在JavaScript渲染模式渲染你的图表。渲染完成后，传递图表SVG串到画布库，代码为：canvg("myCanvasElementId", myChartInstance.getSVGString());
你的页面画布元素id为： "myCanvasElement"，canvg库会在画布上复制图表。然后，你可以设置CSS将画布隐藏。
3、使用标准.toDataURL()，画布API将画布转换为图片。

下载最新版FusionCharts v3.2.2-SR5

标签：

本站文章除注明转载外，均为本站原创或翻译。欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn

文章转载自：慧都控件网

上一篇：图像处理工具包ImagXpress使用教程：去除红眼方法下一篇：Axure运用：使用Axure创建iPhone应用程序原型（一）