我正在参加「掘金·启航计划」
上篇说到smartTable的使用历程,这篇主要讲讲 MPAndroidChart使用记录。GitHub上可以看到该库的start高达36.5k+,不用多说,相信很多老铁都已经使用过,下面就自己的使用做个简单记录。
首先克隆下项目,修改gradle版本,很快完美运行在手机上,仔细看看相关文档,大部分功能基本都能实现。另外这里附上前辈们的一些使用经验,可以帮助老铁们快速上车:blog.csdn.net/dapangzao/a…
项目中主要使用的是线性统计,所以使用LineChart,现在咱们就一些小细节展开说说,先上图,共5处:
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)
}
}
以上便是统计表格的使用记录,希望能够给需要的人一些帮助~