sketch插件-數據可視化圖表

02-12

Chart

Chart插件，用真實或隨機數據創建最流行的圖表。圖表支持任何文本編輯器的複製粘貼，例如：Notes、Word、谷歌文檔等。圖表還支持從谷歌表或微軟Excel中複製粘貼表列數據。

使用

1、選擇一個位於畫板中的圖層

2、執行 Plugins > Chart > 對應命令在彈出的對話框控制參數生成圖表

指令

1、線形圖表 Line chart（線條與端點數可控）

2、垂直柱狀圖 Vertical Bar chart（分類和柱形數可控）

3、水平柱狀圖 Horizontal Bar chart（分類和柱形數可控）

4、區域圖 Area chart（區域和端點數可控）

5、堆積區圖 Stacked area chart（區域和端點數可控）

6、微線圖 Sparkline

https://www.zhihu.com/video/943331844935168000

自定義

打開位於 Chart.sketchplugin/Contents/Sketch/（右鍵顯示包內容打開）的 Parameter.js 根據需要調整參數

https://www.zhihu.com/video/943331307430887424

// 線條類型: 直線 — 0, 曲線 — 1 var curveType = 1;

// 線條和區域的顏色設置 var colorPalette = new Array();

var red = [244,67,54];

var pink = [233,30,99];

var purple = [156,39,176];

var deepPurple = [103,58,183];

var blue = [33,150,243];

var cian = [0,188,212];

var teal = [0,150,136];

var green = [0,200,83];

var yellow = [255,235,59];

var amber = [255,193,7];

var orange = [255,152,0];

colorPalette = [red, green, blue, yellow, purple, pink, amber, cian, deepPurple, teal, orange];

// 為微線圖設置顏色 var sparkColor = red;

// 設置線條的參數 var borderThickness = 2;

var endWidth = 8;

var dots = true;

// 設置微線圖的參數 var borderThicknessSpark = 1;

var endWidthSpark = 4;

Chart - 用於sketch最強大的數據可視化插件

嗯～就到這兒吧！