快捷導(dǎo)航

MPAndroidChart自定義圖表Chart的Attribute及Render繪制邏輯

更新時(shí)間：2022年12月09日 10:14:47 作者：cxy107750

這篇文章主要為大家介紹了MPAndroidChart自定義圖表Chart的Attribute及Render繪制邏輯，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

MPAndroidChart自定義圖表

聲明：本文MPChart 代表的就是 MPAndroidChart。

1. 自定義Chart的Attribute

我們回憶一下自定義View的過(guò)程里，通常我們會(huì)將一些屬性控制Attribute通過(guò)自定義View的構(gòu)造方法傳入，然后繪制或者layout的情況下使用這些屬性。Attribute類中的屬性，通過(guò)讀取attr.xml 中自定義的 View的 declare-styleable，在xml layoutInflate 時(shí)加載賦值給Attribute類。而MPChart的圖表同樣也是View，通過(guò)傳入Attribute屬性進(jìn)行自定義相關(guān)的繪制，工欲善其事必先利其器。

例如，我們自定義一個(gè)CustomChart 繼承自BarChart，傳入CustomBarChartAttr 包含自定義的一些屬性控制變量的集合類, 類似圖1.0將一些公共的屬性放入BaseChartAttrs里。

圖1.0 自定義屬性Attribute

通過(guò)屬性控制，可以將我們自定義的一些差異性的數(shù)據(jù)，需要用戶設(shè)定的比如顏色，大小、圓角的半徑等暴露出來(lái)；對(duì)于共性的屬性比如坐標(biāo)相關(guān)的，四個(gè)坐標(biāo)，只顯示Bottom的XAxis，跟右邊的YAxis, 就可以直接在自定義的BarChart中寫死，工程需求不雷同于MPChart這種庫(kù)的提供者，他們需要考慮的是各色用戶的各種需求，所以需要考慮到API的全面性，而我們需要做的是盡量抽取共性到一個(gè)公共的類里，然后需求里的可變因素，減少出錯(cuò)的幾率，將差異性的東西通過(guò)這里比如Attribute去設(shè)定，或者后續(xù)還會(huì)提到在Entry里包含屬性，Entry能夠具體到Chart里某一個(gè)item的屬性，而Attribute 一般只能控制到Chart, 或者這些Item的共有屬性上。

2. Render 自定義繪制邏輯

上篇文章里我們介紹了Chart的繪制，分別由負(fù)責(zé)各個(gè)小部件的Render去繪制，當(dāng)自定義的需求只是需改局部比如圖表的主體的時(shí)候，而XAxis、YAxis、邊框等的繪制不用改變，則只要替換負(fù)責(zé)主體繪制的Render對(duì)象，例如MPChart原本庫(kù)里的Chart里有一個(gè)負(fù)責(zé)繪制圖表的主體的DataRenderer mRenderer; 這里只需替換該Render對(duì)象，將自定義的繪制邏輯加在自定義的Render里。

@Override
protected void init() {
  super.init();
  mRenderer = new CustomBarChartRenderer(this, mAnimator, mViewPortHandler);
}

這里自定義的是BarChart類型，因此CustomBarChartRenderer 繼承自BarChartRenderer, 這樣可以免去很多BarChart中原本的繪制，而只需關(guān)注需求所要的改動(dòng)。

當(dāng)拿到Renderer之后，我們可以隨心所欲地去繪制各種需求，比如如下繪制帶小紅花的7天的柱狀圖：

圖1.1 flowerBarChart

從上篇文章里我們了解到BarChart的繪制會(huì)在drawDataSet()方法里，涉及到繪制矩形位置的信息存儲(chǔ)在BarBuffer里，然后通過(guò)Transformer轉(zhuǎn)為RectF的坐標(biāo)點(diǎn)，這里有7個(gè)矩形，所以Buffer里存儲(chǔ)有 4 * 7 = 28個(gè)值的數(shù)組，每次取四個(gè)值組成RectF, 然后就在RectF里繪制背景，繪制Bitmap、繪制各色各樣的需求都Okay。

圖1.2 FlowerBarChart 的繪制。

3. DataBuffer

接下來(lái)我們看一個(gè)實(shí)際的生產(chǎn)環(huán)境里的一種圖表的繪制，涉及到需要處理 Buffer 數(shù)據(jù)的存儲(chǔ)轉(zhuǎn)化。我們先看IPhone的蘋果健康的一個(gè)數(shù)據(jù)圖表：

圖1.3 蘋果健康心率圖表

MPChart內(nèi)目測(cè)是沒(méi)有這種類型圖表的，那么拿到這個(gè)我們?cè)撊绾巫瞿?？首先分析圖形中每個(gè)Item可能會(huì)有若干個(gè)小圓角矩形組成，如示例圖中綠色框里有三個(gè)小矩形組成，原來(lái)的BarBuffer數(shù)組4個(gè)值對(duì)應(yīng)一個(gè)RectF在這里不在適用了，筆者這里提供的一種解決方案如下：每個(gè)Entry還是對(duì)應(yīng)一個(gè)Item，這里自定義了一種SegmentEntry繼承自BarEntry，SegmentEntry 里包含了若干矩形繪制對(duì)應(yīng)的數(shù)據(jù)model, SegmentRectModel, 因?yàn)橥瑢儆谝粋€(gè)Item，這些同屬于Item的小矩形都有相同的XAxis坐標(biāo)屬性，所以SegmentRectModel 里只需保存YAxis對(duì)應(yīng)所需的信息。

public class SegmentRectModel {
    public float topValue;
    public float bottomValue;
    public int rectColor = -1;
    public int boardColor = -1;
    public int boardWidth = 0;//dp
}
open class SegmentBarEntry : RecyclerBarEntry {
    @JvmField
    var rectValueModelList: MutableList<SegmentRectModel>? = null
    private var segmentRange  = 0 // 每種業(yè)務(wù)數(shù)據(jù)的segmentRange不一樣，心率、血氧、血壓等。
    var maxValue = 0
    var minValue = 0
}

SegmentBarEntry內(nèi)部存有 List 小矩形對(duì)應(yīng)的業(yè)務(wù)數(shù)據(jù)。

這里簡(jiǎn)單介紹一下如何生成這一些列的小區(qū)間SegmentRectModel[bottom, top] , 以心率值為例。比如這一天下來(lái)穿戴設(shè)備產(chǎn)生了一下的心率值：

【45， 46， 48， 49, 52， 67， 69， 70, 75, 78， 90, 93, 94, 97, 99, 103, 158, 164, 169, 170】

這里引入一個(gè)參數(shù)用來(lái)將這些散點(diǎn)數(shù)據(jù)歸并成數(shù)區(qū)間，Segment_range。可能不同種類的數(shù)據(jù)，這個(gè)值不同，比如血氧 segment_range_spo 跟心率的 segment_range_hrm 取值不一樣，假如這里的segment_range_hrm取值5，那么上面的心率值計(jì)算后得到的區(qū)間列表為：

【[45, 52], [67,78], [90, 103], [158], [164,170]】這里有個(gè)單點(diǎn)值，可以寫成[158, 158]，由此對(duì)應(yīng)成SegmentRectModel的 bottom， top 值，單點(diǎn)在小矩形中退化成為一個(gè)小圓點(diǎn)。

這些SegmentEntry 最總已集合的形式存入到DataSet中，然后計(jì)算生成Buffer數(shù)據(jù)，這里的Buffer計(jì)算方式改變，所以專程定義一個(gè)類用來(lái)包含這種SegmentEntry的數(shù)據(jù)轉(zhuǎn)化邏輯。

//將DataSet中的SegmentEntry 的List<SegmentRectModel>的size累加給到Buffer
private int computeBufferSize(IBarDataSet dataSet){
        int rectListSizeSum = 0;
        int entryCount = dataSet.getEntryCount();
        for (int i = 0; i < entryCount; i++) {
            BarEntry entry = dataSet.getEntryForIndex(i);
            if (entry instanceof SegmentBarEntry) {
                SegmentBarEntry segmentBarEntry = (SegmentBarEntry) entry;
                List<SegmentRectModel> rectList = segmentBarEntry.rectValueModelList;
                rectListSizeSum += rectList.size();
            }
        }
        return rectListSizeSum;
}
int bufferSize = computeBufferSize(set) * 4;//乘以4 表示矩形。
mBarBuffers[i] = new SegmentBarChartBuffer(bufferSize, barData.getDataSetCount(), set.isStacked());

在自定義的SegmentBarChartBuffer的feed() 內(nèi)計(jì)算并保存SegmentEntry 中的系列小矩形經(jīng)過(guò)Transformer轉(zhuǎn)化前的數(shù)據(jù)。

圖1.4 SegmentBarChartBuffer

轉(zhuǎn)化成Buffer 內(nèi)的數(shù)據(jù)后，至此交給Transformer，最后會(huì)生成一系列的小矩形，同一Item Entry下面的RectF擁有相同的X軸坐標(biāo)值，繪制的Render也不再考慮這些差異性，從Buffer數(shù)組的0號(hào)index開始取，每次取4個(gè)繪制RectF，需要注意的是當(dāng)bottom - top 值小于 width時(shí)，可能退化成一條線。需要將它處理成一個(gè)圓點(diǎn)。