Android MPAndroidChart繪製原理

2022-08-25 10:02:40

前言

筆者接下來的文章裡MPChart 代表的就是 MPAndroidChart。

下載後AS裡執行，可以看到demo裡面有 Line Charts， Bar Charts, Pie Charts, Radar Charts, Other Charts.

Demo 本身的內容比較詳細，簡單的圖表繪製直接可以拿來程式碼使用，不做過多介紹。本文及本系列專題著重剖析MPChart的繪製原理及流程，以及部分自定義的屬性、圖表等內容。例如在生產環境中通常會有一些設計或者產品上的需求，原本的MPChart無法滿足時，就需要自定義一些區域性的屬性，更甚者會新增一些型的圖表樣式，比如修改 X軸，Y軸（圖表區域性屬性），新增睡眠泳道圖，步頻的散點圖等，專題後續會涉及。

1. Chart整體結構

Chart下面包含有座標系的BarLineChartBase，以及沒有座標系的PieRandarBase.

圖 1.0(Chart 整體結構)

筆者通常在工程中使用較多的是Bar、Line兩種圖表, 除此之外，還有很多其它的圖表型別(見範例圖1.1)

圖 1.1（座標系Chart）

2.Chart 繪製參與的業務元件

本節從具有座標系的LineBarChartBase入手逐步拆解MPChart，檢視Chart內部具體的繪製邏輯。

無論一個圖表怎麼複雜，依舊沒有逃離View的整個繪製邏輯，廣義上來說自定義View 分自定義View，自定義ViewGroup, ViewGroup 涉及到parent 跟child , 各child 之間的擺放關係，需要處理layout相關的問題。而這裡的MPChart圖表，絕大多數涉及到位置的擺放通過螢幕畫素座標點去定位，然後依照座標點去繪製，所以我們著重需要關注的是Chart (View) 的 onDraw()方法，這裡是BarLineChartBase的onDraw() 方法，可以看到所有的繪製邏輯都在該方法內。

圖 1.3（chart的onDraw方法）

Render

可以從上面的圖1.3中可以看到，Chart的繪製分小元件逐個繪製的，每個元件定義自己的Render，在對應的drawXXX 方法裡進行繪製，比如有專門繪製X軸的XAxisRender，繪製Y軸的 YAxisRender，繪製BarChart的BarChartRender，以及繪製 Line chart的 LineChartRender，繪製邊框 backGround等等，所以剖開整個Chart的繪製邏輯來看，我們會發現Chart的繪製就是通過各種Render去 drawLine、drawRect 、不規則的drawPath, 或者貝塞爾曲線drawCubicPath(其實也是屬於drawPath的範疇)；以及部分輔助，座標軸的label 所需的drawText, 這些各種的小部件的繪製最終完成了 Chart整個的繪製。

可以參考原始碼 : BarChartRender 裡的 drawData() , drawDataSet(DataSet dataSet，...) 方法。

圖1.5（Chart 圖表柱子繪製）

那麼問題來了，上邊介紹的Render的各種繪製，這些小部件背後對應的Pixel Point，比如簡單的BarChart 中的某一個 Item Chart，直接對應一個RectF (start, top, end, bottom), RectF包含四個座標點；又比如簡單的LineChart，一條折線包含兩個端點，PointA(x1, y1), PointB(x2, y2)，多段折線累加就構成了我們所需的線性表，它們是如何得來的？

在此，我們以一個具體的範例著手來分析，比如繪製某一天的步數BarChart, 要求每半個小時一根柱子，所以一共48根柱子，每個柱子的高度對應的該時間段的步數sum，這些我們稱之為業務資料，如何將這裡的業務資料轉化成Render 繪製最終所需的Pixel Point呢？

圖1.6（24小時步行圖）

Buffer

從圖1.5的原始碼裡可以看到Render裡 canvas drawRect的資料來自 BarBuffer的資料結構，首先我們會將業務資料放置到一個Buffer 陣列裡，然後通過一個工具Transform, 將buffer裡的資料轉化成 pixel point, 繼續儲存在Buffer裡，然後繪製流程中從buffer 裡獲取資料進行繪製。這個transform的流程，可以拿個專題來細講，自定義一種圖表樣式時繪製的時候，筆者通常也是修改buffer 裡的相應的值，更甚者是自定義自己的一個Buffer來專門處理資料的轉換關係，影響這個transform的因素 1.資料來源 BarBuffer 2.座標系YAxis、XAxis 具體來說 Axis的min/max 值 3、觸控時的縮放比例引數 phaseY. 4、Attribute屬性值(比如)

Entry、DataSet

再回到步數BarChart的繪製，我們知道了如何將業務資料轉化成pixel Point，現在48根柱子具體柱子座標x，每根柱子對應的業務值設為y, 才兩個資料，如何對應成RectF所需的 4個 Point值呢，整個chart/48 就是每個item的相應的座標範圍，但考慮item是緊挨的，真正的柱子Rectf 需要預留的Space，這個space的資訊會定義在 Chart 的Attribute 屬性裡，這裡可以理解成自定義View 的自定義Arrtibute 值。

如何把這些業務的資料比較優雅、合適的方式給到Buffer？首先會將業務資料封裝成Entry, 它對應的是每個item, 基本資料包含 x， y 例如Entry的子類 BarEntry 用x、y 在配合Attribute裡的space (每個Item裡空白跟整個Item寬度的佔比，通常給小於1的float型)，將分散的Entry封裝成整個的DataSet，統一將這個DataSet交給 DataBuffer, 結合Attribute中的space屬性, 給到 Transformer, 最終transform 出 BarChart 所需要的RectF。

Attribute

對於一些裝飾性的屬性，比如一些設計需求的顏色、大小、尺寸、以及上面提到的space等控制每個元件具體繪製成啥樣的，可以通過Attribute給到Render，至於每個item 具體的需求變化，比如不同的值範圍，柱子的顏色要求不一樣，可以通過擴充套件Entry的屬性，進行具體的繪製邏輯, Entry 除了可以跟座標轉化相關的x、y 的資訊之外，可以包含其它繪製的附屬資訊。

3. 整體Chart繪製流程

通過上面的範例，參見圖進行梳理一下：首先第一步獲取業務資料(對應座標軸資料)，建立Entry儲存每個Item值，將這些值儲存統一的DataSet，然後交於Buffer儲存，TransFormer 拿到 buffer，最終轉化為Render繪製所需的 Pixel Point, 通常會是Point構成的具象的RectF, Line, Path等。

圖1.7（Chart繪製流程圖）

到此，整個Chart 的繪製主體流程基本介紹完了，按照上面的各個元件負責的功能，完全可以自己搭建一套簡易的圖表繪製的庫來。

除了上面介紹的chart 主體的繪製，通常還會有例如： XAxis、YAxis，以及外邊框等輔助內容的繪製，如何分配給他們繪製的空間呢？很簡單可以將Chart設定 padding，在padding 裡繪製 XAxis、YAxis等，這些contentPadding 設定ViewPortHandler，ViewPortHandler同時包含一些邊界的判斷，後續會花時間介紹自定義XAxis、YAxis的Render過程。

個別特殊需求比如極值處，需要繪製MaxPoup, MinPoup等，以及 AverageLine 等圖表的輔助性的需求。

除此之外還有互動裡的一個繪製，比如按下，HighLight 需要繪製響應的poupwindow, 包含一些Item值的提示資訊。

對於部分特殊的圖表比如配速圖表，它的Y軸的值是reversed, 需要進行特殊的處理Y值的轉化關係，除了圖表繪製，更多的是數學計算的問題，可以後續單獨來講。

後續的內容安排：