關于繪圖的思考

繪制過程

很久之前做過一個醫(yī)院護理單折線圖的需求，其實也是類似的實現思路。 —— 使用ZRender實現護理單折線圖功能

在自己實現了一遍之后，感覺無論是用代碼還是用筆畫，思路和實現邏輯都是一樣的：

• 拿到數據源和圖表配置要求
• 根據需求定位繪制區(qū)域
• 根據數據源在繪制區(qū)域內確定坐標軸范圍和刻度
• 根據已知坐標軸進行繪制

其實像 G2、Echart 這類圖表庫，與自行繪制圖表的不同點只在于它要滿足更多的需求、更加的大而全。為了能夠大而全，就會有大量配置項 API，它不能草率的開始繪制，而是需要先將數據源和配置項收集好，再根據已知條件進行一系列計算。最后才進行繪制。

G2 vs G2Plot

眾所周知，G2Plot 是基于 G2 來實現的。它們在實現圖表的不同之處在于：

• G2 是通過一條條的 API 來對圖表進行定義和描述，更符合從頭開始繪圖的思路。最后通過 render() 函數進行真正的繪制。
• G2Plot 內部默認有 G2 的配置，再合并用戶自定義的配置項。然后將最終配置項通過 G2 API 來完成最終繪制。

所以，使用 G2Plot 只需要知道各種配置項就可以完成需求，上手難度更小，適合一些大眾需求。而 G2 可以根據需求逐步定制所需的圖表，自由度較高，適合應對一些特殊需求。

圖表組件的實現思路

• legend 通過已有數據源直接繪制圖形和文本就可以
• tooltip 在 body 上創(chuàng)建一個 div 元素承載 tooltip 內容， 通過 canvas 對象的 hover 事件獲取位置，將內容 div 通過絕對定位移動到目標位置。
• axis 通過 canvas 來繪制線和刻度，這里需要計算刻度的間隔和范圍。
• label 通過 canvas 來繪制為本即可