Charts 支持主流客户端图表方案的邮件图表嵌入服务

2014-03-12 18:54:48 +08:00
 turing
很多时候,在邮件里嵌入图表都是一件很繁琐的事情,尤其当这些数据还是由服务动态生成的。如果你要找一个可以让你的程序发出的邮件既美观又能胜任动态数据图表嵌入这个需求的库或者服务,以往通常有这几种方法:

1. 在服务器端绘制图表。
2. 在服务器端截取客户端图表。
3. 人工在客户端将图表转换成base64编码图片,再由服务端存取。

Charts 采用了第二种方法,通过 Theme 的支持,Charts 可以判断不同 Url 以匹配不同的 node_modules 中的解决方案目录。然后根据 width,height 与提供的数据,绘制出正确而美观的图片。以嵌入在邮件当中。

简单来说,就是这样在邮件里嵌入:

<img src="http://yourserver/sparkline/300x100/1,4,4,7,5,9,10,100,20,12">

上述链接将会返回一张 inline 的 sparkline 图表,类似这样:


当然,使用这种解决方案,你还可以自己制作想要的图表解决方案,然后将它们 publish 到 npm,再置于 Charts 的依赖模块目录下,重启服务即可。

这是一张采用 Chartjs 方案制作的嵌入图表:


使用 npm 安装:
$ [sudo] npm install charts -g

欢迎 Star && fork:
https://github.com/turingou/charts
4062 次点击
所在节点    Node.js
4 条回复
zhangxiao
2014-03-12 22:16:09 +08:00
Mcatt
2014-03-13 11:34:33 +08:00
楼主高质高产!
mtmzorro
2014-03-13 11:56:39 +08:00
STAR 帮顶! ~
qiuai
2014-03-13 19:15:48 +08:00
漂亮.支持一个~

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/104028

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX