如何評價螞蟻金服體驗技術部推出的數據可視化解決方案 AntV？

網站地址：AntV

昨天在螞蟻做了分享，分享的內容是基於 G2 的上層封裝，這裡也談談我對 AntV 尤其是 G2 的理解。我看了一些對比 Echarts 和 G2 的文章，只能說要看清本質還是需要真的用過後，真的理解再來說好吧。

1. 數據本質理解的差異

絕大部分 Web 端的圖表都是給不懂數據的工程師用的。與其說數據不標準，我更覺得是不理解，憑直覺在傳數據。理解數據的確是有個成本，很多前端是不重視數據的，因此做不好可視化也是情理之中。在你對比過 G2 和其它圖表後，你會對數據有一個更好的認識與理解。

先看這樣一張圖，我們反推下數據。

const data = [
["1750", "1800", "1850", "1900", "1950", "1999", "2050", "2100"],
[163, 203, 276, 408, 547, 729, 628, 828],
[502, 635, 809, 947, 1402, 3634, 5268, 7268],
];


絕大部分的圖表給出上面這種形式的數據傳入。對於圖表要的數據來說，是挺直觀的。但有沒想過，這樣的數據要作變換有多麻煩。為什麼？這樣的數據已經經過匯總，損失了信息。

原始表數據用行返回是這樣的：

const data = [
{ country: "Europe", year: "1750", value: 163 },
{ country: "Europe", year: "1800", value: 203 },
{ country: "Europe", year: "1850", value: 276 },
{ country: "Europe", year: "1900", value: 408 },
{ country: "Europe", year: "1950", value: 547 },
{ country: "Europe", year: "1999", value: 729 },
{ country: "Europe", year: "2050", value: 628 },
{ country: "Europe", year: "2100", value: 828 },
{ country: "Asia", year: "1750", value: 502 },
{ country: "Asia", year: "1800", value: 635 },
{ country: "Asia", year: "1850", value: 809 },
{ country: "Asia", year: "1900", value: 947 },
{ country: "Asia", year: "1950", value: 1402 },
{ country: "Asia", year: "1999", value: 3634 },
{ country: "Asia", year: "2050", value: 5268 },
{ country: "Asia", year: "2100", value: 7268 }
];


明細數據表達了最完整的數據信息，包括了維度，指標。這樣的數據是最適合做統計變換的，它有兩個維度 country 和 year，一個數據指標 value。這也是 G2 需要的數據。

再反觀上面的數據作了降維，人對一維數據表達是要直觀一些，但抽象減弱很多。然後行列轉換成的列數據。數據本身除了比較精簡外，數據本身已經經過一次匯總，損失了信息量。要作通用的統計變換已經不方便了。

儘管上面的數據是比較直觀，但這對數據處理來說一定會『約定』，約定一條線對應一組數據，給定一種數據格式來對應圖形的展示。帶來的局限性是，數據的使用是根據圖形來定的。如果你用過 tableau，想過為什麼它可以通過點選不同的圖表可以實現快速變換？

然後有 Data-set 這個工具。Data Set 包含了非常多的統計處理，包括分箱等，這些統計處理一方面是為了繪製圖形作的數據變換，另一方面是作了一部分數據標準化的工作，比如上面的數據如 fold transform 就可以轉換到標準表結構。將標準化與統計變換的工作與可視化繪製分離。更方便作抽象。

2. 數據與圖形的映射

有了以上的數據層的基礎，再有繪製層。Grammar Of Graphics 理念不是新東西，針對統計領域的 ggplot 而言。python 好像也有類似的實現，但並不有名。在 Web 端至少沒看到實現與工程結合得非常好的。

我們再來看實現方式。G2 的實現裡面不會出現數據，因為都是靠數據 key 與組成部分的映射完成的。比如修改 Axis，我們會指定 year 來定義屬性；再比如圖形的映射，顏色對應 country 欄位，位置的 x 對應 year 欄位， y 對應 value 欄位。重點：在整個配置中都不會出現數據。

const chart = new G2.Chart({
container: "mountNode",
forceFit: true,
height: window.innerHeight
});
chart.source(data);
chart.interval()
.adjust("dodge")
.position("year*value")
.color("country");
chart.render();


得益於這種理念，可以繪製幾乎所有的圖表，而且數據與繪製是分離的。

3. 框架支持

我們團隊作了基於 G2 的 react, vue, angular 實現 Viser，目前還沒有可視化庫對前端框架特別友好。一下支持三個主流框架。我們還在完善文檔和細節，完善好了，你可以直接使用基於 G2 的框架實現。截一段 Vue 的：

&
&
&
&
&
&
&
& &

export default {
data() {
return {
data,
dataMapping,
dataPre,
scale,
height: 400,
stackBarStyle: {
stroke: "#fff",
lineWidth: 1
}
};
}
};
&


對比理念，功能的豐富度都是十分值得去深挖的。G2 沒有取名 xxchart 也是因為它不是 chart，它有創造性，可以根據映射關係自己去想像新的圖形數據關係，新的數據表達。這是它的前瞻。

最後，說下 AntV ，它是一套可視化解決方案，包括了 G2，G6，F2。具體一些是 2D 下 Web 端可視化解決方案。不論是 AntD 還是 AntV，都感受得到螞蟻體驗團隊對人機交互的實踐探索，以及用戶體驗的極致思考。

優點有很多，比如貌似是國內第一個採用The grammar Of Graphics這套理論的可視化庫，還有其他的一些優點。

主要說說不足的地方，剛剛測試了一下，在柱形圖的情況下大概1萬條數據的情況下會卡住一會，相比之下Echart性能上會好一些，考慮到echart只是單純的畫個chart，而antv裡面有簡單數據的數據歸類，分析的能力，這些也是情有可原的。 整體結構上沒有採取傳統的樹形view結構，所以看起來也就沒有用到臟區域重繪這些技術。g庫上也沒有發現對canvas 的優化，比如同一frame內的所有繪製緩存起來一次性畫上去這種對繪製性能有巨大提升的地方。

data-set 裡面混入了一些layout需要的東西，比如treemap的layout，這些完全可以分類到chart的實現裡面。當然有可能開發人員對data-set的理解不僅僅是數據的處理。

看了半個小時，個人的片面之言，不對的地方大家提出來。

我的看法是，結構上有些不是特別清晰，有很多可以優化的地方，優點也很明顯。總之，整體上來說是一個非常不錯的開源數據可視化框架。

自從咱們用MVVM以後，這種地圖啊，圖表之類的庫，痛點就是一個，有沒有自帶diff讓咱們可以隨意做數據綁定，每次都重新渲染全部數據呢？

《The grammar Of Graphics》的作者親自做了回復

I am the author of The Grammar of Graphics and I am thrilled with your project. It is amazingly faithful to the GG system and has the potential to generate more graphics. Unlike some systems based on SVG, it also appears to be able to handle larger problems efficiently by using other renderers. You have also tackled difficult classes like Coordinates and Facets. I just saw this today, so I will look for ways to help you in the future. I may be able to help with some of the difficult issues that I encountered when writing the book and coding in Java. And I look forward to the opportunity to meet some of you in person in Silicon Valley or elsewhere. If this project continues with the same energy you have demonstrated so far, this will be the most powerful visualization system in the world. Congratulations!
Leland Wilkinson

Demos Page, Language · Issue #221 · antvis/g2

跟highchart比差遠了好吧

阿里KPI搞出來騙3.75的~

關於The grammar Of Graphics的概念是在IBM第一次聽說的,當時IBM開發了一套內部的圖形引擎叫RAVE，簡單的說就是定義了一套自己的關於圖形的描述語法。具體來說就是定義好一個json file，裡邊定於關於圖形的語法描述和數據，然後交給底層的圖形引擎，就可以渲染出來了。這裡放一下，我之前blog上的一篇文章。今天，我們完成這個柵格圖-RAVE（5）如果有興趣可以看下。

後來就沒有後文了，不開源，所以現在好像也無疾而終了。

去年看到了，G2的出現，同樣的基於The grammar Of Graphics的理念，拿G2和E-charts的比較是不恰當，一個是圖形庫，一個是定義了一套自己的圖形描述語法，從擴展性上自然是G2的更為強大。所以看到，G2的發展越來越快，也是十分的高興。

但是，對於根據之前使用RAVE的經歷，對於這種The grammar Of Graphics的理念還是有些疑問的，例如在實際的項目上如果遇到定製化特別高的圖標，這類圖形引擎所定義的語法很難滿足需求的時候，還是比較難受的。例如我之前的一個項目中要求x軸就是非規則的區間，當時想了很多的方法還是滿足不了。還有，如何畫出一個橢圓。當然在這樣需求下，也許像D3這樣的library才是選擇。

最後暢想下未來，既然是The grammar Of Graphics，那麼可以預見以後不僅僅是web，其他的端支持也只是個時間問題了吧。不過對於客戶端的開發，也許未來就是JavaScript的，所以祝G2發展越來越好

AntV 3.0 官網終於把 文檔搜索 功能加上了，點贊！

當然牛逼啦，畢竟有中國前端界開天闢地之人坐鎮！

https://media.weibo.cn/article?id=2309404087440490004026