使用MPAndroidChart繪製類似心電圖效果

效果預覽

如圖所示，最新數據將從右往左展示出來，並且X軸沒有明確的大小限制，適用於一些數據的實時查看獲取，例如CPU頻率，溫度等

實現思路

由於MPAndroidChart是不能直接將數據由右往左繪製，所以得往數據賦值上思考,觀察它每次運行可以得出：
首先假設從頭到尾跑完一共需要展示60個數據，那麼當第一個數據出來的時候，它的Entry裏面的x值必定是60，當第二條數據出來，第一條數據的x值就需要變成59，第二條數據的x值就會變成60，每次刷新一條數據前面的數據的x值就需要減一，這樣就達到了從右往左前移的效果，這樣一來，大概思路就出來了，但這裏需要分兩種情況

• 還沒跑完全屏

  
  

• 已經跑完了全屏，後面的數據繼續刷新,但永遠只顯示60個
  

  
  第一種情況我們不需要處理，第二種情況我們得把“跑過了的”數據給移除，所以得判斷x軸是否小於0，小於0的就給remove掉

實現

首先先初始化樣式:

 private static int maxCount = 60; //集合最大存儲數量
public static void initChart(List<Entry> mData, LineChart lineChart, long maxYValue) {
        int lineColor = Color.parseColor("#ebebeb");
        int textColor = Color.parseColor("#999999");

        lineChart.setDragEnabled(false);
        lineChart.setScaleEnabled(false);
        lineChart.getDescription().setEnabled(false);
        lineChart.getLegend().setEnabled(false);
        lineChart.getAxisRight().setEnabled(false);
        lineChart.getXAxis().setEnabled(false);

        YAxis axisLeft = lineChart.getAxisLeft();
        axisLeft.setAxisMinimum(0);
        axisLeft.setLabelCount(10);
        axisLeft.setAxisMaximum(maxYValue);
        axisLeft.setGridColor(lineColor);
        axisLeft.setTextColor(textColor);
        axisLeft.setAxisLineColor(lineColor);

        XAxis xAxis = lineChart.getXAxis();
        xAxis.setDrawGridLines(false);
        xAxis.setDrawLabels(false);
        xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
        xAxis.setAxisMinimum(0f);
        xAxis.setAxisMaximum(maxCount);
        xAxis.setLabelCount(maxCount);
        Collections.sort(mData, new EntryXComparator());
        LineData lineData = new LineData(getSet(mData));
        lineData.setDrawValues(false);
        lineChart.setData(lineData);
        lineChart.invalidate();
    }

    private static LineDataSet getSet(List<Entry> mData) {
        int valueColor = Color.parseColor("#2979FF");
        LineDataSet set = new LineDataSet(mData, "");
        set.setDrawFilled(true);
        set.setFillColor(valueColor);
        set.setColor(valueColor);
        set.setValueTextColor(valueColor);
        set.setDrawCircles(false);
        set.setMode(LineDataSet.Mode.CUBIC_BEZIER);
        return set;
    }

把X軸的最大值設置爲了60(這個可以根據需求更改),隨後在LineDataSet裏將setDrawFilled設置爲了true，這樣就會有實心的效果
賦值代碼:

public static void addEntry(List<Entry> mData, LineChart lineChart, float yValues) {
        if (lineChart != null
                && lineChart.getData() != null &&
                lineChart.getData().getDataSetCount() > 0) {
            int size = mData.size();
            if (size == 0) {
                Entry entry = new Entry(maxCount, yValues);
                mData.add(entry);
            } else {
                boolean needRemove = false;
                for (Entry e : mData) {
                    float x = e.getX() - 1;
                    if (x < 0) {
                        needRemove = true;
                    }
                    e.setX(x);
                }
                if (needRemove) {
                    mData.remove(0);
                }
                Entry entry = new Entry(maxCount, yValues);
                mData.add(entry);
            }
            LineData lineData = new LineData(getSet(mData));
            lineData.setDrawValues(false);
            lineChart.setData(lineData);
            lineChart.invalidate();
        }
    }

賦值邏輯就在這個方法裏了，只需要傳入我們需要的y軸數據，就能幫你自動刷新裏面的數據了。
最後附上demo:
demo