MPAndroidChart繪制自定義運動數據圖表示例詳解
引言
聲明:文中的MPChart代指MPAndroidChart.
本系列之前的文章介紹的MPChart中BarChart相關的一些繪制,接下來我們看看LineChart相關的繪制。
這里以實際的運動相關的圖表數據做業(yè)務支撐來講解。MPChart圖表支持多指觸控方法,這里所有的圖表自定義都關掉了這個屬性,這樣就減少Transformer,以及繪制過程中的更多的變動,相當于一個靜態(tài)的圖。
通常圖表在放大的過程中,坐標軸也會隨之展現更小的刻度,復雜度就變高了,具體的顯示的刻度就可能出現小數之類的等情況。
這里我們關掉觸摸放大后,相當于一個靜態(tài)的圖。這時候,產品以及設計可能需要我們的X軸坐標、Y軸坐標等刻度盡可能地為整數,這樣看起來比較美觀。
靜態(tài)的情況下,因為沒法移動,即便可以移動,首次展現也希望圖表的數據能夠比較居中,這就涉及到YAxis的自定義如何影響控制 Chart的相關展示邏輯的內容,本章節(jié)首先從這入手,講解運動數據圖表的繪制。
TimeAxis
這里自定義X軸TimeAxis,實際意義是一次運動耗費的時間,繼承自XAxis。假如一次運動1個小時06分鐘,設計希望展示4個刻度(0, 20 , 40, 60 分鐘), 這時需要我們自己去控制,假如不加控制的話,Default情況下沒法準確的實現設計的需求。
XAxis、YAxis有兩個屬性,Maximum, Minmum. 這樣設定每個interval 就可以計算出要顯示的刻度列表, labelList, 加入到XAxis中的 mEntries, 最后在XAxisRender會拿到mEntries 最終繪制 X坐標。
這里不在設計一個算法類計算每個時間段的刻度顯示了,運動的時間范圍有限,直接枚舉, 在 TimeXAxis里的getlabelCount() 實現。
if (max > 6000 * TimeDateUtil.TIME_MIN_INT){
interval = 2000 * TimeDateUtil.TIME_MIN_INT;
} else if (max > 4800 * TimeDateUtil.TIME_MIN_INT) {// 80個小時
interval = 1920 * TimeDateUtil.TIME_MIN_INT;
} else if (max > 2400 * TimeDateUtil.TIME_MIN_INT) {// 40個小時
interval = 960 * TimeDateUtil.TIME_MIN_INT;
} else if (max > 1200 * TimeDateUtil.TIME_MIN_INT) {
interval = 480 * TimeDateUtil.TIME_MIN_INT;
}
。。。。。
else if (max > 20 * TimeDateUtil.TIME_MIN_INT) {
interval = 5 * TimeDateUtil.TIME_MIN_INT;
} else if (max > 15 * TimeDateUtil.TIME_MIN_INT) {
interval = 4 * TimeDateUtil.TIME_MIN_INT;//4分鐘刻度
} else if (max > 5 * TimeDateUtil.TIME_MIN_INT) {//
interval = 2 * TimeDateUtil.TIME_MIN_INT;//2分鐘刻度。
} else {
interval = TimeDateUtil.TIME_MIN_INT;
}
float currentEntry = min;
List<Float> entryList = new ArrayList<>();
do {
entryList.add(currentEntry);
currentEntry += interval;
} while (currentEntry <= max);
labelCount = entryList.size();
mEntryCount = labelCount;
if (mEntries.length < labelCount) {
mEntries = new float[labelCount];
}
for (int i = 0; i < labelCount; i++) {
mEntries[i] = entryList.get(i);
}
準備好XAxis 中的Entry數據后,依舊是交給Buffer,經過Transformer轉化,最終繪制出來, 自定義TimeAxisRender, 然后 renderAxisLabels() 方法里drawLabel(), 繪制XAxis的坐標軸線:

圖1.0 XAxis 坐標線的繪制
SportYAxis
Y軸的繪制相比XAxis要復雜一些,自定義的SportYAxis繼承自YAxis, TimeXAxis 只有時間數據對應。SportYAxis根據具體的數據業(yè)務可以表示 心率, 高度海拔, 速度, 配速,頻率等數據。
這些數據中, 心率、步頻等取值范圍可以比如(0, 250)類似這樣的可以直接定下來Y軸的Max, Min 值以及對應的刻度,高度海拔有負數的,速度的Max根據 所給數據來定, 配速比較特殊,需要將Y軸 revert。
為了將圖表能夠居中,通常YAxis 上的Maximum 會比 數據中的極大值要偏大,保證圖表不會呈現的太慢,影響美觀。根據不同的Sport數據,將Y軸分為以下幾種:
// TYPE_FIX_MIN_ZERO = 0; Y軸從固定的0開始 到 max;步頻、起跳高度 // TYPE_FIX_MIN_POSITIVE = 1; 從 entryList的 真實的 min(min不能小于0)開始,到max; 心率、速度、劃頻、Swolf // TYPE_FIX_COMMON = 2; 從entryList的最小值min開始到max的最大值,無論最大、最小是否為Positive, 例如海拔; //TYPE_FIX_RESTRICT_MAX = 3; 限制最大值,比如配速。Y軸 Invert,所以最小值min為大于等于 0 的Positive value; 配速 public static final int TYPE_FIX_MIN_ZERO = 0; public static final int TYPE_FIX_MIN_POSITIVE = 1; public static final int TYPE_FIX_COMMON = 2; public static final int TYPE_FIX_RESTRICT_MAX = 3;
每種類型下計算Y軸的Maximum、Minmum; 然后計算刻度的間距 itemValue, 得到 坐標Label 的List。
以上的幾種坐標的實現具體在 SportYAxis 中實現。
將Y軸數據限定下來之后,圖表的展現因為Y軸的Maximum、Minmum 限定在比較居中的位置。
對于配速,當運動停下來時,單位距離的耗時可能無限大,假如我們考慮把這個極值畫下來的話,Y軸可能跨度很大導致圖表沒法看,所以需要限定極大值,截斷圖形:
//限制最大值
private float getYAxisMax2(List<SportRecordEntry> values, float yAxisMin) {
int size = values.size();
float yAxisMax = Integer.MIN_VALUE;
float yAxisMinTemp = Integer.MAX_VALUE;
float sum = 0;
for (int i = 0; i < size; i++) {
SportRecordEntry entry = values.get(i);
yAxisMax = Math.max(entry.getY(), yAxisMax);
yAxisMinTemp = Math.min(entry.getY(), yAxisMinTemp);
sum += entry.getY();
}
float averageY = sum / (size * 1.0f);
float distanceMin = averageY - yAxisMinTemp;
float distanceMax = yAxisMax - averageY;
int num = (int) (distanceMax / distanceMin);
if (num > 5) {// 配速中 有 配速值很慢的點,坐標時不考慮它們了。
yAxisMax = averageY + 2 * distanceMin; // 限制Y 軸坐標。
}
float distance = yAxisMax - yAxisMin;
if (yAxisMax > 0 && distance <= 2) {
return yAxisMax + 2;
}
return yAxisMax + distance * mLineChartAttr.maxYAxisRatio;
}
CustomLineChart
處理完XAxis、YAxis的數據及繪制后,處理LineChart的主體,這里包含了折線圖、曲線圖等體現數據展現的,還有drawFill, 底部的填充;drawMaxMinPop() 極值點的繪制等。
著重講解折線圖的繪制,對于LineChart,Entry比較簡單,存有對應的X, Y值,

圖1.1CustomLineChart 繪制邏輯
考慮先后兩個點,PreEntry, CurrentEntry 然后 繪制每段折線,最終連成圖表。
針對 配速圖表Y軸需要倒過來的,
private float getYAsInverted(Entry entry) {
final float phaseY = mAnimator.getPhaseY();
float yValueRange = mYAxis.getAxisMaximum() - mYAxis.getAxisMinimum();
if (mYAxis.isInverted()) {
if (entry.getY() <= mYAxis.getAxisMinimum()) {
return entry.getY() * phas
eY;
} else {
return (yValueRange - entry.getY()) * phaseY;
}
} else {
return entry.getY() * phaseY;
}
}
以下就是配速圖表,極大值的限定線取的太大,導致整個圖形太偏上了,可以做響應的修改。

圖1.2配速圖表線形圖
繪制底部的Fill, 將所有的點連線,再連接到底部的X點坐標,最后形成閉環(huán)的Path,

圖1.3 drawFill
以上大致就是線性圖表的繪制邏輯,考慮X軸、Y軸的Label的設定,繪制,Y軸的極值設定來控制圖表圖形呈現的位置;配速表的這種Y軸圖形的invert, 底部的drawFill().
自此大體的自定義繪制講解完了。后續(xù)會做些補充,步頻散點圖,極值的繪制,RTL相關等。
以上就是MPAndroidChart 自定義運動數據圖表示例詳解的詳細內容,更多關于MPAndroidChart 運動數據圖表的資料請關注腳本之家其它相關文章!
相關文章
Android使用AudioRecord實現暫停錄音功能實例代碼
本篇文章主要介紹了Android使用AudioRecord實現暫停錄音功能實例代碼,具有一定的參考價值,有興趣的可以了解一下2017-06-06
android studio3.3.1代碼提示忽略大小寫的設置
這篇文章主要介紹了android studio3.3.1代碼提示忽略大小寫的設置,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-03-03
使用android-apktool來逆向(反編譯)APK包方法介紹
這篇文章主要介紹了使用android-apktool來逆向(反編譯)APK包方法介紹,本文講解了版本問題、使用apktool、反編譯decode、rebuild重打包等內容,需要的朋友可以參考下2015-04-04
Android編輯框EditText與焦點變更監(jiān)視器及文本變化監(jiān)視器實現流程詳解
這篇文章主要介紹了Android編輯框EditText與焦點變更監(jiān)視器及文本變化監(jiān)視器實現流程,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習吧2022-09-09
Android即時通訊設計(騰訊IM接入和WebSocket接入)
本文主要介紹了Android即時通訊設計(騰訊IM接入和WebSocket接入),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2022-04-04

