[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里面的使用说明,
结果发现并没有详细描述,只能翻代码

/**
 * @param animationType 动画类型
 * @param animationDuration 动画时间
 * @param title 标题内容
 * @param titleStyle 标题文本风格样式
 * @param subtitle 副标题内容
 * @param subtitleAlign
 * @param subtitleStyle 副标题文本风格样式
 * @param axesTextColor x 轴和 y 轴文字颜色
 * @param chartType 图表类型
 * @param stacking 堆积样式
 * @param markerRadius 折线连接点的半径长度,如果值设置为0,这样就相当于不显示了
 * @param markerSymbol 折线曲线连接点的类型："circle", "square", "diamond", "triangle","triangle-down"，默认是"circle"
 * @param markerSymbolStyle
 * @param zoomType 缩放类型 AAChartZoomTypeX表示可沿着 x 轴进行手势缩放
 * @param inverted x 轴是否翻转(垂直)
 * @param xAxisReversed x 轴翻转
 * @param yAxisReversed y 轴翻转
 * @param tooltipEnabled 是否显示浮动提示框(默认显示)
 * @param tooltipValueSuffix 浮动提示框单位后缀
 * @param gradientColorEnable 是否要为渐变色
 * @param polar 是否极化图形(变为雷达图)
 * @param margin 图表外边缘和绘图区域之间的边距
 * @param dataLabelsEnabled 是否显示数据
 * @param dataLabelsStyle
 * @param xAxisLabelsEnabled x轴是否显示数据
 * @param xAxisTickInterval
 * @param categories x轴是否显示数据
 * @param xAxisGridLineWidth x轴网格线的宽度
 * @param xAxisVisible x 轴是否显示
 * @param yAxisVisible y 轴是否显示
 * @param yAxisLabelsEnabled y轴是否显示数据
 * @param yAxisTitle y轴标题
 * @param yAxisLineWidth y 轴轴线的宽度
 * @param yAxisMin
 * @param yAxisMax
 * @param yAxisAllowDecimals
 * @param yAxisGridLineWidth y轴网格线的宽度
 * @param colorsTheme 图表主题颜色数组
 * @param legendEnabled 是否显示图例
 * @param backgroundColor 图表背景色
 * @param borderRadius 柱状图长条图头部圆角半径(可用于设置头部的形状,仅对条形图,柱状图有效,设置为1000时,柱形图或者条形图头部为楔形)
 * @param series
 * @param touchEventEnabled 是否支持用户触摸事件
 * @param scrollablePlotArea
 */

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

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

/**
     * @param title 标题
     * @param categories 左侧每条数据的说明
     * @param data 数据源
     * @param height 图表设定高度,会影响到 是否可滑动,柱状图的高度
     */
    fun setChartParams(
        title: String,
        categories: MutableList<String>,
        data: Array<AASeriesElement>,
        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>()
//使用AADataElement对象
step.add(AADataElement().color("#FFDF00").y(it.step.toFloat()))

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

最后效果: