2022-5-22 純純
上次整理了一些大廠的可視化服務(wù)平臺，平臺的優(yōu)勢顯而易見，組件化的操作，快速搭建的方式節(jié)省了很多的開發(fā)和時間成本。有興趣的戳這里：數(shù)據(jù)可視化大屏設(shè)計(jì)工具整理（上）。
對于上期的一些更正：8月28日百度Suger更新了收費(fèi)標(biāo)準(zhǔn)，也就是說現(xiàn)在百度Suger也收費(fèi)了！目前是分版本收費(fèi)，但是對新老用戶還是提供了30天的全功能試用的。
本次整理的是下半部分的內(nèi)容：
一、數(shù)據(jù)大屏與數(shù)據(jù)可視化
二、大廠的可視化服務(wù)
三、技術(shù)開源庫
四、設(shè)計(jì)輔助工具
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
三、技術(shù)開源庫
了解一些技術(shù)開源庫，一方面可以參照其圖表案例，了解各類不同圖表的展示方式；另一方面是為了保證自己設(shè)計(jì)的可實(shí)現(xiàn)度，不然再炫酷的設(shè)計(jì)效果最終如果因?yàn)榧夹g(shù)開發(fā)能力無法實(shí)現(xiàn)也是徒勞的。
Echarts -百度開源可視化庫
這是一個使用JavaScript 實(shí)現(xiàn)的開源可視化庫，可以流暢的運(yùn)行在 PC 和移動設(shè)備上，兼容當(dāng)前絕大部分瀏覽器。4.0版本還提供了對微信小程序的適配。DataV中的一些組件也是依賴Echarts生成的。
Echarts提供的圖表很多樣化，幾乎包含常用的、不常用的各類圖表樣式。且提供有可交互組件，可以對數(shù)據(jù)進(jìn)行多維度數(shù)據(jù)篩取、視圖縮放、展示細(xì)節(jié)等交互操作。
△來源Echarts實(shí)例
Mapv - 百度地理信息可視化開源庫
用以展示大量地理信息點(diǎn)、線、面的數(shù)據(jù)。創(chuàng)建需先上傳地理信息數(shù)據(jù)，再設(shè)置地圖樣式后，即可下載保存。目前僅開放Beta版本。
△來源Mapv官網(wǎng)
螞蟻AntV
https://antv.alipay.com/zh-cn/index.html
螞蟻金服的Ant Design作為設(shè)計(jì)師應(yīng)該都是較為熟悉的。AntV是螞蟻Ant系列下的一個數(shù)據(jù)可視化解決方案。分為G2、G6、F2、L7不同產(chǎn)品，分別對應(yīng)不同的特性需求。
△來源AntV官網(wǎng)
Amcharts - 矢量地圖定制下載
http://pixelmap.amcharts.com/#
這個網(wǎng)站可以用來繪制地圖。有些特殊情況下，開發(fā)可能需要自己繪制地圖。如果開發(fā)自己使用canvas繪制，難度較大。這個網(wǎng)址提供了地圖svg、HTML以及image的下載。
△來源Amchats官網(wǎng)
D3.js - 數(shù)據(jù)驅(qū)動的文檔
D3js 是一個基于數(shù)據(jù)來操作文檔的JavaScript 庫，適宜用來建造各類可視化圖表。支持大型數(shù)據(jù)集和交互與動畫的動態(tài)行為。
△來源D3js官網(wǎng)
billboard.js - 簡易界面的可交互圖表庫
https://naver.github.io/billboard.js/
這是一個基于D3 V4+的JavaScript的圖表庫?？梢詫?shù)據(jù)進(jìn)行視圖縮放、展示細(xì)節(jié)等交互操作。
△來源billboard官網(wǎng)
FusionCharts
FusionCharts提供了100多個交互式圖表和2,000多個數(shù)據(jù)驅(qū)動的地圖，對不同平臺都可兼容。同時提供了前端和后端各類框架及代碼語言的插件來方便開發(fā)快速入門。不過這款是收費(fèi)的，根據(jù)不同的使用環(huán)境定價不同。
△來源FusionCharts官網(wǎng)
四、設(shè)計(jì)輔助工具
Kitchen - 螞蟻金服官方插件
這是一個sketch的插件工具。主要功能如下圖。
△來源Kitchen官網(wǎng)
Iconfont 圖標(biāo)庫我比較常用，可以直接在sketch中搜索拖拽，不用再去打開網(wǎng)頁查找了。其次數(shù)據(jù)填充也比較常用，自動填充時間地址城市等挺方便的。sketch也有自帶的功能，但畢竟自帶的填充都是英文，想要中文的需要自己編寫填充文檔，相對還是比較麻煩。其他是像智能排版、色板等功能，我用的不多，還是以sketch自帶功能為主。
另外，與可視化設(shè)計(jì)相關(guān)的就是里面的圖表生成器了。不過Kitchen當(dāng)前只有一些常規(guī)的圖表，不過勝在簡潔明了，很適合在此基礎(chǔ)上進(jìn)行二次設(shè)計(jì)。該插件還是螞蟻Ant系列的官方插件，可以自動配置符合Ant Design 規(guī)范的組件，配合公司采用的Ant系列的框架，會方便不少。
△來源Kitchen插件界面
FusionCool - 阿里Fusion Design開源中后臺UI解決方案輔助工具
這也是一個sketch的插件工具。分為圖標(biāo)、圖表、組件、模塊和模板五大功能區(qū)。
Fusion Design作為一個開源中后臺解決方案，和Ant Design有一定類似，但也有所差別。Ant Design 是一套組件庫, Fusion Design 更像是一個組件庫生成工廠。
直接下載安裝FusionCool的話，打開sketch看到的將是一個默認(rèn)組件庫，圖表部分的種類樣式比Kitchen多了不少。而更厲害的是，你可以在Fusion Design上基于官方庫編輯改造成屬于你自己的設(shè)計(jì)系統(tǒng)，發(fā)布主題后獲得新的主題包，此時你在FusionCool中就可以看到專屬于你的主題包了，在sketch中完成設(shè)計(jì)后，開發(fā)使用Iceworks安裝你的主題庫就可以直接編碼實(shí)現(xiàn)你的設(shè)計(jì)。
△來源FusionCool插件界面
Map Generator - 快速地圖生成填充
https://github.com/eddiesigner/sketch-map-generator
這是一款基于谷歌地圖的自動填充的Sketch插件，輸入地址后就可以自動生成不同風(fēng)格樣式的地圖，個人比較喜歡第三款灰色的。
△圖為Map Gnerator生成效果
Amcharts - 矢量地圖定制下載
http://pixelmap.amcharts.com/#
這個網(wǎng)站上面提過，但其實(shí)設(shè)計(jì)師用來獲取矢量地圖也很好用，選擇地圖樣式和地區(qū)之后，右下方即可以下載SVG、HTML、Image格式的圖，十分方便。點(diǎn)擊“Generate Ppxel Map”還可以轉(zhuǎn)化為像素圓點(diǎn)形式的地圖。
如果需要省份的地圖，網(wǎng)站上無法直接下載，但可以要先下載中國svg地圖，然后再打開svg選擇自己需要的省份模塊就可以了。
另外，在使用地圖的時候，要注意正確用圖，規(guī)范用圖。要有國家版圖意識，符合測繪法。
標(biāo)準(zhǔn)地圖可以參考國家自然資源局提供的標(biāo)準(zhǔn)地圖服務(wù)，服務(wù)網(wǎng)址：http://bzdt.ch.mnr.gov.cn/index.html
Chart - 圖表插件
https://github.com/pavelkuligin/chart
這個插件是收費(fèi)的，每年10美元，但是你可以去找那啥啥的（我知道你懂）。優(yōu)勢在于可以在Sketch中創(chuàng)建包含隨機(jī)、表格或者JSON數(shù)據(jù)的圖表。圖表樣式也是非常的豐富了。
△來源Chart官網(wǎng)
-END--
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、
UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.yvirxh.cn