MPAndroidChart中线性图表LineChart的简单使用

#1.首先引入依赖
在主项目的build.gradle文件中
repositories {
maven { url ‘https://jitpack.io’ }
}
在app moudle的build.gradle文件中
dependencies {
implementation ‘com.github.PhilJay:MPAndroidChart:v3.1.0’
}

#2.布局使用

            <com.github.mikephil.charting.charts.LineChart
                android:id="@+id/lineChart"
                android:layout_width="match_parent"
                android:layout_height="300dp"
                android:layout_marginTop="28dp"
                android:layout_marginLeft="24dp"
                android:layout_marginRight="24dp"/>

#3.在代码之中配置

##3.1定义一下X轴标签
val week = arrayOf(“周一”, “周二”, “周三”, “周四”, “周五”, “周六”, “周⽇”)

##3.2 图表的基本配置
//binding!!.lineChart.description.textColor = Color.RED
//binding!!.lineChart.description.textSize = 16F
binding!!.lineChart.description.isEnabled = false//图表的说明 在右下角位置
binding!!.lineChart.setNoDataText(“无可用数据”) //没数据的时候展示
binding!!.lineChart.setDrawBorders(false)// 是否绘制边框
binding!!.lineChart.animateX(500) //x轴动画
binding!!.lineChart.setTouchEnabled(true) //设置支持触摸
binding!!.lineChart.setScaleEnabled(false) //是否支持缩放，默认true
binding!!.lineChart.isDragEnabled = false //是否支持拖拽
binding!!.lineChart.isScaleXEnabled = false //是否支持x轴缩放
binding!!.lineChart.isScaleYEnabled = false //是否支持y轴缩放
binding!!.lineChart.setPinchZoom(false) //是否支持x、y轴同时缩放，默认为false
binding!!.lineChart.isDoubleTapToZoomEnabled = false //是否支持双击屏幕放大，默认true
binding!!.lineChart.isHighlightPerDragEnabled = false //是否拖拽高亮线（数据点和坐标的提示线），默认true
binding!!.lineChart.isDragDecelerationEnabled = false //拖拽滚动时，手放开是否会持续滚动，默认true，false是拖动到那算那
//和上面的属性相配合，配置持续滚动的速度快慢，区间【0-1】0表示立即停止
binding!!.lineChart.dragDecelerationFrictionCoef = 0.99F
//是否有左下⾓的标签
binding!!.lineChart.getLegend().form = Legend.LegendForm.NONE

##3.3 设置X轴属性
val xAxis = binding!!.lineChart.xAxis
xAxis.position = XAxis.XAxisPosition.BOTTOM //设置x轴位置
xAxis.axisMinimum = 0F //设置x轴最小值
xAxis.textSize = 10f
xAxis.textColor = 0XFFA37366.toInt()
xAxis.isEnabled = true //是否显示x轴相关内容
xAxis.axisLineColor = 0XFFFFE4DD.toInt()
xAxis.setDrawLabels(true) //设置x轴标签展示
xAxis.setDrawGridLines(false) //设置设置x轴上每个对应的点的竖线、是否显⽰⽹格线
xAxis.valueFormatter = object : ValueFormatter() {
override fun getFormattedValue(value: Float): String {
return “${week[value.toInt()]}”
}
}

##3.4 设置Y轴属性
val yAxisLeft = binding!!.lineChart.axisLeft
yAxisLeft.textSize = 10F
yAxisLeft.axisMinimum = 0F
// yAxisLeft.axisMaximum = 10F
yAxisLeft.textColor = 0XFFA37366.toInt()
yAxisLeft.axisLineColor = 0XFFFFE4DD.toInt()
yAxisLeft.setDrawGridLines(false) //设置设置x轴上每个对应的点的竖线、是否显⽰⽹格线

val yAxisRight = binding!!.lineChart.axisRight
yAxisRight.isEnabled = false
##3.5 设置数据
val lineDataEntities = ArrayList()
week.forEachIndexed { index, s ->
val random = (0…10).random()
lineDataEntities.add(Entry(index.toFloat(), random.toFloat()))
}

##3.6 将数据应用设置进图表当中
val lineDataSet = LineDataSet(lineDataEntities, null)
lineDataSet.setDrawHighlightIndicators(false)//点击的时候出现横竖线
lineDataSet.color = 0XFFFF7B50.toInt() //折线颜色
lineDataSet.lineWidth = 2f //折线粗细
lineDataSet.setDrawCircles(true) //是否绘制交点
lineDataSet.circleRadius = 4f
lineDataSet.setCircleColor(0XFFFFFFFF.toInt()) //设置交点的圆圈颜色
lineDataSet.setDrawCircleHole(true)
lineDataSet.circleHoleRadius = 3f
lineDataSet.circleHoleColor = 0XFFFF7B50.toInt()
lineDataSet.setDrawValues(false) //是否显示交叉点的数值
lineDataSet.valueTextColor = Color.CYAN //设置交叉点上的值的颜色
lineDataSet.valueTextSize = 14F //设置交叉点上值的字体大小
lineDataSet.mode = LineDataSet.Mode.LINEAR //设置平滑曲线
val lineData = LineData(lineDataSet)
binding!!.lineChart.data = lineData
binding!!.lineChart.invalidate()

#4 完成以上部分就能简单使用了

#5 marker的设置

##5.1 自定义一个makerView
class SimpleMarkerView(context: Context?) : MarkerView(context, R.layout.marker_line_chart) {
val tv_num = findViewById(R.id.tv_num)
override fun refreshContent(e: Entry?, highlight: Highlight?) {
//这里的e值的是长按位置的数据，hignlight可以获取我们长按位置的x、y坐标
if (e?.y == 0F || e?.x == 0F) {
// tv_off.text = “暂无数据”
} else {
tv_num.text = “数量是 ${e?.y}”
}
super.refreshContent(e, highlight)
}
//用来设置marker和长按的时候的指示hignlight的距离
override fun getOffset(): MPPointF {
return MPPointF((-width / 2).toFloat(), (-height - 10).toFloat())
}
}

##5.2 对自定义Markerview的使用 此步骤可以放到3.2步骤最后
// Set the marker to the chart
val simpleMarkerView = SimpleMarkerView(this)
simpleMarkerView.setChartView(binding!!.lineChart)
binding!!.lineChart.marker = simpleMarkerView

#6左上角的单位 可以放到3.6最后
// Create Limit Lines 要放在 setentry后面
val lmtLineYUnit = LimitLine(binding!!.lineChart.data.getYMax() + 0.01f, “万”);
lmtLineYUnit.setLineWidth(0f)
lmtLineYUnit.setLineColor(Color.alpha(0))
lmtLineYUnit.setTextColor(0XFFBBBDC3.toInt())
lmtLineYUnit.setTextSize(10f)
lmtLineYUnit.setLabelPosition(LimitLabelPosition.LEFT_TOP)
val yAxisLeft = binding!!.lineChart.axisLeft
yAxisLeft.setDrawLimitLinesBehindData(false)
// 绘图前先清除先前的限制线，防止叠加绘制
yAxisLeft.removeAllLimitLines()
// 添加限制线
yAxisLeft.addLimitLine(lmtLineYUnit)

#7 效果图