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

_zq發表於2017-12-23
Android

之前的一篇文章介紹了hellocharts這個開源庫的基本的使用方法（傳送門：https://juejin.im/post/5a3d38f451882533f01ec4d8 ） ，今天，基於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

相關文章