MpAndroidChart源码修改之饼状图添加标志线

由于项目需要,需要改MpandroidChart源码,下面,先看下效果图:

效果图

效果很简单,但是由于所选依赖库没提供相关方法,所以就需要重写源码了.
这条红色的标志线其实就是那个影厅的均值嘛,这条线看着是不是和图表中的连接线很像呢,那把连接线稍加改造不就可以了吗?下面,先看下此依赖库自带的连接线的效果图:

这里写图片描述

思考一下,我们只需要把值的颜色设置成透明就可以了,然后把连接线改造一下.

首先,先设置图表的连接线的属性.

pieData.setDrawValues(true);//饼状图上显示值
dataSet.setValueLinePart1Length(0.3f);//设置连接线的长度
//x,y值在圆外显示(在圆外才会有连接线)
dataSet.setXValuePosition(PieDataSet.ValuePosition.OUTSIDE_SLICE);
dataSet.setXValuePosition(PieDataSet.ValuePosition.OUTSIDE_SLICE);
//数据连接线距图形片内部边界的距离，为百分数(0~100f)
dataSet.setValueLinePart1OffsetPercentage(0f);
//设置x,y在圆外显示的值为透明(transparent = 0x00000000)
pieData.setValueTextColor(transparent);复制代码

好了,现在就该修改源码了.
首先找到PieChart类,发现图表的绘制的代码都在PieChartRenderer类中.为了不影响其他图表,我们把PieChart和PieChartExtraRenderer复制一份,在复制的代码中做修改.
在PieChartExtraRenderer中找到drawValues( )这个方法,这个方法就是绘制显示值和连接线的方法.
可以很快找到,这条折线

这里写图片描述

我们把第二折线注释掉,就不会出现和连接线一样的折线效果了.
然后可以在这个方法的前几行找到得到的角度,

这里写图片描述

由于图表是自动获取角度的,那我们如果设置方法手动改变角度,不就可以了吗.所以在上图中,我把原有代码注释掉,改为我们获取的角度,在这个类中添加方法:

这里写图片描述

然后我们在设置图表的时候先设置这个指示线的角度

这里写图片描述

里边的值为0~360f,由于我们用的是连接线,连接线都是从所占区域的中间画的,所以我们需要乘以2.
运行时,会报错,是因为数组越界了.

这里写图片描述

再循环中,每次循环xIndex都会加1,由于我们的饼状图有两个数据,所以会循环两次,就会越界.所以上图我们强制xIndex为0.
由于循环两次,所以会画2个线,我们要第一条线,所以再加个参数time,把time放循环末尾time++,而在画线的方法外添加判断

这里写图片描述

这样效果就实现了.
提醒一点,触摸事件会因为为空报错,需要把触摸事件禁用.

pieChart.setRotationEnabled(false);//触摸旋转
pieChart.setTouchEnabled(false);复制代码

下边,给个修改好的饼状图的依赖库,使用PieChartExtra这个饼状图,同时要设置标志线角度,调用PieChartExtraRenderer.setRotateLine(rotate)方法

转载于:https://juejin.im/post/5a126e60f265da43333e0142

MpAndroidChart源码修改之饼状图添加标志线相关推荐

修改echarts饼状图鼠标样式
在echarts图表的 series里面加上两个属性 series: [{name: 'Access From',type: 'pie',radius: '50%',data: [{ value: 1 ...
chartjs（react-chartjs-2）饼状图添加百分比显示
框架react import React from 'react'; import {Pie} from 'react-chartjs-2';const data = {labels: ['1Red' ...
python excel数据分析画直方图饼状图_Excel数据可视化应用（直方图、折线图、饼状图）...
直方图:对比关系直方图是一种统计报告图,是表示资料变化情况的主要工具.直方图由一系列高度不等的的纵向条纹或线段表示数据分布的情况.一般用横轴表示数据类型,纵轴表示分布情况. 例1: 1.右键单击图表 ...
封装构造函数，用canvas写饼状图和柱状图
封装构造函数,用canvas写饼状图和柱状图封装函数 // 场景 function XDLScence( options ) {this.stage = options.stage;//执行场景的初 ...
WinForm立体饼状图实现(附源码示例) 之配餐系统的开发
本文所要将的是在"配餐系统"开发中立体饼状图效果的实现,直接贴出代码和附上示例,相信需要的朋友可以很容易使用!项目中的效果图,如下: 实现应用的是 System.Drawing ...
Android部分源码资源共享（视屏转GIF图片工具、仿抖音、仿朋友圈、仿红包、饼状图、引导图，图灵源码等）
视屏转为gif图片工具: 下载地址:CSDN 下载 1.封装了各项工具类,例如,日志,打印,缓存等,可直接使用项目百度网盘:下载提取码:fq07 2.Android高仿抖音 1.项目的b ...
HTML实现饼状图完整源码及效果图
开发交流QQ群: 173683895 173683895 526474645 人满的请加其它群效果图实现源码: <!DOCTYPE html> <html style ...
android带动画的饼图,Android部分源码资源共享（视屏转GIF图片工具、仿抖音、仿朋友圈、仿红包、饼状图、引导图，图灵源码等）...
视屏转为gif图片工具: 下载地址:CSDN 下载 1.封装了各项工具类,例如,日志,打印,缓存等,可直接使用项目百度网盘:下载提取码:fq07 2.Android高仿抖音 1.项目的bu ...
php饼状图源码,php 饼状图
php 饼状图 //变量定义,画椭圆弧时的角度大小 define("ANGLELENGTH",3); /** * 绘制图片 * @param $title 3D图的标题 * ...

MpAndroidChart源码修改之饼状图添加标志线

MpAndroidChart源码修改之饼状图添加标志线相关推荐

最新文章

热门文章