hellocharts-android-Android图表开源库

之前的一篇文章介绍了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);

设置Viewport代码

/** 
* 当前显示区域 
* @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