MPAndroidChart 自定义图表绘制使用实例

目录
  • 引言
  • 1. LineGradientChart
  • 2. 散点图
  • 3. SteppedChart

引言

声明：文中的MPChart代指MPAndroidChart.

本文主要讲解LineChart中的三个变种Chart，第一个是渐变的LineGradientChart, 第二个是频率散点图，游泳阶梯图，其实MPChart本身也有阶梯图的，DataSet.isDrawSteppedEnabled()这个属性来控制。

1. LineGradientChart

原理：每个Entry中的 Yvalue 值，计算值所在的颜色区间，颜色的值少于值范围。然后绘制线段的时候，drawLine 时设置LineGradient就可以了， colorList跟 entryList 一样存到DataSet中，dataSet.setColors(colorList) Api 接收colorList。

for (int j = mXBounds.min; j <= mXBounds.range + mXBounds.min; j++) {
   Entry e = dataSet.getEntryForIndex(j);
   ...
  //设置 lineGradient
   mRenderPaint.setShader(new LinearGradient(startX, mLineBuffer[1], endX, mLineBuffer[3],
                            dataSet.getColor(j), dataSet.getColor(j+1), Shader.TileMode.MIRROR));
  //用 lineGradient绘制线段。
  canvas.drawLines(mLineBuffer, 0, pointsPerEntryPair * 2, mRenderPaint);
}

图1.0 LineGradientChart

2. 散点图

先看图1.1 散点图：

图1.1 散点图

这个其实有很多做法的，这里直接用LineChart，然后drawLine 时 Paint 的color transparent，或者直接属性控制不画。

设置DataSet.drawCircle(true), 就会绘制 Point点了。三种不同的颜色的Point，DataSetList, 这里自定义了一个CustomDataSet，不同的值区间用不同的Type，对应不同的颜色即可。

图1.2 散点图DataSet自定义

3. SteppedChart

阶梯图就是前后两个点的连线是90度上去或者下来的，即X轴的值是一定的。这里存在一个问题，MPChart中的X轴、Y轴的值是一一对应的，就是Point(1.0, 4) , Point(1.0, 8) 最终存入 DataSet只能有一个，后来的会将前面的覆盖。想办法如何绘制这种SteppedChart呢，就在最后一步，将Transformer转化后的 Buffer里的数据 currentEntry对应的点的 X值改成 PreCurrentEntry的X值，当他们满足业务上的阶梯的条件时，或者将PreCurrentEntry的X值的值改成 currentEntry对应的点的 X值。

直接看图：

图1.3 SteppedChart

本章节主要简单的介绍了几个LineChart 的变种，稍微修改部分属性就可以绘制不同需求的图形。至此，MPChart自定义相关的图形告一段落，原本计划的还有些比如RTL相关的，还有曲线图表的绘制等，有问题需要了解的读者可以留言或者加笔者的联系方式探讨。

后续介绍另外一种脱离MPChart图表，基于RecycleView绘制的图表，可实现的功能可以参照苹果健康里的一些数据图表，无限左右滑动，按下高亮选中滑动，以日、周、月为单位控制 单位区间里的数据，可以属性控制是否单位区间显示，可以自动弹回到邻近的单位区间边界等功能。

以上就是MPAndroidChart 自定义图表绘制使用实例的详细内容，更多关于MPAndroidChart 自定义图表的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • Android画图实现MPAndroidchart折线图示例详解

    Android画图实现MPAndroidchart折线图示例详解

    目录 效果图 依赖 activity.xml MainActivity MyMarkerView 自定义class maekertextview .xml 常用属性 效果图 用的是3.1.0的依赖 依赖 allprojects { repositories { jcenter() maven { url "https://jitpack.io" } } } //依赖 dependencies{ implementation 'com.github.PhilJay:MPAndroidCh

  • Android MPAndroidChart绘制原理

    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.

  • MPAndroidChart自定义图表Chart的Attribute及Render绘制逻辑

    目录 MPAndroidChart自定义图表 1. 自定义Chart的Attribute 2. Render 自定义绘制逻辑 3. DataBuffer MPAndroidChart自定义图表 声明:本文MPChart 代表的就是 MPAndroidChart. 1. 自定义Chart的Attribute 我们回忆一下自定义View的过程里,通常我们会将一些属性控制Attribute通过自定义View的构造方法传入,然后绘制或者layout的情况下使用这些属性.Attribute类中的属性,通过

  • MPAndroidChart绘制自定义运动数据图表示例详解

    目录 引言 TimeAxis SportYAxis CustomLineChart 引言 声明:文中的MPChart代指MPAndroidChart. 本系列之前的文章介绍的MPChart中BarChart相关的一些绘制,接下来我们看看LineChart相关的绘制. 这里以实际的运动相关的图表数据做业务支撑来讲解.MPChart图表支持多指触控方法,这里所有的图表自定义都关掉了这个属性,这样就减少Transformer,以及绘制过程中的更多的变动,相当于一个静态的图. 通常图表在放大的过程中,坐

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

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

  • matplotlib绘制鼠标的十字光标的实现(自定义方式，官方实例)

    matplotlib在widgets模块提供Cursor类用于支持十字光标的生成.另外官方还提供了自定义十字光标的实例. widgets模块Cursor类源码 class Cursor(AxesWidget): """ A crosshair cursor that spans the axes and moves with mouse cursor. For the cursor to remain responsive you must keep a reference

  • WPF 自定义雷达图开发实例教程

    WPF 自定义雷达图开发实例教程

    自定义雷达图表如下: 1.创建UserControl,名为"RadarChartControl" 前台: <UserControl x:Class="WpfApplication2.RadarChartControl" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/win

  • Chart.js 轻量级HTML5图表绘制工具库（知识整理）

    Chart.js:用不同的方式让你的数据变得可视化.每种类型的图表都有动画效果,并且看上去非常棒,即便是在retina屏幕上.基于HTML5 canvas技术,Chart.js不依赖任何外部工具库,轻量级(压缩之后仅有4.5k).值得推荐学习! GitHub源码: https://github.com/nnnick/Chart.js Chart.js文档:http://www.bootcss.com/p/chart.js/ 步骤: html部分: <canvas id="myChart&q

  • Angular2使用SVG自定义图表（条形图、折线图）组件示例

    Angular2使用SVG自定义图表（条形图、折线图）组件示例

    本文实例讲述了Angular2使用SVG自定义图表(条形图.折线图)组件.分享给大家供大家参考,具体如下: 要求:用户将数据作为参数传进来,通过类型决定渲染何种类型的图标. demo: html: <ngo-chart [inputParams]="options"></ngo-chart> ts: options = { type: 'line', //图表类型 xAxis: { //X轴的数据 data: ['Mon', 'Tue', 'Wed', 'Thu

  • RecyclerBezierChart曲线图表绘制

    目录 曲线图标RecyclerBezierChart 的绘制 三阶贝塞尔曲线 cubicPath 曲线图标RecyclerBezierChart 的绘制 本篇介绍曲线图标RecyclerBezierChart 的绘制, 同样图表的公共部分的绘制这里不再做介绍,主体图表的绘制逻辑在BezierChartRender类中,其中包含主体曲线的绘制以及底部fill部分的渐变色的绘制. 三阶贝塞尔曲线 曲线的绘制用的三阶贝塞尔曲线,关于贝塞尔曲线相关的知识读者可自行Google,Android中的三阶贝塞

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

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

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

  • Android使用自定义View绘制渐隐渐现动画

    实现了一个有趣的小东西:使用自定义View绘图,一边画线,画出的线条渐渐变淡,直到消失.效果如下图所示: 用属性动画或者渐变填充(Shader)可以做到一笔一笔的变化,但要想一笔渐变(手指不抬起边画边渐隐),没在Android中找到现成的API可用.所以,自己做了一个. 基本的想法是这样的: 在View的onTouchEvent中记录触摸点,生成一条一条的线LineElement,放在一个List中.给每个LineElement配置一个Paint实例. 在onDraw中绘制线段. 变换LineE

  • Android自定义竖排TextView实现实例

    Android自定义竖排TextView实现实例

    Android自定义竖排TextView实现实例 前言: 之前做联系人模块的时候遇到一个左侧索引控件,里面的字符都是竖直方向上排列的.当时这个控件是用一个图片代替的.现在想来如果索引的字符变更了,那么就得重新更换图片了,感觉很麻烦.今天通过一个自定义TextView实现类似的功能.先上效果图: 汉字和英文字符都可以竖直排列.结合联系人界面,可以将左侧的索引改成联系人的姓氏. 上代码: 测试用的Activity. public class MainActivity extends Activity

随机推荐