手绘风格的数据可视化（萌萌风）Sketchify，及其他可视化工具（商业风）

多少年以前，我在一家BI企业负责数据可视化产品的开发，作为产品创新的需要，一篇论文吸引了我的目光，《Sketchy Rendering for Information Visualization》（https://hal.inria.fr/hal-00720824/document）（该论文发表于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
AntV G2
highcharts
amcharts
xCharts

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

ECharts

Echart的泡泡图手绘有些问题，这位灵魂画手不太擅长画泡泡。

AntV G2

G2的手绘效果非常好。

highcharts

amcharts with solid fill

xCharts with cross-hatch fill

你也可以到Codepen上去尝试这些例子：

ECharts
AntV G2
highcharts
amcharts
xCharts

最后要提一下，手绘风格的字体来自于Google Fonts，选择handwriting类别，能够给出很多好看的手绘风格字体，居然还有中文。Sketchify使用了Indie Flower

提示：

该工具仅仅支持以SVG为基础的数据可视化，不支持基于Canvas的库，例如ECharts和Ant G2。
手绘风格的处理会引入大量的svg图形元素，可能会消耗大量资源，请量力而为！

转自：

作者 | naughty

来源 | oschina.net/taogang/blog/3130390

手绘风格的数据可视化（萌萌风）Sketchify，及其他可视化工具（商业风）相关推荐

手绘风格的数据可视化 Sketchify，让你的图表也萌萌哒
点击上方蓝色"程序猿DD",选择"设为星标" 回复"资源"获取独家整理的学习资料! 作者 | naughty 来源 | oschina.ne ...
js折线图设置y轴刻度_手绘风格的 JS 图表库：Chart.xkcd
本文作者:HelloGitHub-kalifun 图表库千万个今天 HelloGitHub 给大家推荐个很有"特色"的图表库:一个手绘风格的 JS 图表库 -- Chart.xkc ...
extjs chart无法在panel中显示_手绘风格的 JS 图表库：Chart.xkcd
本文作者:HelloGitHub-kalifun 图表库千万个今天 HelloGitHub 给大家推荐个很有"特色"的图表库:一个手绘风格的 JS 图表库 -- Chart.xkc ...
手绘风格的 JS 图表库：Chart.xkcd
本文作者:HelloGitHub-kalifun 图表库千万个今天 HelloGitHub 给大家推荐个很有"特色"的图表库:一个手绘风格的 JS 图表库 -- Chart.xkc ...
python可视化包选哪个_给大家介绍一个很酷的 Python 手绘风格可视化神包：cutecharts...
https://github.com/chenjiandongx/cutecharts 今天,给大家介绍一个很酷的 Python 手绘风格可视化神包:cutecharts.和 Matplotlib . ...
Python 采集87个手绘风格PPT模板
源码下载链接:ppt.rar - 蓝奏云 PPT下载链接:https://pan.baidu.com/s/1HUAEe_-4IEV6ttOKC_VPuA?pwd=96px 提取码:96px 采集的参 ...
手把手教你实现手绘风格图形
大家好,我是漫步,今天分享一篇高难度的图形绘制文章. Rough.js[1]是一个手绘风格的图形库,提供了一些基本图形的绘制能力,比如:虽然笔者是个糙汉子,但是对这种可爱的东西都没啥抵抗力,这个库的 ...
Python使用matplotlib绘制卡通、手绘风格的图像
博主已经开通微信公众号啦,欢迎关注哈! 入门数据科学这一行以来,陆陆续续学到了很多专业领域的知识,数据可视化就是其中的一部分,在Python中提供数据可视化的工具也不少,但是最为著名的莫过于matpl ...
Excalidraw - 免费的手绘风格白板应用，能够画各种流程图、示意图、架构图
一款完全免费的手绘风格绘图在线应用,能快速画出漂亮的流程图.示意图甚至是图表. 关于 Excalidraw Excalidraw 是一款轻量的手绘风格电子白板在线应用,无论是 Windows / ma ...

手绘风格的数据可视化（萌萌风）Sketchify，及其他可视化工具（商业风）

手绘风格的数据可视化（萌萌风）Sketchify，及其他可视化工具（商业风）相关推荐

最新文章

热门文章

手绘风格的数据可视化 （萌萌风）Sketchify，及其他可视化工具（商业风）

手绘风格的数据可视化 （萌萌风）Sketchify，及其他可视化工具（商业风）相关推荐

最新文章

热门文章

手绘风格的数据可视化（萌萌风）Sketchify，及其他可视化工具（商业风）

手绘风格的数据可视化（萌萌风）Sketchify，及其他可视化工具（商业风）相关推荐