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 条评论
登录 后参与评论

相关文章

来自专栏陈帅的专栏

网络延迟与带宽性能专项测试

代理、VPN作为两种古老的数通网络安全解决方案,在当今移动互联网时代,伴随着游戏网络加速、WiFi安全性等用户硬性需求,再次焕发青春。

8080
来自专栏Golang语言社区

转-Golang分布式设计模式之-----分层设计

提到分布式系统,我们会想到很多机器,分别部署着各自的服务,然后整体组成一个分布式系统。在这类系统中,分布式系统与常规的集中式系统存在着以下三个区别。(来自分布...

40113
来自专栏AILearning

TensorFlow架构

我们设计了TensorFlow进行大规模的分布式训练和推理,但它也足够灵活,以支持新机器学习模型和系统级优化的实验。 本文档描述了使得这种组合规模和灵活性成...

3457
来自专栏数据小魔方

R语言学习笔记之——多进程与并行处理包parallel

上一篇中,主要介绍了使用foreach包来在R语言环境中实现任务的并行处理,其实在R语言中还有另外一个多进程包同样可以完成多进程任务,那就是parallel包,...

2858
来自专栏葡萄城控件技术团队

ActiveReports 报表应用教程 (3)---图表报表

葡萄城ActiveReports报表的图表控件支持绝大多数常用的二维和三维图表类型,包括XY图表和财务图表。通过使用图表控件的定制功能,如修改坐标轴、图注、图例...

1747
来自专栏JackieZheng

自己动手写可视化软件(代码已开源)

  一年多前,那时候我还在实习,正好上一个项目接近的尾声,紧随而来的就是一个大数据一体化的项目,包括了数据的采集、处理、计算、整合以及数据展示等。   而可视化...

2059
来自专栏草根博客站长有话说

说说 WordPress 文章的摘要

今天明月给大家讲解一下 WordPress 文章的“摘要”,可能很多站长从来就没有重视过文章的“摘要”,甚至很多站长们都说不清这个“摘要”有什么作用以及如何运用...

652
来自专栏AndroidTv

Android中一张图片占据的内存大小是如何计算提问正文推荐阅读

最近封装了个高斯模糊组件,正好将图片相关的理论基础也梳理了下,所以,这次就来讲讲,在 Android 中,怎么计算一张图片在内存中占据的大小,如果要优化,可以从...

642
来自专栏高性能服务器开发

libevent源码深度剖析一 序

(1)libevent源码深度剖析一 序 (2)libevent源码深度剖析二 Reactor模式 (3)libevent源码深度剖析三 libevent基本使...

1583
来自专栏Albert陈凯

Hadoop数据分析平台实战——280新增用户和总用户分析Hadoop离线数据分析平台实战——280新增用户和总用户分析

Hadoop离线数据分析平台实战——280新增用户和总用户分析 项目进度 模块名称 完成情况 用户基本信息分析(MR)� 未完成 浏览器信息分...

3538

扫码关注云+社区