之前的一篇文章介紹了hellocharts這個(gè)開(kāi)源庫(kù)的基本的使用方法（傳送門(mén)：http://www.itdecent.cn/p/dba47464fcfc ） ，今天，基于hellocharts我們來(lái)實(shí)現(xiàn)一個(gè)類(lèi)似心電圖的動(dòng)態(tài)曲線的效果，先上效果圖：
效果圖.gif
Viewport
首先，開(kāi)始代碼前我們先來(lái)認(rèn)識(shí)一下hellocharts重要的一個(gè)概念-Viewport，翻譯我們可以知道，Viewport是視圖，窗口的意思，在hellocharts中，一個(gè)Viewport由left，top，right，bottom四個(gè)點(diǎn)組成，可以看成是一個(gè)矩形范圍。
模擬需求
假設(shè)，我們現(xiàn)在手機(jī)連接著一個(gè)硬件設(shè)備，每隔300ms，硬件就會(huì)傳過(guò)來(lái)一條數(shù)據(jù)，要求客戶(hù)以曲線的形式動(dòng)態(tài)顯示（如上面的效果圖）。那么這個(gè)需求用hellocharts怎么實(shí)現(xiàn)呢？我們剛剛已經(jīng)了解了Viewport，那么我們可不可以這樣做呢：根據(jù)已有數(shù)據(jù)動(dòng)態(tài)更新Viewport，形成曲線動(dòng)態(tài)向左移動(dòng)的效果。
代碼實(shí)現(xiàn)
基本的代碼基于上一遍文章的介紹，這里主要增加了一個(gè)定時(shí)器來(lái)不斷增加數(shù)據(jù)，更新當(dāng)前Viewport的顯示。
定時(shí)器代碼
timer.schedule(new TimerTask() {
@Override
public void run() {
//實(shí)時(shí)添加新的點(diǎn)
PointValue value1 = new PointValue(position * 5, random.nextInt(100) + 40);
value1.setLabel("00:00");
pointValueList.add(value1);
float x = value1.getX();
//根據(jù)新的點(diǎn)的集合畫(huà)出新的線
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);
//根據(jù)點(diǎn)的橫坐實(shí)時(shí)變幻坐標(biāo)的視圖范圍
Viewport port;
if (x > 50) {
port = initViewPort(x - 50, x);
} else {
port = initViewPort(0, 50);
}
lineChartView.setCurrentViewport(port);//當(dāng)前窗口
Viewport maPort = initMaxViewPort(x);
lineChartView.setMaximumViewport(maPort);//最大窗口
position++;
}
}, 300, 300);
設(shè)置Viewport代碼
/**
* 當(dāng)前顯示區(qū)域
* @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;
}
/**
* 最大顯示區(qū)域
* @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;
}
