Android利用MPAndroidChart绘制曲线图表的基础教程

前言

最近看了一下 Android 上的图表控件,去年做过一款应用也已上架了,也用到了图表控件,但是只是按照官方 demo 集成了,并没有过多的研究。

我最近基本上是面向 Github 编程了,拿别人造好的轮子拿来用,不能直接用的就改改再用,实在不好实现的就劝说产品去改需求,基本这是个套路。

既然是图表控件,就上 github 一番搜索,关键字 chart,按照 java 一筛选,再按照 start 数量排序,由高到低。基本上 start 从高到低的图表控件就是 MPAndroidChart、hellocharts-android、WilliamChart、XCL-Charts、EazeGraph、Jgraph 这么几个了。再排除那些常年不更新的,issues 常年无人问津的一些库,我基本确定就使用 MPAndroidChart 了,我找其它库也是这么个套路。所以日常工作就是逛 github,看到中意的就 star make 一下,这和逛淘宝是一个道理[yahch]。

话不多说,先看一下最终效果。

MPAndroidChart 的官方文档可以说是非常详细了,基本上只要照着来就行了。

方法如下

第一步是 Gradle 引用和控件使用:

allprojects {
 repositories {
 maven { url "https://jitpack.io" }
 }
}

基本上很多项目都是通过通过 maven 官方和 jitpack了,没什么好说的。

dependencies {
implementation 'com.github.PhilJay:MPAndroidChart:v3.0.3'
}

我这里只用到了折线图,其它还有很多种类的图表,把项目 clone 下来跑一遍就知道了。

<com.github.mikephil.charting.charts.LineChart
 android:id="@+id/lineChart1"
 android:layout_width="match_parent"
 android:layout_height="150dp"
android:layout_marginTop="10dp"></com.github.mikephil.charting.charts.LineChart>

第二步是构建要显示的数据。

ArrayList<Entry> entryArrayList = new ArrayList<>();
for (int i = 0; i < chartDataBean.Altitudes.length; i++) {
 Entry entry = new Entry(i, (float) chartDataBean.Altitudes[i]);
 entryArrayList.add(entry);
}
//yahch

Entry 的两个参数 x,y 都是 float 类型的,我开始以为都表示 x,y 轴的值,但是想想若是 x 轴不是数值那 float 类型也表示不了,其实这个 x 轴的 float 类型的值就是 x 轴的下标了。

在折线图表中,一个线条就是一个 LineDataSet ,构建线条,也很简单。就是一通设置,都是按照字面意思了。

LineDataSet lineDataSet = new LineDataSet(entryArrayList, "demo");
lineDataSet.setDrawCircles(false);
lineDataSet.setDrawFilled(true);
lineDataSet.setDrawValues(false);
if (Utils.getSDKInt() >= 18) {
 Drawable drawable = ContextCompat.getDrawable(activity, R.drawable.chart_bg);
 lineDataSet.setFillDrawable(drawable);
} else {
 lineDataSet.setFillColor(Color.BLACK);
}
lineDataSet.setColor(Color.parseColor("#7093C9"));
lineDataSet.setLineWidth(2f);
lineDataSet.setDrawHighlightIndicators(false);
lineDataSet.setMode(LineDataSet.Mode.CUBIC_BEZIER);
// yahch

LineChart 设置数据方法是 LineChart.setData(LineData lineData) ,所以还要构造一个 LineData 。

LineData lineData = new LineData(lineDataSet);

假如我们有需求需要绘制一条平均刻线,可以使用 LimitLine。

LimitLine avgLine = new LimitLine(123f);
avgLine.setLineColor(Color.parseColor("#FFFFFF"));
lineChart1.getAxisLeft().addLimitLine(avgLine);

作为灵魂画手,我当时就画了一幅图。

然后点击全屏横向显示怎么个做法呢,很简单,这个并不是非要在当前的 Activity 中横向显示这个图表,重新开一个 Activity 就是了,并在 onCreate 的时候去掉 ActionBar 就行了。

 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 getSupportActionBar().hide();
 setContentView(R.layout.activity_full_altitude_chart);
 }
//yahch

那怎么横向呢,在 AndroidManifest.xml 设置这个 Activity 的 screenOrientation 参数为 landscape,强制设置横向屏幕即可。

OK,安装上的折线图表就搞完了,有木有很简单。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对我们的支持。

您可能感兴趣的文章:

  • 详解Android图表 MPAndroidChart折线图
  • MPAndroidChart开源图表库的使用介绍之饼状图、折线图和柱状图
  • Android中MPAndroidChart自定义绘制最高点标识的方法
(0)

相关推荐

  • 详解Android图表 MPAndroidChart折线图

    1.介绍 MPAndroidChart GitHub地址 MPAndroidChart的强大之处就不在多说了,目前最新的版本是3.0.1,在新版本中很多方法都被弃用了,这个要注意一下,在网上查到的大多数资料都是关于旧版本的,今天来实现一下折线图,把过程记录下来,分享给大家. 效果图: 2.引入开源库 在项目根目录的build.gradle文件中加入如下代码 allprojects { repositories { maven { url "https://jitpack.io" } }

  • Android中MPAndroidChart自定义绘制最高点标识的方法

    前言 MPAndroidChart是一款基于Android的开源图表库,MPAndroidChart不仅可以在Android设备上绘制各种统计图表,而且可以对图表进行拖动和缩放操作,应用起来非常灵活.MPAndroidChart显得更为轻巧和简单,拥有常用的图表类型:线型图.饼图.柱状图和散点图. MPAndroidChart自定义绘制最高点标识 距离上次发布关于 MPAndroidChart 的文章已经过去一个多月了,项目中新增了一个需求,看起来很简单.就是在最高点绘制矩形框,标识最高点的数值

  • MPAndroidChart开源图表库的使用介绍之饼状图、折线图和柱状图

    MPAndroidChart开源图表库之饼状图 为大家介绍一款图标开源库MPAndroidChart,它不仅可以在Android设备上绘制各种统计图表,而且可以对图表进行拖动和缩放操作,用起来非常灵活.MPAndroidChart同样拥有常用的图表类型:线型图.饼图.柱状图和散点图. mpandroidchartlibrary.jar包下载地址: https://github.com/PhilJay/MPAndroidChart/releases 下面主要实现以下饼状图: 1.从上面的地址中下载

  • Android利用MPAndroidChart绘制曲线图表的基础教程

    前言 最近看了一下 Android 上的图表控件,去年做过一款应用也已上架了,也用到了图表控件,但是只是按照官方 demo 集成了,并没有过多的研究. 我最近基本上是面向 Github 编程了,拿别人造好的轮子拿来用,不能直接用的就改改再用,实在不好实现的就劝说产品去改需求,基本这是个套路. 既然是图表控件,就上 github 一番搜索,关键字 chart,按照 java 一筛选,再按照 start 数量排序,由高到低.基本上 start 从高到低的图表控件就是 MPAndroidChart.h

  • Android利用HelloChart绘制曲线

    本文实例为大家分享了Android利用HelloChart绘制曲线的具体代码,供大家参考,具体内容如下 1.将jar包放到app下的libs文件夹中 2.build.gradle(app): implementation files('libs\\hellocharts-library-1.5.8.jar') 3.MainActivity.java package com.dj.drawlinestest; import android.graphics.Color; import androi

  • Android 利用三阶贝塞尔曲线绘制运动轨迹的示例

    本篇文章主要介绍了Android 利用三阶贝塞尔曲线绘制运动轨迹的示例,分享给大家,具体如下: 实现点赞效果,自定义起始点以及运动轨迹 效果图: xml布局: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/rl_root&

  • 利用Matlab绘制地图的超详细教程

    目录 MappingToolbox工具箱安装 局部区域陆地绘制 映射贴图 纹理贴图 线路图绘制 usamap axesm 一些地图绘制可用简易函数 subplot tightmap 边框标签网格快速开关函数 colormap colorbar worldmap和usamap是axesm的子类,worldmap是用于生成世界地图坐标区域,usamap用于生成美国地图坐标区域,本文先在worldmap函数基础上讲解如何导入各种数据绘制各种类型图片,略提一下如何使用usamap,再讲解axesm的各种

  • Python利用matplotlib绘制折线图的新手教程

    前言 matplotlib是Python中的一个第三方库.主要用于开发2D图表,以渐进式.交互式的方式实现数据可视化,可以更直观的呈现数据,使数据更具说服力. 一.安装matplotlib pip install matplotlib -i https://pypi.tuna.tsinghua.edu.cn/simple 二.matplotlib图像简介 matplotlib的图像分为三层,容器层.辅助显示层和图像层. 1. 容器层主要由Canvas.Figure.Axes组成. Canvas位

  • Android利用二阶贝塞尔曲线实现添加购物车动画详解

    一.引入 其实之前一直以为像饿了么或者是美团外卖那种把商品添加到购物车的动画会很难做,但是实际做起来好像并没有想象中的那么难哈哈. 布局主要使用CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout+TabLayout+ViewPager 动画主要使用二阶贝塞尔曲线与属性动画 消息传递使用EventBus普通事件 二.大致思路 1.如图所示主要有三个点,起点.终点.以及贝塞尔曲线的控制点 2.起点即点击的View的位置,一般来说用如下方式即可

  • Android利用OpenGLES绘制天空盒实例教程

    前言 天空盒这个效果最早是在腾讯的实景地图里看到的,当时觉得很牛逼,但是没有想过自己去实现以下.最近这段时间对opengl很有兴趣,顺便就搞了这个天空盒,话不多说,先上效果. 天空盒的原理就是在三维空间中放置一个正方体,然后将我们的相机放置在正方体内,当我们的视点转动,相机跟着转动.我们就可以看到相应的景色的变换了,天空盒本质上是一个立方体. OpenGL 关于什么是OpenGL,什么是OpenGLES就不细说了,不了解的就自行百度吧,我们主要是关注代码.整个项目采用了Kotlin + Ndk的

  • Android利用贝塞尔曲线绘制动画的示例代码

    目录 彩虹系列 弹簧动画 复杂立体感动画 总结 前面我们花了几篇介绍了贝塞尔曲线的原理和绘制贝塞尔曲线,着实让我们见识到了贝塞尔曲线的美.好奇心驱使我想看看贝塞尔曲线动起来会是什么样?本篇就借由动画驱动贝塞尔曲线绘制看看动起来的贝塞尔曲线什么效果. 彩虹系列 通过动画控制绘制的结束点,就可以让贝塞尔曲线动起来.例如下面的动图展示的效果,看起来像搭了一个滑滑梯一样.实际上就是用7条贝塞尔曲线实现的,我们使用了 Animation 对象的值来控制绘制的结束点,从而实现了对应的动画效果. 具体源码如下

  • Android MPAndroidChart绘制原理

    目录 前言 1. Chart整体结构 2.Chart 绘制参与的业务组件 Render Buffer Entry.DataSet Attribute 3. 整体Chart绘制流程 前言 官方demo地址:github.com/PhilJay/MPA… 笔者接下来的文章里MPChart 代表的就是 MPAndroidChart. 下载后AS里运行,可以看到demo里面有 Line Charts, Bar Charts, Pie Charts, Radar Charts, Other Charts.

随机推荐