将 Chart.js 生成的图表导出成图片  

介绍

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

搞定。

点击链接即可生成图片。

演示样例请参考附件。