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

效果预览 6e5ny-eczwc.gif
如图所示，最新数据将从右往左展示出来，并且X轴没有明确的大小限制，适用于一些数据的实时查看获取，例如CPU频率，温度等
实现思路 【使用MPAndroidChart绘制类似心电图效果】由于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 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 = https://www.it610.com/article/new LineData(getSet(mData)); lineData.setDrawValues(false); lineChart.setData(lineData); lineChart.invalidate(); }private static LineDataSet getSet(List 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 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 = https://www.it610.com/article/new LineData(getSet(mData)); lineData.setDrawValues(false); lineChart.setData(lineData); lineChart.invalidate(); } }

赋值逻辑就在这个方法里了，只需要传入我们需要的y轴数据，就能帮你自动刷新里面的数据了。
最后附上demo:
demo