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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏生信宝典

CIRCOS增加热图、点图、线图和区块属性

CIRCOS图在有了染色体信息界定绘图区域后,就可以向里面添加离散数据如标记特定的区域或连续数据如展示修饰的丰度等。 经过前面部分对CIRCOS基本安装,最简单...

3797
来自专栏DeveWork

代码实现WordPress自动关键词keywords与描述description

之前在文章《WordPress自定义栏目运用实例II:添加文章Meta标签(keywords /description)》中给出了手动添加关键词keywords...

2809
来自专栏owent

Vim常用命令

之前有搜集过一些常用的命令脚本,其中有vim的部分。但是vim内置的很多功能那些个命令显然是不够的,而且那些记录的很多也不常用,于是想到专门开一个页面记录vim...

862
来自专栏编程

前端CHROME CONSOLE的使用:测量执行时间和对执行进行计数

利用 Console API 测量执行时间和对语句执行进行计数。 这篇文章主要讲: 使用 console.time() 和 console.timeEnd() ...

1698
来自专栏HT

基于HTML5 Canvas 实现矢量工控风机叶轮旋转

之前在拓扑上的应用都是些静态的图元,今天我们将在拓扑上设计一个会动的图元——叶轮旋转。 先看看最后我们实现的效果:http://www.hightopo.com...

2518
来自专栏青玉伏案

iOS可视化动态绘制连通图(Swift版)

上篇博客《iOS可视化动态绘制八种排序过程》可视化了一下一些排序的过程,本篇博客就来聊聊图的东西。在之前的博客中详细的讲过图的相关内容,比如《图的物理存储结构与...

2947
来自专栏Python小屋

使用Jupyter Notebook+bokeh绘图入门完整步骤

Bokeh是一款基于浏览器的交互式绘图工具,在IPython Notebook中具有非常好的表现。 安装anaconda3,单击开始菜单,单击下图红色箭头所指菜...

2726
来自专栏雨过天晴

控制台输出颜色控制(Console

前端时间,写了一篇 PHP 在 Console 模式下的进度显示 ,正好最近的一个数据合并项目需要用到控制台颜色输出,所以就把相关的信息整理下,写到OSC的博客...

1.2K1
来自专栏jojo的技术小屋

原 适配iPhoneX

作者:汪娇娇 时间:2017年12月26日 我这里说的适配iPhoneX,是一种比较简单粗暴的适配法,就是填满整个屏幕(包括安全区域和上下左右这些边,见下图)。...

3316
来自专栏Android知识点总结

$utils使用全指南----持续更新

1614

扫码关注云+社区

领取腾讯云代金券