手绘风格的数据可视化实现 Sketchify

1月18日，北京，聊聊2025如何加入技术开发？

多少年以前，我在一家BI企业负责数据可视化产品的开发，作为产品创新的需要，一篇论文吸引了我的目光，《Sketchy Rendering for Information Visualization》（该论文发表于2013年）

于是我带这两个实习生，利用论文中的知识做出了该工具的原型。收到了领导的赞许，就像很多有用和没用的创新一样，这东西最终无疾而终了。

论文的核心是对基本的图形元素的利用随机变形实现手绘风格。例如线和圆：

最近我发现一些手绘风格图表库出现在我的视野，例如chart.xkcd和chartjs-plugin-rough。

chart.xkcd风格很好看，但是支持的图表类型有限。

chartjs-plugin-rough仅仅是chartjs的扩展，使用的范围也很有限。

我希望能有一个通用的工具能够把任意类型的数据可视化转化为手绘风格，于是开发了这个Sketchify。

Sketchify同样是基于Roughjs，Roughjs是是个非常强大的手绘风格基础工具，可以实现基本的绘画元素在Canvas和SVG上的手绘风格的实现。

Skethcify的原理非常简单，从一个给定的根DOM元素开始，找到所有的SVG对象，然后递归寻找所有的子元素，读出子元素的基本属性，利用roughjs创建一个手绘风格的元素拷贝，隐藏原始元素。这样手绘风格的SVG元素就取代了原始的图形。当需要回到初始状态的时候，只要重现所有隐藏的原始元素，移除后加入的手绘元素即可。

代码如下：

const option = {
    fillStyle: 'hachure',
    roughness: 1,
    bowing: 1,
    chartType: 'highcharts',
};
// container is the root dom element that contains related graph svg
const handler = Sketchifier(container, option);
handler.handify();

// call restore will turn the graph back to original one
handler.restore();

我实验了几种常见类型的SVG图表：

以下是一些演示截图（包含原始数据图和手绘风格的对照）：

ECharts