介绍
Chart.js 是一个广泛使用的图表绘制插件(jQuery)。它是开源的,而且生成的图表很好看,是付费图表插件的绝佳替代品。我过去在使用 chart.js 时碰到一个问题 —— 我想要将生成的图表存成图片。而 chart.js 不提供任何方法来导出成图片格式。但是因为 chart.js 使用 Canvas 画布来构建图表,因此我们可以使用 Canvas 画布的功能来输出图表到图片。
代码
首先使用 chart.js 构建图表
// // var ctx = document.getElementById("myChart").getContext("2d"); // var myNewChart = new Chart(ctx).Pie(data, options); //
Chart.js 使用 canvas 画布来在 HTML 网页中绘制图表。我们可以使用 jQuery 的 toDataUrl 方法来讲画布转换成 BASE64 字符串。
// // var url_base64jp = document.getElementById("myChart").toDataURL("image/jpg"); //
在网页中添加一个链接
// // <a id="link2" download="ChartJpg.jpg">Save as jpg</a> //
设置转换后的 BASE64 字符串作为链接的目标
// // link1.href = url_base64; //
搞定。
点击链接即可生成图片。
演示样例请参考附件。

- 原文:Export Chart.js Charts as Image / 将 Chart.js 生成的图表导出成图片
- 作者:HitsRathod, Sneha Palve
- 频道:计算机
- 发布:coyee (2016-08-23)
- 标签: Chart.js
- 版权:本文仅用于学习、研究和交流目的,非商业转载请注明出处、译者和可译网完整链接。
文章评论