之前的一篇文章介绍了 hellocharts 这个开源库的基本的使用方法(传送门:http://www.jianshu.com/p/dba47464fcfc ) ,今天,基于 hellocharts 我们来实现一个类似心电图的动态曲线的效果,先上效果图:
效果图. gif
Viewport
首先,开始代码前我们先来认识一下 hellocharts 重要的一个概念 - Viewport,翻译我们可以知道,Viewport 是视图,窗口的意思,在 hellocharts 中,一个 Viewport 由 left,top,right,bottom 四个点组成,可以看成是一个矩形范围。
模拟需求
假设,我们现在手机连接着一个硬件设备,每隔 300ms,硬件就会传过来一条数据,要求客户以曲线的形式动态显示(如上面的效果图)。那么这个需求用 hellocharts 怎么实现呢?我们刚刚已经了解了 Viewport,那么我们可不可以这样做呢:根据已有数据动态更新 Viewport,形成曲线动态向左移动的效果。
代码实现
基本的代码基于上一遍文章的介绍,这里主要增加了一个定时器来不断增加数据,更新当前 Viewport 的显示。
- timer.schedule(new TimerTask() {
- @Override
- public void run() {
- //实时添加新的点
- PointValue value1 = new PointValue(position * 5, random.nextInt(100) + 40);
- value1.setLabel("00:00");
- pointValueList.add(value1);
- float x = value1.getX();
- //根据新的点的集合画出新的线
- Line line = new Line(pointValueList);
- line.setColor(Color.RED);
- line.setShape(ValueShape.CIRCLE);
- line.setCubic(true);//曲线是否平滑,即是曲线还是折线linesList.clear();
- linesList.add(line);
- lineChartData = initDatas(linesList);
- lineChartView.setLineChartData(lineChartData);
- //根据点的横坐实时变幻坐标的视图范围
- Viewport port;
- if (x > 50) {
- port = initViewPort(x - 50, x);
- } else {
- port = initViewPort(0, 50);
- }
- lineChartView.setCurrentViewport(port);//当前窗口
- Viewport maPort = initMaxViewPort(x);
- lineChartView.setMaximumViewport(maPort);//最大窗口
- position++;
- }
- }, 300, 300);
- /**
- * 当前显示区域
- * @param left
- * @param right
- * @return
- *
- /
- private Viewport initViewPort(float left, float right) {
- Viewport port = new Viewport();
- port.top = 150;
- port.bottom = 0;
- port.left = left;
- port.right = right;
- return port;
- }
- /**
- * 最大显示区域
- * @param right
- * @return
- *
- /
- private Viewport initMaxViewPort(float right) {
- Viewport port = new Viewport();
- port.top = 150;
- port.bottom = 0;
- port.left = 0;
- port.right = right + 50;
- return port;
- }*/
完整代码地址:https://github.com/SolveBugs/HelloChartDemo
来源: http://blog.csdn.net/weixin_38251977/article/details/69944093