百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 热门文章 > 正文

MPAndroidChart中的PieChart和LineChart的markerView联动

bigegpt 2024-08-10 12:15 2 浏览

联动的效果要求在点击折线图上的数据点后,在饼图上对应部分的值要进行标记显示。下图是最终的效果图:

分析需求可以知道,虽然有两个表,但是它们使用的是同一份数据。折线图LineChart需要的数据是LineData对象,LineData对象需要传入LineDataSet,LineDataSet对象需要传入一个Entry的数组和label,每一个Entry都对应折线图上的一个数据点,label是数据标签。如果需求没有特殊要求,label的用处几乎没有,如果自己重写了LineChartRenderer,可以通过label来作为区分是否需要特殊处理的标志。往Entry数组里存数据的时候,要注意一下顺序,虽然Entry对象包含了x、y的值,但是折线图在渲染时,不是按照x值从小到大进行连接的,而是按照Entry数组中的位置连接数据点的。比如按顺序存入了(2,1)、 (1,1)…,在渲染时折现就会从(2,1)去连接(1,1),再从(1,1)去连接下一个点。(Figure.2 数据存入顺序错误时的渲染效果)

PieChart在存入数据前,要对原始数据进行归类,统计每一个数据范围内的数据量,PieChart里存入的是指定数据范围的数据量。

我遇到的需求中有一条是不能直接通过点击饼图的扇面显示markerView,这就要求通过isHighlightPerTapEnabled方法将mHighLightPerTapEnabled设置为false,这里设置为false不影响通过代码的方式进行markerView显示,即可以通过Chart的highlightValue方法,显示目标扇面的markerView;而且饼图在显示markerView时,要求扇面不能有凸显的效果,PieChart没有提供控制凸显效果的方法,但是从PieChartRenderer 类的drawHighlighted方法中可以知道,凸显效果的偏移量是PieDataSet中的mShift。所以可以通过PieDataSet提供的setSelectionShift方法,将偏移量设置为0f,则饼图在显示markerView时,就不会有凸显的效果了。

饼图markerView实现逻辑要考虑矩形区域不能被顶部遮挡,也不能遮挡底部的折线图区域,也不能遮挡自己的扇面部分。这部分的具体实现逻辑可以看后面的附件StressPieMarkerView.kt(Figure.3 pieChart的markerView的主要逻辑分析)

折线图的markerView和饼图的markerView相比要多考虑箭头形状和矩形的圆角是否都需要。(Figure.4 lineChart的markerView的主要逻辑分析)

在最新版的MPAndroidChart中是有一个mGradientColor参数作为渐变色的配置项的,但是比较奇怪的是渲染类LineChartRenderer中没有使用mGradientColor参数,所以即使在配置LineChart时设置了mGradientColor,也是不会有渐变色效果的。需要自己重写LineChartRenderer里面的drawLinear、drawCubicBezier和drawHorizontalBezier三个方法,在每个方法最后调用drawLines前给画笔通过setShader配置渐变色。

通过以上操作基本就实现了markerView联动的效果,下面再贴一些主要的代码。

实现渐变线的代码,主要是在线渲染类里画线的方法里添加了下面if这个代码块:

        ... ...
        mRenderPaint.color = dataSet.color
        mRenderPaint.style = Paint.Style.STROKE
        trans.pathValueToPixel(cubicPath)
        if (dataSet.gradientColor != null) {
            val gradientColor = dataSet.gradientColor
            mRenderPaint.shader = LinearGradient(
                0f,
                0f,
                0f,
                mChart.height.toFloat(),
                gradientColor.startColor,
                gradientColor.endColor,
                Shader.TileMode.CLAMP
            )
        }
        mBitmapCanvas.drawPath(cubicPath, mRenderPaint)
        mRenderPaint.pathEffect = null
       ... ...

在设置好markerView的现实效果以后,通过设置点击效果达到联动:

        ... ...
        setOnChartValueSelectedListener(object : OnChartValueSelectedListener {
                override fun onValueSelected(e: Entry?, h: Highlight?) {
                    val pieEntry = getPieEntryByValue(e!!.y)
                    val highlight = Highlight(pieEntry!!.x, pieEntry.y, 0)
                    binding?.pcDayPieChart?.highlightValue(highlight)
                    (binding?.pcDayPieChart?.marker as StressPieMarkerView).updateContent(e)

                }

                override fun onNothingSelected() {
                    binding?.pcDayPieChart?.highlightValue(null)
                }
            })
        ... ...

上面使用的getPieEntryByValue方法:

private fun getPieEntryByValue(value: Float): PieEntry? {
        val label = when {
            value <= StressYArea.Rest.max -> resources.getString(R.string.rest)
            value <= StressYArea.Low.max -> resources.getString(R.string.low)
            value <= StressYArea.Medium.max -> resources.getString(R.string.medium)
            else -> resources.getString(R.string.high)
        }
        var targetPieEntry :PieEntry? = null
        var x = 0f
        for (pieEntry in viewModel.dayPieEntries) {
            if (label == pieEntry.label) {
                targetPieEntry = pieEntry
                targetPieEntry.x = x
                break
            }
            x++
        }
        return targetPieEntry
    }

相关推荐

5分钟搭建公网https网页文件服务器,免费权威TLS证书

请关注本头条号,每天坚持更新原创干货技术文章。如需学习视频,请在微信搜索公众号“智传网优”直接开始自助视频学习前言本文主要讲解如何快速搭建一个https网页文件服务器,并免费申请权威机构颁发的tls证...

nginx负载均衡配置(nginx负载均衡配置两个程序副本)

Nginx是什么没有听过Nginx?那么一定听过它的“同行”Apache吧!Nginx同Apache一样都是一种WEB服务器。基于REST架构风格,以统一资源描述符(UniformResources...

19《Nginx 入门教程》Nginx综合实践

今天我们将基于Nginx完成两个比较有用的场景,但是用到的Nginx的配置非常简单。内部Yum源搭建内部Pip源搭建1.实验环境ceph1centos7.6内网ip:172.16....

Nginx性能调优与优化指南(nginx优化配置大全)

Nginx性能调优需要结合服务器硬件资源、业务场景和负载特征进行针对性优化。以下是一些关键优化方向和具体配置示例:一、Nginx配置优化1.进程与连接数优化nginxworker_process...

C++后端开发必须彻底搞懂Nginx,从原理到实战(高级篇)

本文为Nginx实操高级篇。通过配置Nginx配置文件,实现正向代理、反向代理、负载均衡、Nginx缓存、动静分离和高可用Nginx6种功能,并对Nginx的原理作进一步的解析。当需...

【Nginx】史上最全的Nginx配置详解

Nginx服务器配置中最频繁的部分,代理、缓存和日志定义等绝大多数功能和第三方模块的配置都在这里,http块又包括http全局块和server块。Nginx是非常重要的负载均衡中间件,被广泛应用于大型...

【Nginx】Nginx 4种常见配置实例(nginx基本配置与参数说明)

本文主要介绍nginx4种常见的配置实例。Nginx实现反向代理;Nginx实现负载均衡;Nginx实现动静分离;Nginx实现高可用集群;Nginx4种常见配置实例如下:一、Nginx反向代理配...

使用nginx+allure管理自动化测试报告

allure在自动化测试中经常用来生成漂亮的报告,但是网上及官网上给出的例子都仅仅是针对单个测试用例文件的形式介绍的,实际使用中,自动化测试往往需要包含不止一个产品或项目,本文介绍如何使用nginx+...

nginx配置文件详解(nginx配置文件详解高清版)

Nginx是一个强大的免费开源的HTTP服务器和反向代理服务器。在Web开发项目中,nginx常用作为静态文件服务器处理静态文件,并负责将动态请求转发至应用服务器(如Django,Flask,et...

SpringCloud Eureka-服务注册与发现

1.Eureka介绍1.1学习Eureka前的说明目前主流的服务注册&发现的组件是Nacos,但是Eureka作为老牌经典的服务注册&发现技术还是有必要学习一下,原因:(1)一些早期的分布式微服...

微服务 Spring Cloud 实战 Eureka+Gateway+Feign+Hystrix

前言我所在项目组刚接到一个微服务改造需求,技术选型为SpringCloud,具体需求是把部分项目使用SpringCloud技术进行重构。本篇文章中介绍了Eureka、Gateway、Fe...

深度剖析 Spring Cloud Eureka 底层实现原理

你作为一名互联网大厂后端技术开发人员,在构建分布式系统时,是不是常常为服务的注册与发现而头疼?你是否好奇,像SpringCloudEureka这样被广泛使用的组件,它的底层实现原理到底是怎样的...

热爱生活,喜欢折腾。(很热爱生活)

原文是stackoverflow的一则高票回答,原文链接可能之前也有人翻译过,但是刚好自己也有疑惑,所以搬运一下,个人水平有限所以可能翻译存在误差,欢迎指正(如侵删)。尽管classmethod和st...

GDB调试的高级技巧(详细描述gdb调试程序的全过程)

GDB是我们平时调试c/c++程序的利器,查起复杂的bug问题,比打印大法要好得多,但是也不得不说,gdb在默认情况下用起来并不是很好用,最近学习到几个高级点的技巧,分享下:一美化打印先上个例子...

Arduino 实例(二十三)Arduino 给Python 编译器发送信息

1首先Python需要安装Pyserial库,在命令提示符中输入pipintallpyserial若是遇到提示‘pip‘不是内部或外部命令,也不是可运行的程序或批处理文件,则需要设置环境变...