前言

官方demo地址:github.com/PhilJay/MPA…

笔者接下来的文章里MPChart 代表的就是 MPAndroidChart。

下载后AS里运行,可以看到demo里面有 Line Charts, Bar Charts, Pie Charts, Radar Charts, Other Charts.

Demo 本身的内容比较详细,简单的图表绘制直接可以拿来代码使用,不做过多介绍。本文及本系列专题着重剖析MPChart的绘制原理及流程,以及部分自定义的属性、图表等内容。 例如在生产环境中通常会有一些设计或者产品上的需求,原本的MPChart无法满足时,就需要自定义一些局部的属性,更甚者会添加一些型的图表样式,比如修改 X轴,Y轴(图表局部属性), 添加 睡眠泳道图,步频的散点图等,专题后续会涉及。

1. Chart整体结构

Chart下面包含有坐标系的BarLineChartBase,以及没有坐标系的PieRandarBase.

 图 1.0(Chart 整体结构)

笔者通常在工程中使用较多的是Bar、Line两种图表, 除此之外,还有很多其它的图表类型(见示例图1.1)

图 1.1(坐标系Chart)

2.Chart 绘制参与的业务组件

本节从 具有坐标系的LineBarChartBase入手逐步拆解MPChart,查看Chart内部具体的绘制逻辑。

无论一个图表怎么复杂,依旧没有逃离View的整个绘制逻辑, 广义上来说自定义View 分 自定义View,自定义ViewGroup, ViewGroup 涉及到parent 跟child , 各child 之间的摆放关系,需要处理layout相关的问题。而这里的MPChart图表,绝大多数涉及到位置的摆放通过 屏幕像素坐标点去定位,然后依照坐标点去绘制,所以我们着重需要关注的是Chart (View) 的 onDraw()方法,这里是BarLineChartBase的onDraw() 方法,可以看到所有的绘制逻辑都在该方法内。

图 1.3(chart的onDraw方法)

Render

可以从上面的图1.3中可以看到,Chart的绘制分小组件逐个绘制的,每个组件定义自己的Render,在对应的drawXXX 方法里进行绘制,比如有专门绘制X轴的XAxisRender, 绘制Y轴的 YAxisRender, 绘制BarChart的BarChartRender, 以及绘制 Line chart的 LineChartRender, 绘制边框 backGround等等,所以剖开整个Chart的绘制逻辑来看,我们会发现Chart的绘制就是通过各种Render去 drawLine、drawRect 、不规则的drawPath, 或者贝塞尔曲线drawCubicPath(其实也是属于drawPath的范畴);以及部分辅助,坐标轴的label 所需的drawText, 这些各种的小部件的绘制最终完成了 Chart整个的绘制。

可以参考源码 : BarChartRender 里的 drawData() , drawDataSet(DataSet dataSet,...) 方法。

图1.5(Chart 图表 柱子绘制)

那么问题来了,上边介绍的Render的各种绘制,这些小部件背后对应的Pixel Point,比如简单的BarChart 中的某一个 Item Chart,直接对应一个RectF (start, top, end, bottom), RectF包含四个坐标点; 又比如 简单的LineChart,一条折线包含两个端点,PointA(x1, y1), PointB(x2, y2), 多段折线累加就构成了我们所需的线性表, 它们是如何得来的?

在此, 我们以一个具体的实例着手来分析,比如绘制某一天的步数BarChart, 要求每半个小时一根柱子,所以一共48根柱子,每个柱子的高度对应的该时间段的步数sum,这些我们称之为业务数据,如何将这里的业务数据转化成Render 绘制 最终所需的Pixel Point呢?

图1.6(24小时步行图)

Buffer

从图1.5的源码里 可以看到Render里 canvas drawRect的数据来自 BarBuffer的数据结构,首先我们会将业务数据放置到一个Buffer 数组里,然后通过一个工具Transform, 将buffer里的数据转化成 pixel point, 继续保存在Buffer里, 然后绘制流程中从buffer 里获取数据进行绘制。这个transform的流程,可以拿个专题来细讲,自定义一种图表样式时绘制的时候,笔者通常也是修改buffer 里的相应的值,更甚者是自定义自己的一个Buffer来专门处理数据的转换关系,影响这个transform的因素 1.数据源 BarBuffer 2.坐标系YAxis、XAxis 具体来说 Axis的min/max 值 3、触摸时的缩放比例参数 phaseY. 4、Attribute属性值(比如)

Entry、DataSet

再回到步数BarChart的绘制,我们知道了如何将业务数据转化成pixel Point,现在48根柱子具体柱子坐标x,每根柱子对应的业务值设为y, 才两个数据,如何对应成RectF所需的 4个 Point值呢,整个chart/48 就是每个item的相应的坐标范围,但考虑item是紧挨的,真正的柱子Rectf 需要预留的Space,这个space的信息会定义在 Chart 的Attribute 属性里,这里可以理解成自定义View 的自定义Arrtibute 值。

如何把这些业务的数据比较优雅、合适的方式给到Buffer?首先会将业务数据封装成Entry, 它对应的是每个item, 基本数据包含 x, y 例如Entry的子类 BarEntry 用x、y 在配合Attribute里的space (每个Item里空白跟整个Item宽度的占比,通常给小于1的float型), 将分散的Entry封装成整个的DataSet, 统一将这个DataSet交给 DataBuffer, 结合Attribute中的space属性, 给到 Transformer, 最终transform 出 BarChart 所需要的RectF。

Attribute

对于一些装饰性的属性,比如一些设计需求的颜色、大小、尺寸、以及上面提到的space等控制每个组件具体绘制成啥样的,可以通过Attribute给到Render,至于每个item 具体的需求变化,比如不同的值范围,柱子的颜色要求不一样,可以通过扩展Entry的属性,进行具体的绘制逻辑, Entry 除了可以跟坐标转化相关的x、y 的信息之外,可以包含其它绘制的附属信息。

3. 整体Chart绘制流程

通过上面的示例,参见图 进行梳理一下:首先第一步 获取业务数据(对应坐标轴数据), 创建Entry保存每个Item值,将这些值保存统一的DataSet, 然后交于Buffer存储,TransFormer 拿到 buffer,最终转化为Render绘制所需的 Pixel Point, 通常会是Point构成的具象的RectF, Line, Path等。

图1.7(Chart绘制流程图)

到此,整个Chart 的绘制主体流程基本介绍完了,按照上面的各个组件负责的功能,完全可以自己搭建一套简易的图表绘制的库来。

除了上面介绍的chart 主体的绘制,通常还会有 例如: XAxis、YAxis,以及外边框等辅助内容的绘制,如何分配给他们绘制的空间呢?很简单可以将Chart设置 padding,在padding 里绘制 XAxis、YAxis等,这些contentPadding 设置ViewPortHandler,ViewPortHandler同时包含一些边界的判断,后续会花时间介绍自定义XAxis、YAxis的Render过程。

个别特殊需求比如极值处,需要绘制MaxPoup, MinPoup等,以及 AverageLine 等 图表的辅助性的需求。

除此之外还有交互里的一个绘制,比如按下,HighLight 需要绘制响应的poupwindow, 包含一些Item值的提示信息。

对于部分特殊的图表比如配速图表,它的Y轴的值是reversed, 需要进行特殊的处理Y值的转化关系,除了图表绘制,更多的是数学计算的问题,可以后续单独来讲。

后续的内容安排:

  • 自定义 XAxis、YAxis
  • MaxPoup, MinPoup,AverageLine 等相关的绘制
  • 自定义revert 图表 例如配速表的绘制
  • CubicPath、LineChart 等底部的drawFill 等内容,游泳的例如Swolf 的梯度图表的绘制。
  • 步频散点图的绘制
  • 睡眠泳道图、SleepBuffer的自定义,转换等逻辑
  • SegmentBarChart图的绘制,一个Item里面多个RectF, Barbuffer与之对应,Transform转化
  • MPChart 整体的例如RTL(部分阿拉伯国家需要)

到此这篇关于Android MPAndroidChart绘制原理的文章就介绍到这了,更多相关Android MPAndroidChart内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax!

Android MPAndroidChart绘制原理的更多相关文章

  1. html5 canvas合成海报所遇问题及解决方案总结

    这篇文章主要介绍了html5 canvas合成海报所遇问题及解决方案总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  2. Html5 video标签视频的最佳实践

    这篇文章主要介绍了Html5 video标签视频的最佳实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  3. HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题

    HTML5在微信内置浏览器下,在右上角菜单的调整字体导致页面显示错乱的问题,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧

  4. ios – containerURLForSecurityApplicationGroupIdentifier:在iPhone和Watch模拟器上给出不同的结果

    我使用默认的XCode模板创建了一个WatchKit应用程序.我向iOSTarget,WatchkitAppTarget和WatchkitAppExtensionTarget添加了应用程序组权利.(这是应用程序组名称:group.com.lombax.fiveminutes)然后,我尝试使用iOSApp和WatchKitExtension访问共享文件夹URL:延期:iOS应用:但是,测试NSURL

  5. Ionic – Splash Screen适用于iOS,但不适用于Android

    我有一个离子应用程序,其中使用CLI命令离子资源生成的启动画面和图标iOS版本与正在渲染的启动画面完美配合,但在Android版本中,只有在加载应用程序时才会显示白屏.我检查了config.xml文件,所有路径看起来都是正确的,生成的图像出现在相应的文件夹中.(我使用了splash.psd模板来生成它们.我错过了什么?这是config.xml文件供参考,我觉得我在这里做错了–解决方法在config.xml中添加以下键:它对我有用!

  6. ios – 无法启动iPhone模拟器

    /Library/Developer/CoreSimulator/Devices/530A44CB-5978-4926-9E91-E9DBD5BFB105/data/Containers/Bundle/Application/07612A5C-659D-4C04-ACD3-D211D2830E17/ProductName.app/ProductName然后,如果您在Xcode构建设置中选择标准体系结构并再次构建和运行,则会产生以下结果:dyld:lazysymbolbindingFailed:Symbol

  7. Xamarin iOS图像在Grid内部重叠

    heyo,所以在Xamarin我有一个使用并在其中包含一对,所有这些都包含在内.这在Xamarin.Android中看起来完全没问题,但是在Xamarin.iOS中,图像与标签重叠.我不确定它的区别是什么–为什么它在Xamarin.Android中看起来不错但在iOS中它的全部都不稳定?

  8. 在iOS上向后播放HTML5视频

    我试图在iPad上反向播放HTML5视频.HTML5元素包括一个名为playbackRate的属性,它允许以更快或更慢的速率或相反的方式播放视频.根据Apple’sdocumentation,iOS不支持此属性.通过每秒多次设置currentTime属性,可以反复播放,而无需使用playbackRate.这种方法适用于桌面Safari,但似乎在iOS设备上的搜索限制为每秒1次更新–在我的情况下太慢了.有没有办法在iOS设备上向后播放HTML5视频?解决方法iOS6Safari现在支持playbackRat

  9. 使用 Swift 语言编写 Android 应用入门

    Swift标准库可以编译安卓armv7的内核,这使得可以在安卓移动设备上执行Swift语句代码。做梦,虽然Swift编译器可以胜任在安卓设备上编译Swift代码并运行。这需要的不仅仅是用Swift标准库编写一个APP,更多的是你需要一些框架来搭建你的应用用户界面,以上这些Swift标准库不能提供。简单来说,构建在安卓设备上使用的Swiftstdlib需要libiconv和libicu。通过命令行执行以下命令:gitclonegit@github.com:SwiftAndroid/libiconv-libi

  10. Android – 调用GONE然后VISIBLE使视图显示在错误的位置

    我有两个视图,A和B,视图A在视图B上方.当我以编程方式将视图A设置为GONE时,它将消失,并且它正下方的视图将转到视图A的位置.但是,当我再次将相同的视图设置为VISIBLE时,它会在视图B上显示.我不希望这样.我希望视图B回到原来的位置,这是我认为会发生的事情.我怎样才能做到这一点?编辑–代码}这里是XML:解决方法您可以尝试将两个视图放在RelativeLayout中并相对于彼此设置它们的位置.

随机推荐

  1. Flutter 网络请求框架封装详解

    这篇文章主要介绍了Flutter 网络请求框架封装详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  2. Android单选按钮RadioButton的使用详解

    今天小编就为大家分享一篇关于Android单选按钮RadioButton的使用详解,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧

  3. 解决android studio 打包发现generate signed apk 消失不见问题

    这篇文章主要介绍了解决android studio 打包发现generate signed apk 消失不见问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

  4. Android 实现自定义圆形listview功能的实例代码

    这篇文章主要介绍了Android 实现自定义圆形listview功能的实例代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  5. 详解Android studio 动态fragment的用法

    这篇文章主要介绍了Android studio 动态fragment的用法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  6. Android用RecyclerView实现图标拖拽排序以及增删管理

    这篇文章主要介绍了Android用RecyclerView实现图标拖拽排序以及增删管理的方法,帮助大家更好的理解和学习使用Android,感兴趣的朋友可以了解下

  7. Android notifyDataSetChanged() 动态更新ListView案例详解

    这篇文章主要介绍了Android notifyDataSetChanged() 动态更新ListView案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下

  8. Android自定义View实现弹幕效果

    这篇文章主要为大家详细介绍了Android自定义View实现弹幕效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  9. Android自定义View实现跟随手指移动

    这篇文章主要为大家详细介绍了Android自定义View实现跟随手指移动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. Android实现多点触摸操作

    这篇文章主要介绍了Android实现多点触摸操作,实现图片的放大、缩小和旋转等处理,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

返回
顶部