圖表製作可以很簡單- 圖表魔方ChartCube

blank

圖表製作可以很簡單- 圖表魔方ChartCube

AntV 作為螞蟻金服專業的數據可視化研發團隊,一直致力於深入可視化技術的底層,並且擁有了許多專業理論和工具儲備。我們的前端類庫不斷賦能探索分析、商業智能等領域的發展。但是我們也注意到,有一些小巧而廣泛的可視化應用場景沒有得到充分地支持。

圖表製作——這個最常見卻也五花八門的需求,往往因為工具的領域閉塞性而變得麻煩。雖然設計師能畫出任何形式的圖表,但他們總為了數據的批量改動手抖;雖然分析師可以使用辦公軟件熟練地製作圖表,但他們可能會因為靜態的圖片不能交互而發愁;雖然程序員可以繪製高可用的交互式圖表,但他們常常為了學習代碼類庫而撓頭……讓你在製作一張簡單圖表時感受到挫敗的,通常是一個淺淺的門檻。這個門檻可能是“圖例怎麼對不齊”,也可能是“數據怎麼行列轉換”,還可能是“分析這個目標我該用什麼圖表”……困擾你的是哪一種?

有沒有一種方法,可以讓大家都簡單方便地製作圖表?從去年七月開始,我們著手研發圖表推薦內核,並順勢產出了一個圖表製作工具原型。後來這個原型落地到了幾個設計插件中去,得到了許多反饋和提升。現在,是時候了!

為了讓AntV多年沈淀的專業技術可以服務於更多人,我們推出了一個在線工具:圖表魔方ChartCube ( chartcube.alipay.com/ )。

▍人人易用的圖表製作工具——圖表魔方

ChartCube 針對快速圖表製作的場景,只要有瀏覽器就可以使用。

blank
chartcube.alipay.com

無論你是誰,都可以用它。你可以完全不懂如何處理數據,你可以沒聽說過任何圖表類庫,你也不需要寫一行代碼。通過最直觀的交互,誰都能製作出所需的圖表。

無論你要做什麼,都可以用它。也許你想為你的運營文章製作一張插圖,也許你需要一份滿足格式要求的數據,甚至你需要一份直接插入網頁的代碼,ChartCube 都能支持。

利用ChartCube 製作圖表,過程非常簡單。通常你需要三步:選擇圖表、配置圖表、導出圖表。

▍圖表導覽,幫你選出最合適的圖表

可視化的目的是為了從數據中獲得洞察,甚至利用洞察去支撐決策。如果選擇了錯誤的圖表類型,很可能南轅北轍。我們為每一種圖表類型附上相關介紹,幫助你了解圖表類型間的區別,以及如何在正確的場景下使用這些圖表。

blank
ChartCube 圖表類型選擇頁面

ChartCube 提供了多種選擇圖表類型的角度,無論你從圖表分類學出發、從分析目的出發、從數據類型出發……都能快速找到最適合你的分析場景的圖表類型。如果你已經有心儀的圖表類型,也可以通過搜索直接找到它。

▍三通配置,製作過程愉快得像遊戲

ChartCube 有「圖表」、「數據」、「配置」三個面板,兩兩互通。無論你在哪個面板上做了什麼修改,其他面板上相關的選項也會相應發生變化。我們稱這樣的設計為“三通配置”,它讓用戶可以從自己認為最直觀的渠道去做設置。

blank
ChartCube 圖表配置頁面

比如,需要修改一根柱子的高度。工程師可能會從數據思考,打開數據面板,找到對應的單元個,修改數值。而設計師可能會從圖形出發,在圖表面板,選中一根柱子,通過此時出現的錨點,直接拖拽柱子的高度。

blank
Shape2Data 從形到數能力

沒錯,你可以通過和圖形直接交互來改變數據和配置項,這是我們的「從形到數」功能。這個能力使得原型製作、設計稿繪製、訊息圖表製作等等場景得到極大提效。

在配置面板,我們為每種圖表類型整理出的最常用、最必須的配置項,保證了工具的簡潔。當然,如果你想對圖表的細枝末節進行調整,也可以打開“全部配置”選項卡。在那裡你可以找到我們的底層類庫G2Plot 所支持的功能詳盡的配置選項。

▍豐富導出,滿足不同人群不同需求

圖表製作完成,自然是要拿出去用了。圖片、數據、代碼……知道知道,你全都要!我們提供了各種導出格式,不管你用圖表來做什麼,我們都給你備齊了。只需預覽、導出,統統拿走!

blank
ChartCube 導出頁面

如果你想保存這次的工作,可以導出我們的.chartshaper配置文件,下次將它導入到ChartCube。

▍各種超級提效場景

有了ChartCube,分析師面對一些小而輕的圖表製作場景,再也不用先打開一個龐大的軟件了。 Tableau、Power BI?連Excel 都嫌重。打開軟件的時間我圖表都已經做好了。

數據新聞工作者,自媒體運營,要出圖片的時候那可是爭分奪秒啊,生怕丟了熱點。有了ChartCube,拖拖拽拽,幾下就能完成表意內容,生成訊息圖表。

產品經理要給客戶的報表畫個原型圖很痛苦,手繪吧怕客戶看不懂,高保真吧不知道用什麼畫。心中早就有了格局,奈何為了畫出原型假數就造了半天有沒有。用ChartCube 吧, 10 秒一張原型圖。

程序員再也不用跟設計師掰扯了,什麼能實現什麼不能實現。設計師直接在ChartCube 配置好圖表和样式。設計師:“嘿嘿,只要能配出來的就一定能實現。”程序員:“實現啥?代碼已復制。”換個數據內容圖表就活了,一行可視化代碼都不用寫,告別脫髮指日可待。

話說設計師,其實ChartCube 的內核早已嵌入在我們團隊研發的Sketch 設計提效插件——Kitchen 當中了。畫圖表再也不用一根柱子一個弧地去畫了!

blank
Sketch 設計工程化插件Kitchen 中的圖表生成功能

▍結語

數據的簡單預處理和假數模擬、更多的圖表類型、更細膩的配置項、更爽滑的圖表交互體驗等等都已經在奔向你的路上,歡迎試用,期待聽到你的聲音。

同時,ChartCube 也承載了AntV 智能可視化的未來,AntV 的智能可視化是什麼?先賣個關子,2020 年1 月4 日,第三屆SEE Conf 見~


AntV 品牌日的發布詳情

AntV 項目鏈接

歡迎關注我們的GitHub 項目,點亮star 了解我們的實時動態,期待pr:

  • AntV官網https://antv.alipay.com
  • G2 github.com/antvis/g2
    G2是一套基於可視化編碼的圖形語法,以數據驅動,具有高度的易用性和擴展性,用戶無需關注各種繁瑣的實現細節,一條語句即可構建出各種各樣的可交互的統計圖表。
  • G2Plot: github.com/antvis/g2plo
    G2Plot 的定位是開箱即用、易於配置、具有良好視覺和交互體驗的通用圖表庫。
  • F2 github.com/antvis/f2
    F2是一個專注於移動,開箱即用的可視化解決方案,完美支持H5環境同時兼容多種環境(node,小程序,weex)。完備的圖形語法理論,滿足各種可視化需求。專業的移動設計指引為你帶來最佳的移動端圖表體驗。
  • G6 github.com/antvis/g6
    G6是AntV旗下的圖可視化與圖分析引擎,G來自於Graphic、Graph ,意味著我們要基於圖分析技術做圖可視化;6來自於《 六度分隔理論》,表達了我們對關係數據、關係網絡的敬畏和著迷。
  • Graphin: github.com/antvis/graph
    Graphin是一個基於G6封裝的關係可視分析工具,簡單,高效,開箱即用,取自Graph Insight,圖的分析洞察。
  • L7 github.com/antvis/l7
    L7是一個基於WebGL的開源大規模地理空間數據可視分析開發框架。 L7中的L代表Location,7代表世界七大洲,寓意能為全球位置數據提供可視分析的能力。
  • G github.com/antvis/g
    G是AntV幾個產品共同的底層2D渲染引擎,高效易用,專注於圖形的渲染、拾取、事件以及動畫機制,給上層G2、F2、G6提供統一的渲染機制。
  • ChartCubehttps://chartcube.alipay.com
    ChartCube是一個可以快速完成圖表製作的在線工具,只需要三步就可以創建出高品質的圖表。

What do you think?

Written by marketer

blank

9102 年,螞蟻金服前端是怎麼寫圖表的?

blank

IVWEB 玩轉WASM 系列-WEBGL YUV渲染圖像實踐