实现node端渲染图表的简单方案
实现node端渲染图表的简单方案
2018-05-31 23:48 by JerremyZhang, … 阅读, … 评论, 收藏, 编辑
实现node端渲染图表的简单方案
这个题目有点小，本篇博客真正谈论的应该是服务端生成图表的简单方案，这里面有两个关键字：服务端 & 简单，我们知道基于js有很多的图表库，知名的如D3、echarts 、highcharts等等，对于做数据可视化方向的同学可能自己都做过此类chart的研发，无论从零构建还是使用已有的轮子，基本上都是基于js在做，因为大部分数据可视化产品都是to B的产品。
但是有些场景下，我们还是会需要服务端的渲染结果的，比如，需要给用户发送订阅邮件，邮件中包含了图表类展示，我们知道邮件内容可以支持html，但是只能支持最基本的html，图表类内容只能以图片资源的方式嵌入进去，由于图表是动态内容，所以需要我们在发送邮件之前根据用户特性内容去动态生成，这种情况下就会有对应的需要了；另外如果你的产品需要和类似slack这样的app 集成，做dashboard展示，也同样需要在服务端生成图表。
请注意服务端生成图表和编写服务端代码生成图表的细微区别，服务端编写代码生成图表并不一定是在服务端渲染图表，有可能只是是对客户端js的一种封装而已.
常规思路
- 图表渲染的结果当前主要有两种（canvas绘制和svg渲染），以svg渲染为例来说明
svg本质上是xml，可以看到基于svg生成的图表其实就是生成一大坨的xml，如果服务端熟悉生成svg（xml）的规则，其实在服务端完全可以生成对应的xml（即svg图片），这种思路虽然没有问题，但是实现起来有些复杂，尤其在使用第三方chart 库的情况下，每种chart 对应的svg规则可能不同，如果官方没有提供对应服务端渲染方案，那么写起来还是比较费劲的。
-
借用浏览器渲染
在highcharts的官网可以看到不同平台的服务端导出实现，highcharts渲染后支持导出图片（svg、png、jpeg）以及pdf；默认情况下，点击导出的时候客户端会向highcharts服务器发送请求，然后服务器生成图片，响应到前端下载下来，但是这种并非是服务端渲染，而是前端发送渲染好的svg（xml）到服务器，服务端转换svg内容成图片文件，但是这种方式的前提是在浏览器端渲染完毕，服务端根据渲染结果做一些转换工作而已。