[Android] AAChart组件使用(合并数据、不同颜色柱状图、属性配置)

最近公司举办减肥比赛.
答应了帮HRBP的做一个积分计算器.
最终涉及到了排名,就需要一个数据展示.
评估了时间,决定采用图表的形式进行数据展示,
时间关系不准备自定义View自己画表格了,直接用现成的.

这图表处理还是花了一点时间,做一下记录,不管是帮助他人还是以后自己回顾都行

1. 能够支持 柱状图数据展示
2. 能够支持 基于不同条件下 不同颜色进行展示
3. 拓展性足够高,能够进行足够的自定义
4. 足够稳定,不会有太多BUG等待修复.
5. 支持Java 或 Kotlin

最终 选择AAChart组件, 我个人使用的是 Kotlin版本.

按照demo说明,
啪的一下,很快啊~
把效果弄出来了

不过这效果,emmmm…

这红框标注的地方,都是啥?

• 手指头移动到哪里,都有一个tips,不需要
• X轴这显示刻度 多少K多少K,还带省略号,不需要+1
• X轴Values是啥? 不需要+2
• Series 1 又是啥? 不需要+3
• 柱状图怎么这么密,我希望能够大一些,而且能够滑动,现在不行

且容我这个靓仔康康Wiki里面的使用说明,
结果发现并没有详细描述,只能翻代码

以上是AAChartModel的配置字段注释说明.
我自己按照注释进行了设置.
最终效果

现在就很清爽了.
没有不必要的说明,没有手指滑动的TIPS,也可以进行上下滑动.
NICE.
这是我抽取的函数,可以参考一下,注释都写上了.

    fun setChartParams(
        title: String,
        categories: MutableList,
        data: Array,
        height: Int = 3200
    ): AAChartModel {
        return AAChartModel()
            .chartType(AAChartType.Bar)
            .title(title)
            .categories(categories.toTypedArray())
            .backgroundColor("#ffffff")
            .series(data)
            //要不要在柱状图上面显示一个数字
            .dataLabelsEnabled(true)
            //去掉横向的轴的轴体表示
            .yAxisLabelsEnabled(false)
            //去掉横向的哪个 Values 显示
            .yAxisVisible(false)
            //不需要每点一个数据,展示一个小tip
            .tooltipEnabled(false)
            //不要垂直的一条一条的线
            .yAxisGridLineWidth(0f)
            //不需要颜色说明的哪个东西,也就是那个Series1
            .legendEnabled(false)
            .scrollablePlotArea(
                AAScrollablePlotArea()
                    //图表的高度,设置的比屏幕高,就可以滑动
                    .minHeight(height)
                    //起始,是在最顶部(0f)还是最底部(1f)
                    .scrollPositionY(0f)
            )
    }

现在只差最后一步.
我希望柱状图的颜色,能够基于状态,能够有不同颜色的显示.
Wiki里面示例图有这个效果.
翻遍了代码说明,翻遍了demo就是没找到.
最后我成功的在 其他语言的组件的ISSUES里面找到了一份 Object-C的代码说明
太不容易了!!!
贴上实现这种效果的关键代码

private var step = mutableListOf()
//使用AADataElement对象
step.add(AADataElement().color("#FFDF00").y(it.step.toFloat()))

使用AADataElement对象对数据源进行封装,传入自定义的颜色即可.注意实际数据只支持Float,记得抓换.

最后效果: