hellocharts-android-Android圖表開源庫的使用(二)

以前的一篇文章介紹了hellocharts這個開源庫的基本的使用方法（傳送門：https://juejin.im/post/5a3d38f451882533f01ec4d8 ） ，今天，基於hellocharts咱們來實現一個相似心電圖的動態曲線的效果，先上效果圖：

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