概述
G2作為一款技術產品,自誕生以來,服務於廣大的Web工程師群體和一部分數據分析師。一直來,G2 因其易用的語法和扎實的可視化理論基礎,廣受使用者好評。G2 1.x 的可視化能力已經非常強大,使用者已經能夠在掌握圖形語法的基礎上結合自己對數據的理解,從而繪制出各種各樣的可視化圖表。然而,隨着DT時代的更加深化,隨着G2的發展,我們還是遇到了各種各樣的,以往G2無法滿足的可視化需求。經總結發現,大體上有以下幾點:
- 數據導向,同一張圖表中,繪制
異構數據
圖形的需求 - 設計導向,對圖形
高度訂制
的需求 - 移動端圖表
輕量化
的需求
經過半個月設計和架構,我們重新梳理流程結構,我們提出了視圖(View)
和映射核心(Core)
的概念,再經歷了一個月緊鑼密鼓的開發,本周我們迎來的G2 2.0的發布!
話不多說,下面咱具體看看G2.0的新特性 ~
新特性
一、多視圖(View)
G2 2.0 我們進行了多View的支持。每一個View可以擁有自己的數據源。意味着2.0后我們可以在同一幅圖表中,支持異構數據的圖表繪制。詳見鏈接
具體場景
場景一
用戶甲:請問我有一組數據,畫了一張區域圖,還有一組數據是用來標定每個關鍵時刻的特殊值,怎么辦?
1.0菌:關鍵時刻數據用chart.guide()吧
用戶甲:可是guide好繁瑣。。
1.0菌:。。。
2.0菌:你可以使用我的多View的功能!
場景二
用戶乙:我這有一組數據畫了地圖氣泡圖,還有另外一組數據表示氣泡之間的關系,怎么辦?
1.0菌:這個臣妾做不到。。
用戶乙:。。。
1.0菌:。。。。
2.0菌:你可以使用我的多View的功能!
二、自定義圖形(Shape)
在G2 2.0 中我們拓展了自定義的Shape的機制,賦予那部分有 高訂制需求的 、 有圖形知識儲備 的工程師有直接訂制最終圖形的能力。這也是G2在向 可編程可視化引擎 邁出的重要一步。詳見鏈接
具體場景
場景一
某PD:我這有一份不同人物的得分數據,怎么可視化比較好?
1.0菌:可以用柱狀圖對比
某設計師:柱子直角不好看,改成圓角吧
1.0菌:暫時還沒有內置圓角矩形的shape。。
某PD:不夠形象,要把人物頭像發上去
1.0菌:。。。。
2.0菌:你可以使用我的自定義Shape的功能!
場景二
某前端:你們原來的儀表盤好丑啊!
某設計:鍾表能不能再假點吶!
1.0菌:無法反駁!
某前端:我想要這樣xxo!!xxx@@oox&&(持續描述五分鍾。。。)
1.0菌:把這些代碼都加到我身上,我會膨脹死。。。
2.0菌:使用我的自定義Shape的功能!在G2外自由拓展,私人定制,滿足你無限強迫的定制需求!
三、連線圖形標記(Edge)
基於以上兩個重點功能的實現,再加上連線的幾何標記(Edge),我們終於能畫出,簡單的關系圖了!(喜大普奔)
四、移動端的支持
G2-mobile為了移動端的開發寶寶已經操碎了心。
為了你們想要的簡單而美好,作為強大G2的一個子集,我們忍痛割掉了各種洋氣的功能;
為了讓你們在G2和G2-mobile之間切換得心應手,我們把G2-mobile的接口和G2全部統一;
為了滿足你們多樣性的需要,我們開放了更多自定義接口。詳見G2-mobile說明
更豐富、更用心的圖表DEMO
PC Demo
詳細見G2 Demo中心
Mobile Demo
升級指南
PC 端
新增
- 自定義 shape
- 多視圖 View 功能,支持圖表組合和異構數據的繪制
- 新增 edge 幾何標記,用於支持關系圖的繪制
移除
- chart.legendVisible() 廢除,不再支持
- chart.legend('left|top|right|bottom') (即原先直接傳入位置字符串來設定圖例位置 ) 廢除,不再支持
- 移除了部分 G2 默認提供的 shape:
對應的 GEOM | 廢棄的 shape |
---|---|
point | pointerArrow |
point | pointerLine |
point | pointerRect |
interval | stroke |
polygon | stroke |
Mobile 端
新增
- chart.guide() 方法:支持的輔助類型有:折線(line)、弧線(arc)、文字(text)和自定義(html)
- 新增的圖形繪制屬性:
- fill
- stroke
- fontFamily
- fontSize
- fontWeight
- fontVariant
注意事項
- 2.0 后我們推薦使用我們繪圖庫的原生屬性(比如:fontSize),不建議使用舊的svg規范的熟悉(比圖:'font-size')。詳情見G2-Graphic
開發成員想說的話
這次變動很大,我們又把自己顛覆了一次。這次也沒啥變化,我們還是堅持數據出發、數據驅動。
聯系方式
: https://github.com/antvis
💬 : https://github.com/antvis/feedback/issues/new
✉️ :yubo@alipay.com