Android MPAndroidChart繪制原理

Posted on by

前言

官方demo地址：github.com/PhilJay/MPA…

筆者接下來的文章裡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值的轉化關系，除瞭圖表繪制，更多的是數學計算的問題，可以後續單獨來講。

後續的內容安排：

  • 自定義 XAxis、YAxis
  • MaxPoup, MinPoup，AverageLine 等相關的繪制
  • 自定義revert 圖表 例如配速表的繪制
  • CubicPath、LineChart 等底部的drawFill 等內容，遊泳的例如Swolf 的梯度圖表的繪制。
  • 步頻散點圖的繪制
  • 睡眠泳道圖、SleepBuffer的自定義，轉換等邏輯
  • SegmentBarChart圖的繪制，一個Item裡面多個RectF, Barbuffer與之對應，Transform轉化
  • MPChart 整體的例如RTL（部分阿拉伯國傢需要）

到此這篇關於Android MPAndroidChart繪制原理的文章就介紹到這瞭,更多相關Android MPAndroidChart內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：