G2 2.0 更靈活、更強大、更完備的可視化引擎!

概述

G2作為一款技術產品,自誕生以來,服務于廣大的Web工程師群體和一部分數據分析師。一直來,G2 因其易用的語法和扎實的可視化理論基礎,廣受使用者好評。G2 1.x 的可視化能力已經非常強大,使用者已經能夠在掌握圖形語法的基礎上結合自己對數據的理解,從而繪制出各種各樣的可視化圖表。然而,隨著DT時代的更加深化,隨著G2的發展,我們還是遇到了各種各樣的,以往G2無法滿足的可視化需求。經總結發現,大體上有以下幾點:

  1. 數據導向,同一張圖表中,繪制異構數據圖形的需求
  2. 設計導向,對圖形高度訂制的需求
  3. 移動端圖表輕量化的需求

經過半個月設計和架構,我們重新梳理流程結構,我們提出了視圖(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的功能!

image

場景二
用戶乙:我這有一組數據畫了地圖氣泡圖,還有另外一組數據表示氣泡之間的關系,怎么辦?
1.0菌:這個臣妾做不到。。
用戶乙:。。。
1.0菌:。。。。
2.0菌:你可以使用我的多View的功能!

image

二、自定義圖形(Shape)

在G2 2.0 中我們拓展了自定義的Shape的機制,賦予那部分有 高訂制需求的 、 有圖形知識儲備 的工程師有直接訂制最終圖形的能力。這也是G2在向 可編程可視化引擎 邁出的重要一步。詳見鏈接

具體場景

場景一
某PD:我這有一份不同人物的得分數據,怎么可視化比較好?
1.0菌:可以用柱狀圖對比
某設計師:柱子直角不好看,改成圓角吧
1.0菌:暫時還沒有內置圓角矩形的shape。。
某PD:不夠形象,要把人物頭像發上去
1.0菌:。。。。
2.0菌:你可以使用我的自定義Shape的功能!

image

場景二
某前端:你們原來的儀表盤好丑啊!
某設計:鐘表能不能再假點吶!

image

1.0菌:無法反駁!
某前端:我想要這樣xxo!!xxx@@oox&&(持續描述五分鐘。。。)
1.0菌:把這些代碼都加到我身上,我會膨脹死。。。
2.0菌:使用我的自定義Shape的功能!在G2外自由拓展,私人定制,滿足你無限強迫的定制需求!

image

三、連線圖形標記(Edge)

基于以上兩個重點功能的實現,再加上連線的幾何標記(Edge),我們終于能畫出,簡單的關系圖了!(喜大普奔)

image

四、移動端的支持

G2-mobile為了移動端的開發寶寶已經操碎了心。
為了你們想要的簡單而美好,作為強大G2的一個子集,我們忍痛割掉了各種洋氣的功能;
為了讓你們在G2和G2-mobile之間切換得心應手,我們把G2-mobile的接口和G2全部統一;
為了滿足你們多樣性的需要,我們開放了更多自定義接口。詳見G2-mobile說明

更豐富、更用心的圖表DEMO

PC Demo

詳細見G2 Demo中心

image

image

image

Mobile Demo

詳細見G2-Mobile Demo中心

image

image

升級指南

PC 端

新增
  • 自定義 shape
  • 多視圖 View 功能,支持圖表組合和異構數據的繪制
  • 新增 edge 幾何標記,用于支持關系圖的繪制
移除
  • chart.legendVisible() 廢除,不再支持
  • chart.legend('left|top|right|bottom') (即原先直接傳入位置字符串來設定圖例位置 ) 廢除,不再支持
  • 移除了部分 G2 默認提供的 shape:
對應的 GEOM廢棄的 shape
pointpointerArrow
pointpointerLine
pointpointerRect
intervalstroke
polygonstroke

Mobile 端

新增
  • chart.guide() 方法:支持的輔助類型有:折線(line)、弧線(arc)、文字(text)和自定義(html)
  • 新增的圖形繪制屬性:
    • fill
    • stroke
    • fontFamily
    • fontSize
    • fontWeight
    • fontVariant

注意事項

  • 2.0 后我們推薦使用我們繪圖庫的原生屬性(比如:fontSize),不建議使用舊的svg規范的熟悉(比圖:'font-size')。詳情見G2-Graphic

開發成員想說的話

這次變動很大,我們又把自己顛覆了一次。這次也沒啥變化,我們還是堅持數據出發、數據驅動。

聯系方式

:octocat:?:?https://github.com/antvis
??:?https://github.com/antvis/feedback/issues/new
???:yubo@alipay.com

轉載于:https://www.cnblogs.com/zaohe/p/5853629.html

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/286336.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/286336.shtml
英文地址,請注明出處:http://en.pswp.cn/news/286336.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

C語言試題十六之寫刪除字符串中指定下標的字符。其中,a指向原字符串,刪除后的字符串存放在b所指的數組中,n中存放指定的下標。

??個人主頁:個人主頁 ??系列專欄:C語言試題200例目錄 ??推薦一款刷算法、筆試、面經、拿大公司offer神器 ?? 點擊跳轉進入網站 ?作者簡介:大家好,我是碼莎拉蒂,CSDN博客專家(全站排名Top 50),阿里云博客專家、51CTO博客專家、華為云享專家 1、題目 請編寫一個…

《iVX 高仿美團APP制作移動端完整項目》07 會員頁制作

會員頁如下: 一、會員頁標題制作 會員頁的標題是頂部的提示字樣,該字樣咱們可以分析,可以使用兩個文本組件,每個占據一行: 首先咱們創建一個頁面命名為會員中心: 接著在會員中心下創建一個行&#xff…

【ArcGIS風暴】ArcGIS添加超鏈接的兩種方法詳解

文章目錄 1. 在識別對話框中添加超鏈接2. 利用屬性字段添加超鏈接在ArcGIS中,可以很方便的設置文檔超鏈接和URL超鏈接,設置完成后,只需要點擊某個圖斑就可以跳到指定的地址。本文詳細講解ArcGIS中超鏈接的設置方法。 1. 在識別對話框中添加超鏈接 啟動軟件,加載甘肅省行政…

Android Studio目錄結構分析

Android studio 目錄結構1. .gradleGradle編譯系統,版本由wrapper指定2. .ideaAndroid Studio IDE所需要的文件3. app3.1 app/buildapp模塊編譯輸出的文件3.2 app/libs放置引用的類庫文件3.3 app/src放置應用的主要文件目錄3.4 app/.gitgnoregit使用的ignore文件3.5…

《iVX 高仿美團APP制作移動端完整項目》08 會員頁 標題、會員卡 制作

一、分類制作 我們接著往下制作該頁的下半部分內容: 由于對應最下部分的商家推薦重復,直接復制即可,在此不做過多的講解: 接下來我們創建一行命名為內容,用以作為下半部分的容器: 接著我們制作第一個種…

C語言試題十七之用來求數組的最大元素在數組中的下標并存放在k所指的儲存單元中

??個人主頁:個人主頁 ??系列專欄:C語言試題200例目錄 ??推薦一款刷算法、筆試、面經、拿大公司offer神器 ?? 點擊跳轉進入網站 ?作者簡介:大家好,我是碼莎拉蒂,CSDN博客專家(全站排名Top 50),阿里云博客專家、51CTO博客專家、華為云享專家 1、題目 請編寫一個…

微軟AI插件Github Copilot初體驗

前言上個月看到了一款插件 微軟 GitHub AI 編程工具 Copilot于是就想嘗嘗鮮,但是GitHub Copilot是需要申請的,只有申請通過的才能使用這款插件。就在今天我收到審核通過的郵件。于是想看看這插件是不是像其它網友說的那樣強!使用于是打開了我…

Firefox about

在firefox的地址欄輸入about:about,然后看一下各個鏈接.有的鏈接有具體的用途,有的鏈接瘋言瘋語,并無軟用. about:about集中了火狐瀏覽器的全部用戶界面,平時常見的preferences,startpage,add-ons等都可以在此處見到. about:mozilla是mozilla之書,它仿照圣經的語言風格,講述了m…

關于互斥鎖,條件變量的內核源碼解析

一、解決問題和適用范圍 主要是用來等待一個條件,這個條件可能需要另一個線程來滿足這個條件。這個和我們平常適用的pthread_mutex_lock的最大不同在于后者保護的一般是一個代碼段(也就是關鍵區),或者一個變量,但是由于一般來說這個變量的訪問…

【CASS精品教程】CASS 9.2繪制地籍圖詳細實驗案例教程

文章目錄 4.1 繪制地籍圖4.1.1 生成平面圖4.1.2 生成權屬信息數據文件4.1.3 繪權屬地籍圖4.1.4 圖形編輯4.3 繪制宗地圖4.3.1 單塊宗地4.3.2 批量處理4.4 繪制地籍表格4.4.1 界址點成果表4.4.2 界址點坐標表4.4.3 以街坊為單位界址點坐標表4.4.4 以街道為單位宗地面積匯總表4.4…

jquery.cookie.js 使用小結

先引入jquery,再引入:jquery.cookie.js添加一個"會話cookie"$.cookie(the_cookie, the_value);這里沒有指明 cookie有效時間,所創建的cookie有效期默認到用戶關閉瀏覽器為止,所以被稱為 “會話cookie(sessio…

Android開發 人民幣符號(¥)顯示不一致的問題

不小心踩了個坑,發現這個人民幣符號在不同機器上顯示不一致,有的顯示一橫,有的顯示兩橫。 百度查了一下,找到好很多解決辦法,改字體,用圖片等等。 最后發現原來用的是全角的“¥”的原因&#xf…

《iVX 高仿美團APP制作移動端完整項目》09 訂單頁制作

訂單頁制作比較簡單,界面如下: 一、標題 首先創建一個頁面,命名為訂單頁,并且給予背景色為黃色: 隨后創建一個行,命名為主要并給予對應的基礎屬性: 接著給予這個主要行對應的上下內邊距使其…

AutoDesk CAD 2014安裝VBA Enabler圖文教程(附AutoCAD_2014_VBA_Win_64bit下載)

在利用CASS將dwg地形圖轉為ArcGIS支持的Shapefile格式數據時,為了提高轉換效率,通常我們會寫一些VBA代碼來實現,但是VBA不提供與AutoCAD OEM 安裝介質,需要單獨下載VBA環境。 Visual Basic for Applications (VBA) 引擎不再提供與 AutoCAD OEM 安裝介質。 請聯系您的 Auto…

C語言試題十八之根據以下攻勢計算s,計算結果作為函數值返回;n通過形參傳入。S=1+1/(1+2)+1/(1+2+3)+…….+1/(1+2+3+4+……+n)

??個人主頁:個人主頁 ??系列專欄:C語言試題200例目錄 ??推薦一款刷算法、筆試、面經、拿大公司offer神器 ?? 點擊跳轉進入網站 ?作者簡介:大家好,我是碼莎拉蒂,CSDN博客專家(全站排名Top 50),阿里云博客專家、51CTO博客專家、華為云享專家 1、題目 編寫函數f…

開源項目 英雄聯盟 之WPF

WPF 英雄聯盟作者:Devncore 組織 來自 韓國,首爾原文鏈接:https://github.com/devncore/leagueoflegends感謝分享者晨晞gg[1];框架使用.NET6;C# 10.0;Visual Studio 2022;您可以了解如何正確實施 WPF 項目。描述了如何…

1055 最長等差數列

1055 最長等差數列基準時間限制:2 秒 空間限制:262144 KB N個不同的正整數,找出由這些數組成的最長的等差數列。 例如:1 3 5 6 8 9 10 12 13 14等差子數列包括(僅包括兩項的不列舉)1 3 51 5 9 133 6 9 123 8 135 9 136…

Android studio 的快捷鍵 MAC 和Win版本

功能描述keymap對應名字MacWin/Linux提示錯誤解決方案Show Intention Actionsoption enteralt enterAS配置界面Preferencescommand ,controlaltS工程項目配置界面Project Structurecommand ;Control+AltShiftS快速構成代碼Code Generatecommand Nalt insert代…

java中try 與catch的使用

(2011-10-08 17:08:43) 轉載▼標簽: 雜談 分類: Javatry{//代碼區}catch(Exception e){//異常處理}代碼區如果有錯誤,就會返回所寫異常的處理。 首先要清楚,如果沒有try的話,出現異常會導致程序崩潰。而try則可以保證…

iVX 倒計時制作

需求:點擊開始計時計時,并且開始計時按鈕文本編程停止計時文本,點擊記錄事件可以記錄當前時間并顯示到下面的記錄時間列中。 一、頁面制作 首先創建一個相對應用項目,命名為計時器: 接著創建一個頁面,設…