使用MPAndroidChart绘制类似心电图效果

效果预览

6e5ny-eczwc.gif

如图所示，最新数据将从右往左展示出来，并且X轴没有明确的大小限制，适用于一些数据的实时查看获取，例如CPU频率，温度等

实现思路

由于MPAndroidChart是不能直接将数据由右往左绘制，所以得往数据赋值上思考,观察它每次运行可以得出：
首先假设从头到尾跑完一共需要展示60个数据，那么当第一个数据出来的时候，它的Entry里面的x值必定是60，当第二条数据出来，第一条数据的x值就需要变成59，第二条数据的x值就会变成60，每次刷新一条数据前面的数据的x值就需要减一，这样就达到了从右往左前移的效果，这样一来，大概思路就出来了，但这里需要分两种情况

还没跑完全屏

not.jpg
已经跑完了全屏，后面的数据继续刷新,但永远只显示60个

have.jpg

第一种情况我们不需要处理，第二种情况我们得把“跑过了的”数据给移除，所以得判断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