快捷導(dǎo)航

MPAndroidChart繪制自定義運動數(shù)據(jù)圖表示例詳解

更新時間：2022年09月01日 15:59:15 作者：yxc

這篇文章主要為大家介紹了MPAndroidChart繪制自定義運動數(shù)據(jù)圖表示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

引言

聲明：文中的MPChart代指MPAndroidChart.

本系列之前的文章介紹的MPChart中BarChart相關(guān)的一些繪制，接下來我們看看LineChart相關(guān)的繪制。

這里以實際的運動相關(guān)的圖表數(shù)據(jù)做業(yè)務(wù)支撐來講解。MPChart圖表支持多指觸控方法，這里所有的圖表自定義都關(guān)掉了這個屬性，這樣就減少Transformer，以及繪制過程中的更多的變動，相當(dāng)于一個靜態(tài)的圖。

通常圖表在放大的過程中，坐標(biāo)軸也會隨之展現(xiàn)更小的刻度，復(fù)雜度就變高了，具體的顯示的刻度就可能出現(xiàn)小數(shù)之類的等情況。

這里我們關(guān)掉觸摸放大后，相當(dāng)于一個靜態(tài)的圖。這時候，產(chǎn)品以及設(shè)計可能需要我們的X軸坐標(biāo)、Y軸坐標(biāo)等刻度盡可能地為整數(shù)，這樣看起來比較美觀。

靜態(tài)的情況下，因為沒法移動，即便可以移動，首次展現(xiàn)也希望圖表的數(shù)據(jù)能夠比較居中，這就涉及到Y(jié)Axis的自定義如何影響控制 Chart的相關(guān)展示邏輯的內(nèi)容，本章節(jié)首先從這入手，講解運動數(shù)據(jù)圖表的繪制。

TimeAxis

這里自定義X軸TimeAxis，實際意義是一次運動耗費的時間，繼承自XAxis。假如一次運動1個小時06分鐘，設(shè)計希望展示4個刻度（0， 20 ， 40， 60 分鐘），這時需要我們自己去控制，假如不加控制的話，Default情況下沒法準(zhǔn)確的實現(xiàn)設(shè)計的需求。

XAxis、YAxis有兩個屬性，Maximum, Minmum. 這樣設(shè)定每個interval 就可以計算出要顯示的刻度列表， labelList, 加入到XAxis中的 mEntries，最后在XAxisRender會拿到mEntries 最終繪制 X坐標(biāo)。

這里不在設(shè)計一個算法類計算每個時間段的刻度顯示了，運動的時間范圍有限，直接枚舉, 在 TimeXAxis里的getlabelCount() 實現(xiàn)。

  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);
  }

準(zhǔn)備好XAxis 中的Entry數(shù)據(jù)后，依舊是交給Buffer，經(jīng)過Transformer轉(zhuǎn)化，最終繪制出來，自定義TimeAxisRender，然后 renderAxisLabels() 方法里drawLabel(), 繪制XAxis的坐標(biāo)軸線：

圖1.0 XAxis 坐標(biāo)線的繪制

SportYAxis

Y軸的繪制相比XAxis要復(fù)雜一些，自定義的SportYAxis繼承自YAxis, TimeXAxis 只有時間數(shù)據(jù)對應(yīng)。SportYAxis根據(jù)具體的數(shù)據(jù)業(yè)務(wù)可以表示心率，高度海拔，速度，配速，頻率等數(shù)據(jù)。

這些數(shù)據(jù)中，心率、步頻等取值范圍可以比如（0， 250）類似這樣的可以直接定下來Y軸的Max, Min 值以及對應(yīng)的刻度，高度海拔有負(fù)數(shù)的，速度的Max根據(jù) 所給數(shù)據(jù)來定，配速比較特殊，需要將Y軸 revert。

為了將圖表能夠居中，通常YAxis 上的Maximum 會比數(shù)據(jù)中的極大值要偏大，保證圖表不會呈現(xiàn)的太慢，影響美觀。根據(jù)不同的Sport數(shù)據(jù)，將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, 得到坐標(biāo)Label 的List。

以上的幾種坐標(biāo)的實現(xiàn)具體在 SportYAxis 中實現(xiàn)。

將Y軸數(shù)據(jù)限定下來之后，圖表的展現(xiàn)因為Y軸的Maximum、Minmum 限定在比較居中的位置。

對于配速，當(dāng)運動停下來時，單位距離的耗時可能無限大，假如我們考慮把這個極值畫下來的話，Y軸可能跨度很大導(dǎo)致圖表沒法看，所以需要限定極大值，截斷圖形：

//限制最大值
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) {// 配速中 有 配速值很慢的點，坐標(biāo)時不考慮它們了。
      yAxisMax = averageY + 2 * distanceMin; // 限制Y 軸坐標(biāo)。
    }
    float distance = yAxisMax - yAxisMin;
    if (yAxisMax > 0 && distance <= 2) {
      return yAxisMax + 2;
    }
    return yAxisMax + distance * mLineChartAttr.maxYAxisRatio;
}

CustomLineChart

處理完XAxis、YAxis的數(shù)據(jù)及繪制后，處理LineChart的主體，這里包含了折線圖、曲線圖等體現(xiàn)數(shù)據(jù)展現(xiàn)的，還有drawFill，底部的填充；drawMaxMinPop() 極值點的繪制等。

著重講解折線圖的繪制，對于LineChart，Entry比較簡單，存有對應(yīng)的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;
    }
}

以下就是配速圖表，極大值的限定線取的太大，導(dǎo)致整個圖形太偏上了，可以做響應(yīng)的修改。