又是一月結束，打工人準時準點的彙報工作如期和大家見面啦。提到彙報，必不可少的一部分就是資料的彙總、分析。
作為一名合格的社會人，我們每天都在工作、生活、學習中和數字打交道。小到量化的工作內容，大到具體的工作指標，車間生產、批發零售各行各業都充斥著大量資料。在網際網路誕生之後，網路把我們緊緊相連，也讓資料更為密集地匯聚。
扯遠了……當前，正在寫月報的葡萄面對的是，後端發來鋪天蓋地的兩萬條資料。
這個資料能用嗎？
能用，但不是完全能用。
畢竟做報告的時候，我們不能把兩萬條資料直接甩到領導的臉上，讓他自己想辦法看看。
這時萬一領導說，看看哪個省銷量最多，我們豈不是就當場就抓瞎了。
但是如果變成這樣一張圖：
就可以清晰明瞭地看出各個省份之間的銷量差距了。
拿著這張圖，我們就可以秒回領導：浙江省、天津市、江西省位居銷量前三。
而領導也可以滿意地拿著這張圖向他的領導彙報。
這樣一個資料處理的過程，就叫做“資料視覺化”，使我們能夠對資料進行加工和處理。
而對於一個優秀的前端而言，我們更加關注如何實現資料視覺化。這裡面涉及的知識領域其實很多，包括資料來源整合、資料抽取、資料清洗、資料建模、資料視覺化展示等等內容。
本篇文章主要為大家介紹下在前端領域，作為前端開發的我們需要掌握哪些視覺化技術，來幫助我們更好地實現資料視覺化展示。
一、基礎開發技術
1、SVG
SVG是一種XML語言，類似XHTML，可以用來繪製向量圖形。SVG可以通過定義必要的線和形狀來建立一個圖形，也可以修改已有的點陣圖，或者將這兩種方式結合起來建立圖形。
以下是MDN上的一個例子：
<svg version="1.1" baseProfile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg"> <rect width="100%" height="100%" fill="red" /> <circle cx="150" cy="100" r="80" fill="green" /> <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text> </svg>
繪製了一個矩形（rect標籤）、圓圈（circle標籤）和文字（text標籤）。一般如果畫布比較大，有縮放、平移等高頻的互動的場景，常見的餅圖、柱狀圖、流程圖之類的開發，可以考慮使用 SVG 。關於SVG的具體使用教程可以移步文件：https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial
2、Canvas
Canvas API 提供了一個通過JavaScript 和 HTML的元素來繪製圖形的方式。它可以用於動畫、遊戲畫面、資料視覺化、圖片編輯以及實時視訊處理等領域。
Canvas繪製的圖形不會出現在DOM結構中，一般小畫布、大資料量的場景適合用Canvas，效能更好。
以下是一個簡單例子：
HTML部分：
<canvas id="canvas"></canvas>
JavaScript程式碼部分：
const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); ctx.fillStyle = 'green'; ctx.fillRect(10, 10, 150, 100);
關於Canvas的具體使用教程可以移步文件：https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial
3、WebGL
WebGL 使得在支援HTML 的 canvas 標籤的瀏覽器中，不需要安裝任何外掛，便可以使用基於 OpenGL ES 2.0 的 API 在 canvas 中進行2D和3D渲染。如果您有一些3D繪製的需求，可以採用webGL方案。尤其是3d地圖、3d地球等繪製都需要用到webGL技術。
webGL是基於Canvas的繪圖技術。要使用webGL進行3D渲染，首先得在頁面中建立一個canvas元素，通過這個canvas元素來初始化WebGL上下文。其中細節大家可以移步文件使用學習：https://developer.mozilla.org/zh-CN/docs/Web/API/WebGL_API/Tutorial
二、視覺化元件和工具
1、ZRender
ZRender是一個輕量級的Canvas類庫，是一個二維繪圖引擎，它提供 Canvas、SVG、VML 多種渲染方式，並提供類 Dom 事件模型。同時，ZRender 也是 ECharts 的渲染器。
使用ZRender並不複雜，我們需要引入相應的JavaScript檔案，利用其所提供的API初始化一個Dom容器，在這個容器裡繪製您所需要的圖形。以下是一個簡單例子，建立了一個圓心在[150，50]，半徑為40的圓：
var circle = new zrender.Circle({ shape: { cx: 150, cy: 50, r: 40 }, style: { fill: 'none', stroke: '#F00' } }); zr.add(circle);
關於更多圖形的畫法可以參考ZRender的官方文件 https://ecomfe.github.io/zrender-doc/public/
在此不再贅述。
2、Echarts
如果需要做視覺化方面的工作，那麼你對Echarts一定不陌生。Echarts是百度開源的一個javaScript視覺化相簿，可以流暢地在 PC 和移動裝置上執行，相容當前絕大部分瀏覽器，底層依賴向量圖形庫 ZRender，提供直觀、互動豐富、可高度個性化定製的資料視覺化圖表。同時，Echarts的學習和使用也相對容易，通過幾個簡單的option配置項就可以很快地繪製出一個圖表出來。比如一個折線圖，只需要十來行配置搞定：
option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [ { data: [150, 230, 224, 218, 135, 147, 260], type: 'line' } ] };
除了2D圖表，echarts也提供了Echarts-gl，它能實現對三維圖表和地球的展示，這點其他開源庫基本沒有。雖然2D圖也可以實現仿三維效果，但只有 Echarts-gl 是基於 WebGL 做的真三維，可以配置光照、材質、陰影，還有獨家的後期特效等功能。
關於Echarts的更多配置使用可以移步Echarts文件：https://echarts.apache.org/zh/option.html#title
除了Echarts官方提供的資源外，Echarts的資源社群Gallery才是真正的主力軍。這個社群上有非常豐富的圖表資源，都是使用者個人上傳的，還可以進行篩選查詢，這些圖表基本上可以滿足絕大多數應用場景。
3、AntV
AntV 是一個資料視覺化專案，也是一個團隊，即螞蟻集團的資料視覺化團隊。AntV 目前覆蓋了統計圖表、移動端圖表、圖視覺化、地理視覺化、2D 繪圖引擎和智慧視覺化等多個領域，主要包含 G2棧、F2棧、G6棧、X6棧、L7棧、AVA 以及一套完整的圖表使用和設計規範。
其中G2主要致力於通用圖表庫，用更簡化的語法構建出各種各樣的可互動統計圖表。F2是一個專注於移動、開箱即用的視覺化解決方案，完美支援 H5 環境同時相容多種環境（node, 小程式，weex等）。L7 是一個基於 WebGL 的開源大規模地理空間資料可視分析開發框架。關於AntV的各類圖表使用，大家可以去官網自行查詢：https://antv.vision/zh
4、Wyn Enterprise
Wyn Enterprise 是一款強大的嵌入式資料視覺化工具，提供了靈活的資料互動和探索分析能力，以及 OEM 白標整合的方式，全面滿足行業應用軟體的資料分析需求。它具備多源資料整合、報表設計、資料視覺化、自助式BI分析、以及資料填報等功能，幫助使用者挖掘資料的潛在價值，為管理者制定決策提供資料支撐。
https://www.grapecity.com.cn/solutions/wyn
5、D3
D3.js庫是一個開源專案，作者是紐約時報的工程師。準確來說，D3.js實際是一個JavaScript函式庫，不是圖表庫，比較適合於做資料視覺化。D3有豐富的數學函式處理資料轉換和物理計算，可以把資料和 HTML 結構或者 SVG 文件對應起來，這種特性讓我們可以更方便的操作DOM繪製圖表。它可以說是 “視覺化界的jQuery”，因為D3的api和jQuery非常類似，可以看以下的例子：
d3.select('#chart') .selectAll("div") .data([4, 16, 23, 42]) .enter() .append("div") .style("height", (d)=> d + "px")
如果只是想繪製常見圖表，倒是沒必要直接用 D3，可以看看那些基於 D3 的圖表庫，比如Ploty.js、nivo等。這裡貼出d3的GitHub專案地址：https://github.com/d3/d3
6、Vega
使用Vega不需要寫前端程式碼，它做到了只需要 JSON 就能完成所有圖表相關的開發，包括資料的載入、轉換、互動等。由於Vega致力於通過一些JSON配置項實現圖表的繪製，導致在生成一些基礎簡單的圖表時，也需要很多行的配置。比如最簡單的柱狀圖就需要95行配置，所以它提供了更簡明的語法Vega-Lite，用於快速生成視覺化以支援分析。以下是一個柱狀圖的示例：
這裡給大家貼出vega-lite的官網供大家學習：https://vega.github.io/vega-lite/
三、結語
到這裡給大家介紹了幾種比較熱門的視覺化技術或相簿，以上介紹的都是可以免費使用的，當然市面上也有一些商業圖表庫，比如HighCharts、AnyChart、Wyn Enterprise、FusionCharts 等，大家有興趣可以自行了解下。
