Highcharts结合PhantomJS在服务端生成高质量的图表图片

Highcharts结合PhantomJS在服务端生成高质量的图表图片2014-06-04 cnblogs StanZhai项目背景

最近忙着给部门开发一套交互式的报表系统，来替换原有的静态报表系统。

老系统是基于dotnetCHARTING开发的，dotnetCHARTING的优势是图表类型丰富，接口调用简单，使用时只需绑定数据源即可（指定连接字符和sql语句，简单的配置一下就能出图），支持生成静态图表图片；缺点就是生成好的图是图片，传到了前台就失去了交互性（当然它还提供了一个jsCharting，不过感觉交互性做的还是不够好），再有就是这东东是收费的呀，用的话需要折腾破解版本。

我最终选择了Highcharts（Interactive JavaScript charts for your webpage）来展现前台图表，通过 Highcharts良好的交互性实现与服务端的数据交互，将数据可视化。

dotnetCHARTING在数据加载的设计上做的还是很不错的，我在开发过程中借鉴了其处理思想，自己实现了一套数据加载方案，能够很方便的把数据传给Highcharts。这套数据加载方案，简单的说就是指定好数据库连接信息和sql查询信息，服务端采用ADO.NET执行查询生成DataSet，然后分析DataSet将数据转换为Highcharts 能够直接使用的json格式。

报表的处理细节还是蛮多的，这里就不在一一讨论了，如题，接下来重点跟大家分享一下，服务端生成图表图片那部分的处理细节。

Highcharts服务端生成图表图片流程简介

生成图片的数据流向倒是比较简单，如下图所示：

ASP.NET在服务端生成图表图片的方式

根据上述生成图片的步骤，核心其实就是对第二步的处理，也就是如何将SVG数据在服务端做处理，生成图表图片。

这样的话，我们的处理思路就很清晰了，直接在服务端把SVG处理为图片不就可以了，这么想，也就这么做，刚好网上也有人这么弄过，于是也就直接借鉴了其代码，代码不上了，介绍下用到的dll：

在nuget中搜索svg，可以找到一个SVG Rendering Library的包，可以用这个包将SVG格式的数据保存为图片，用法也比较简单，大家可以到其官网查阅使用方法。

这个大家不必自己去实现，因为highcharts官网已经给出了第三方的ASP.NET导出图表的模块（他就是基于这个SVG Rendering Library实现的）：

https://github.com/imclem/Highcharts-export-module-asp.net

SVG Rendering Library的问题

在使用SVG Rendering Library服务端生成图表图片的过程中，发现一些问题：

生成的图片中文字体模糊发虚，整体图片质量差，跟实际在网页中显示的效果差别还真不小

图表上数据点的dataLabel无法显示（一开始以为是highcharts配置的问题，后来鉴定是SVG Rendering Library的问题，这个必须修改svg.dll才能解决）