强大的统计图(MPAndroidChart)使用记录

我正在参加「掘金·启航计划」

上篇说到smartTable的使用历程,这篇主要讲讲 MPAndroidChart使用记录。GitHub上可以看到该库的start高达36.5k+,不用多说,相信很多老铁都已经使用过,下面就自己的使用做个简单记录。

首先克隆下项目,修改gradle版本,很快完美运行在手机上,仔细看看相关文档,大部分功能基本都能实现。另外这里附上前辈们的一些使用经验,可以帮助老铁们快速上车:blog.csdn.net/dapangzao/a…

项目中主要使用的是线性统计,所以使用LineChart,现在咱们就一些小细节展开说说,先上图,共5处:

F7F63D1C-8DAD-406c-8A5B-AC349CB397AA.png

1.图例
api提供的还是比较全面,想要的都有

binding.chartLine.legend.apply {
    form = LegendForm.LINE
    formLineWidth = 3f//图列图形高度
    formSize = 20f//图例图形宽度
    formToTextSpace = 5f//图形与文字间隔
    xEntrySpace = 15f//两个图列之间距离
    textSize = 14f//文字大小
    textColor = ContextCompat.getColor(requireContext(), R.color.cl_373737)//图例文字颜色
    verticalAlignment = Legend.LegendVerticalAlignment.TOP
    horizontalAlignment = Legend.LegendHorizontalAlignment.RIGHT
    orientation = Legend.LegendOrientation.HORIZONTAL
    maxSizePercent = 1f
    setDrawInside(true)
}

2.Y轴单位
实现这个稍微花了一点时间,因为并没有发现相关api,但通过搜索lssuse寻找到一些蛛丝马迹。库里面有一个description属性可以操作,我们就它还是可以实现效果的。

description.apply {
    isEnabled = true
    text = "m"
    textSize = 16f
    textColor = ContextCompat.getColor(requireContext(), R.color.cl_373737)
    post {
        val offsetTop = viewPortHandler.offsetTop()
        val x =
            Utils.convertDpToPixel(axisRight.xOffset + Paint().apply { textSize = 16f }
                .measureText("m") / 2)
        setPosition(x, offsetTop - 35f)
    }
}

3.Y轴刻度值 这个api基本都能找到,需要注意的就是最大值和增幅值得设置。

binding.chartLine.axisLeft.apply {
            axisMinimum = 0f//y轴最小值
            val value=ceil(compareData.maxY/6.0).toFloat()
            granularity =value//设置每次增幅值
            setLabelCount(6, false)//设置Y轴单位格数
            axisMaximum =value*7//y轴最大值
            spaceTop = 20f
            enableGridDashedLine(3f, 5f, 0f)//虚线长度
            gridColor = ContextCompat.getColor(requireContext(), R.color.cl_047BF2)//横向虚线颜色,x轴颜色与此同步
            textColor = ContextCompat.getColor(requireContext(), R.color.cl_A6A6A6)
            textSize = 13f
            spaceTop = 10f//设置最大值到图标顶部距离占所有数据范围比例
            axisLineColor = ContextCompat.getColor(requireContext(), R.color.cl_E7E7E7)//y轴颜色
            axisLineWidth = 1f//y轴宽度
            setDrawZeroLine(true)//显示x方向0轴
            zeroLineColor = ContextCompat.getColor(requireContext(), R.color.cl_E7E7E7)//x轴颜色
            zeroLineWidth = 1f//x轴宽度
        }

4.统计图样式 通过设置chartLine.data完成数据填充,其中data值的设置如下,注释也很清晰:

 private fun generateDataLine(context: Context, datas: MutableList<TimeContrastBean>): LineData {
        val values1 = ArrayList<Entry>()
        for (i in datas.indices) {
            values1.add(
                Entry(
                    i.toFloat(),
                    datas[i].plan
                )
            )
        }
        val d1 = LineDataSet(values1, "计划").apply {
            lineWidth = 1f
            color = ContextCompat.getColor(context, R.color.cl_E8575A)
            enableDashedLine(8f, 8f, 0f)//虚线
            setDrawValues(false)//不显示值
            setDrawCircles(false)//不画圆
//        mode=LineDataSet.Mode.CUBIC_BEZIER
            // set the filled area
            setDrawFilled(true)//填充颜色
            fillDrawable = ContextCompat.getDrawable(context, R.drawable.fade_red)//渐变背景色
        }

        val values2 = ArrayList<Entry>()
        for (i in datas.indices) {
            values2.add(Entry(i.toFloat(), datas[i].practical))
        }
        val d2 = LineDataSet(values2, "实际").apply {
            lineWidth = 2f
            color = ContextCompat.getColor(context, R.color.cl_047BF2)//线条颜色
//        mode=LineDataSet.Mode.CUBIC_BEZIER
            setDrawValues(false)//不显示值
            setDrawCircles(false)//不画圆
            setDrawFilled(true)//是否填充
            fillDrawable = ContextCompat.getDrawable(context, R.drawable.fade_green)//渐变背景色

        }

        //添加数据并返回
        return LineData(ArrayList<ILineDataSet>().apply {
            add(d1)
            add(d2)
        })
    }

5.X轴刻度值 与Y轴同理,唯一需要注意得就是X轴刻度值得显示,api提供了valueFormatter,开发者可以尽情发挥,例如上图效果:

class DateAxisValueFormatter (private val defauteTime:Long): ValueFormatter() {

    private val time = 60 * 60 * 24 * 30 * 1000.toLong()
    private val fromat by lazy { SimpleDateFormat("yyyy.MM") }
    private val calendar by lazy { Calendar.getInstance() }

    override fun getFormattedValue(value: Float): String {
        calendar.time=Date(defauteTime)
        var year=calendar.get(Calendar.YEAR)
        var month=calendar.get(Calendar.MONTH)
        if (month<=7){
            month+= ceil(value.toDouble()).toInt()+2
        }else{
            year += 1
        }
        calendar.set(Calendar.YEAR,year)
        calendar.set(Calendar.MONTH,month)
        return fromat.format(calendar.time)
    }
}

以上便是统计表格的使用记录,希望能够给需要的人一些帮助~