上一篇文章[MD]模仿百度手机助手动态折线图/MPAndroidCharts实现(一) 我们介绍了使用MPAndroidCharts实现折线图的动画,其实就是使用开源库提供的AnimateX方法进行构现,针对百度手机的动态折线图,其实是有个知识点是我们忽略的,在看回百度的效果
我们发现,其实X轴只显示最后的3个点,这个可以怎么实现呢,嘿嘿,这个就是我们今天要说的,先看看我们实现的效果:
下面我们来说说是怎么实现的
初始化LineChart、X轴/Y轴以及图例,这个和上一篇文章是一样的,就不赘叙了
然后, 定义一个空的LineData(LinChart.setData(LineData)) ,关联LineData和LineChart
LineData data = new LineData(); data.setValueTextColor(Color.WHITE); // add empty data mChart.setData(data);</span>
根据LineData获取LineDataSet,如果LineDataSet为空则定义并将LineDataSet加入到LineData中
if (data != null) { LineDataSet set = data.getDataSetByIndex(0); if (set == null) { set = createDateSet(); data.addDataSet(set); }
将X/Y值加入到LineData中并通过notifyDataSetChanged通知图标变化更新UI
// add a new x-value first data.addXValue(data.getXValCount()+""); data.addEntry(new Entry((float) (Math.random() * 40) + 30f, set.getEntryCount()), 0); // let the chart know it's data has changed mChart.notifyDataSetChanged(); // limit the number of visible entries mChart.setVisibleXRangeMaximum(4); // move to the latest entry mChart.moveViewToX(data.getXValCount() - 5);
setVisibleXRandeMaximum设置可以显示的采样点个数,而moveViewToX至将视图移动至最后4个点,这个也是本功能最重要的一步
private void showPartVisibleLineChart() { LineData data = new LineData(); data.setValueTextColor(Color.WHITE); // add empty data mChart.setData(data); new Thread(new Runnable() { @Override public void run() { for(int i = 0; i < 25; i++) { runOnUiThread(new Runnable() { @Override public void run() { addDateEntry(); } }); try { Thread.sleep(150); } catch (InterruptedException e) { // TODO Auto-generated catch block e.printStackTrace(); } } } }).start(); }
具体API请参考[MD]模仿百度手机助手动态折线图/MPAndroidCharts实现(一)
代码下载,请点击这里