多少年以前，我在一家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，及其他可视化工具（商业风）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。