進無止境,AntV 統計圖表 G2Plot 1.0 發布

是一個開箱即用、易于配置、體驗優雅的統計圖表庫,致力于幫助用戶以最小成本生成高質量統計圖表。

G2Plot 最初誕生于阿里經濟體 BI 產品真實場景的業務訴求。動態、高度不確定是 BI 產品和中臺系統業務數據的一個普遍特征,而這種特征對統計圖表的功能和體驗提出了巨大的挑戰。如何能夠幫助報表系統和一線前端在復雜數據條件下快速高效地創建統計圖表,同時保證圖表在各種顯示空間和數據狀態下的可讀性和可用性? 為解決這兩個痛點問題,AntV 與 DeepInsight、QuickBI 和 FBI注册送28体验金的游戏平台,阿里經濟體三個優秀 BI 產品技術團隊聯手打造了 G2Plot。

自去年 11 月發布 0.x 試用版后,G2Plot 經歷了 20 多個小版本的迭代優化注册送28体验金的游戏平台,圖表類型已從最常用的 7 個擴展到 40 多個,在核心 BI 產品真實場景上線驗證后終于帶來 1.0 正式版。希望我們在數據可視化業務,特別是 BI 產品中的開發和設計經驗能夠幫助到更多用戶輕松制作優雅的統計圖表。

特性預覽

簡單易用

圖形語法是統計圖表的奠基理論,具有完備、靈活、無限可能的可視表達能力,全球頂級 BI 系統的可視分析實現基本都以此理論為基礎,G2 可以說是 JavaScript 領域最完備的圖形語法實現,也因此成為很多專業可視分析應用的首選技術方案。然而,對于應對大部分常規應用,對于大部分工程師、設計師和產品經理來說,學習理解“視覺通道”、“坐標系變換”、“數據映射”等專業可視化概念需要付出相當高的學習和時間成本。在統建阿里數據可視化基礎設施的大背景下,AntV 與阿里經濟體多個團隊聯合共建 G2Plot 應運而生注册送28体验金的游戏平台,構建在 G2 強大的可視表達能力之上,采用大家熟悉的配置化、描述性 API,為使用者屏蔽可視化專業知識,用戶只需要引用相應的圖表,指定數據和配置字段即可通過數據驅動的方式生成圖表。

簡約而不簡單的精雕體驗

今年1月4日在杭州西湖文體中心,第三屆 SEE Conf 螞蟻金服體驗科技大會上,AntV 核心研發工程師,同時也是 DeepInsight 的數據可視化方向負責人小為給大家帶來了的精彩分享,還沒看過的同學強烈推薦看看。分享中已經提前劇透了 G2Plot 的大量體驗優化細節,G2Plot 每一個線上圖表都經過了細心雕琢,我們會在關注圖表自身特點的基礎上,根據不同的使用場景、顯示空間、數據特點針對圖表的細節和體驗進行精心打磨。

圖形

繼承 G2 無限可能的特性,G2Plot 擁有豐富多樣的圖形擴展。

通過對數據進行剪枝處理和相關點簡化算法,對大數據量和極小顯示空間等特殊場景進行圖形優化。

交互

我們把一些常用的復雜交互進行了內置,用戶不需要再自行封裝,只需調用相關配置項即可使用。同時,我們還把細粒度的事件機制,畫布、圖形、組件交互能力全方位透出以方便用戶高度個性化定制。

圖表聯動、數據鉆取與篩選

動畫

我們根據每一個圖表自身的特點和使用場合,精心設計了一些動畫效果,讓圖表更加靈活生動。這些復雜動畫效果都已內置,可以通過配置項和圖表方法直接調用。同時,我們還提供了細粒度的動畫配置,用戶可以通過指定動畫類型、時間、緩動效果,自由控制圖表的入場、消失和數據更新動畫效果。

更細膩的更新與入場動畫

組件

響應式組件,在現實的圖表應用場景中,一個棘手的難題是圖表的展示空間往往并不足夠顯示圖表的數據量,造成極值情況下文本的重疊遮擋內容無法自適應內容裁剪等問題。G2Plot 借鑒寬容性設計的思想,在圖表的信息密度過高時,對圖表組件信息進行抽稀、省略、調整,保證圖表主要信息的展示和基本可讀性

內置統計分析高級組件,在一圖一做、細致打磨的過程中,我們根據每一個圖表的特點,將使用圖表進行統計分析時常用的組件進行了封裝,內置進G2Plot。

堆疊柱狀圖(聯通區域組件) 熱力圖(滑動錨點圖例)

體驗對比

下面是 G2Plot 與幾種常用圖表庫的效果對比:

默認好看與靈活配置并重

基于 AntV 設計語言,一套提煉自企業級產品的視覺語言和設計規范,G2Plot 根據每一個圖表自身的特點沉淀出一套默認配置,保證每個圖表在開箱狀態下,呈現給用戶的就是最規范、最優雅的狀態。Good by Default 的同時,G2Plot 開放細粒度的圖表配置,無論圖形樣式、各類圖表組件、文本顯示還是圖表事件,用戶都可以根據自己的業務場景生產個性化圖表。

最后

非常感謝你的耐心閱讀,G2Plot 發布 1.0 版本只是一個開始,雖然已經在 DeepInsight 等 BI 產品中應用上線,但相信還有很多問題有待打磨和完善,歡迎在 給我們反饋問題。如果你對 G2Plot 或者 AntV 旗下的其他產品感興趣,可以通過以下渠道關注我們:

  • GitHub:
  • Gitee:
  • 官網:
  • AntV GitHub:
原文鏈接:

上一篇:js鏈表的中間結點(leetcode)
下一篇:2020 前端面試復習大綱之N+公司感悟

相關推薦

  • 首屏時間從12.67s到1.06s,我是如何做到的?

    (https://img.javascriptcn.com/3fa75e0635af98d204f24bd0c8ae3398)作者|jerryOnlyZRJ編輯|覃云 本文轉載自 IMWeb 前端博...

    2 年前
  • 阿里 Node 企業級框架 - Egg 10000 Star + 2 years ✨✨✨

    『大吉大利,明早吃蛋。』 底部有文化衫活動邀您參加。 2016 年 9 月,我們在 JSConf China 2016 上宣布了 Egg 開源,至今整整 2 年了。

    2 年前
  • 這一次,用 AntV 給你的老板畫個餅

    作者 新茗 螞蟻金服·數據體驗技術團隊 TL;DR G2Plot 是一個注重于細節體驗的通用統計圖表庫。 背景 餅圖,或稱餅狀圖,是一個劃分為幾個扇形的圓形統計圖表。

    1 個月前
  • 達標率85%!2020年首份Top1000應用綠標評測報告發布

    基于《軟件綠色聯盟應用體驗標準2.0》,軟件綠色聯盟聯合華為終端開放實驗室共同發布2020年首份國內千款主流應用達標評測報告。報告顯示,2月份國內千款應用中綠色應用占比為85%,結合近幾期綠標評測數據...

    10 天前
  • 輔導案例-CSSE1001/7030

    輔導案例CSSE1001 CSSE1001 Supplementary Programming Exercise Create a simple banking application with a ...

    6 個月前
  • 輔導案例-CSSE1001

    輔導案例CSSE1001 CSSE1001 Supplementary Programming Exercise Create a simple banking application with a ...

    6 個月前
  • 詳解js中 0.1+0.2 !=0.3

    筆者曾經面試被問到過0.10.2的結果是啥,初看這題你可能心中會想,難道不是0.3嗎?但你肯定會覺得沒那么簡單,那今天我們就來探一探究竟。 1. JavaScript中數字的存儲機制 在Java...

    4 個月前
  • 詳解1000+項目數據分析出來的10大JavaScript錯誤

    譯者按: null/undefined引發的錯誤在10大錯誤中比例很高。而它們很可能導致嚴重問題,所以要重視起來。 為了保證可讀性,本文采用意譯而非直譯。另外,本文版權歸原作者所有,翻譯僅用于學...

    2 年前
  • 計算10000以內的升數(朋友抽風問的 我就裝逼的答了)

    升數的定義:后面的數字大于前面的數字 即12、14、123、124、128等是升數 122、112、12不是升數 具體思路如下: 定義一個數字存放0~9; 運用遞歸來查詢出所有的升數(升數是有規...

    2 年前
  • 解決ElementUI進度條組件percentage超過100報錯的問題

    由于format處理的只是進度條文本的展示效果, 而且該參數只接收一個函數, 所以可以通過以下方式保持超過100仍按100顯示, 但文本可以顯示實際值: ...

    4 個月前

官方社區

掃碼加入 JavaScript 社區