Android:图表库(MPAndroidChart)实现双轴和限制线

开启掘金成长之旅!这是我参与「掘金日新计划 · 2 月更文挑战」的第 11 天,点击查看活动详情

记得去年由于项目需求,初期入坑了图表库MPAndroidChart。不得不说,该库的功能确实非常强大,解决了Android端关于图表类功能的缺失问题。由于之前是初试牛刀,出了一篇入门级文章,这里贴出地址:强大的统计图(MPAndroidChart)使用记录

因为公司主营和Web前端相关,大家都知道什么表格、图表之类的在Web前端都是有现成的组件,各种效果、功能都是成熟,直接拿来用即可。但Android端目前能做图表库的就看到MPAndroidChart能挑起大梁,要跟随Web端实现一样的效果可能还是有些许难度,毕竟没有吃透三方库,也不知道会遇到什么乱七八糟的bug。接下来就说说我所需要实现的功能和解决办法吧。

双轴统计表

当时听到双轴都是懵的,什么鬼?在看到了前端的页面后才知道竟然还有这玩意,主要以前也没怎么接触过表格,可以说对其相当不了解。既然前端都实现了,我Android端也要实现啊,很无奈又打开AS跑起了demo.

1675926219888.jpg

LineChart模块中并没有找到双轴的效果,但庆幸的是在BarChart模块中发现有双轴的效果,心中窃喜,迫不及待查看代码。原来LineChart的Y轴包含了axisLeft和axisRight,一个左轴一个右轴,属性设置都一样,不得不惊叹库的开发者,真是想的周到。

需要注意:
  • X、Y轴的单位增幅
    为了图表好看,Y轴单位增幅需要通过真实数据计算。例如Y轴份数固定,每个单位值就是最大数除以份数然后取整。还需要考虑统计图展示的最大数要大于真实数据的最大值等等情况。
    X轴的时间线设置需要注意,如果份数固定使用setLabelCount方法时force参数一定要传入false,否则会出现分配不均的情况
  • 0刻度线位置,有可能出现负数
    在计算Y轴增幅单位时需要考虑到负数情况,否则图表展示也会错误
binding.chartLine.axisLeft.apply {
    axisMinimum = if (firstMin < 0) firstMin * 1.1f else 0f//y轴最小值
    val value = firstMax / 6f
    granularity = value//设置每次增幅值
    setLabelCount(6, false)//设置Y轴单位格数
    axisMaximum = value * 7.1f//y轴最大值
    axisLineWidth = 1f//y轴宽度
    setDrawZeroLine(true)//显示x方向0轴
    zeroLineColor = ContextCompat.getColor(
        requireContext(),
        R.color.cl_9E9E9E
    )//x轴颜色
    zeroLineWidth = 1f//x轴宽度
}
限制线

看到前端的警戒线我又懵逼了,这都是需要自定义操作才能实现的。如果说三方没有提供该功能那还得自己阅读对应源码,了解逻辑后对症下药。不得不说,库作者真的是用心了,不一会发现有个叫LimitLine的类,并且X、Y轴都提供了一个添加方法addLimitLine(LimitLine l)

1675927908181.jpg

LimitLine ll = new LimitLine(30f, "Lower Limit");//临界值和文字提示
ll.setLineWidth(4f);//临界线宽度
ll.enableDashedLine(10f, 10f, 0f);//虚线间隔
ll.setLabelPosition(LimitLabelPosition.RIGHT_BOTTOM);//文字提示位置
ll.setTextSize(10f);//文字大小
ll.setTypeface(tfRegular);//文字字体样式
// draw limit lines behind data instead of on top
yAxis.setDrawLimitLinesBehindData(true);//在数据后面
// add limit lines
yAxis.addLimitLine(ll1);

就这样完美添加上了限制线,当然X轴也是一样的方式。

总结

虽然MPAndroidChart提供了对应功能的方法,但其中很多数据还是需要开发者手动计算,需根据自己的项目不断调试。对于前端来说很简单的功能可能在移动端实现起来要复杂的多。特别是X轴日期这块,新手可能会出现很多问题,也许这次的数据显示正常,但下次不同的数据来了显示就乱了。这时我们还是要着重看源码和注解,也可在Github的lssuse上搜索相关问题,得以解决。

好了,以上便是对MPAndroidChart使用的一些功能记录,希望对大家有所帮助。

开启掘金成长之旅!这是我参与「掘金日新计划 · 2 月更文挑战」的第 11 天,点击查看活动详情