The content of this chapter is mainly about LineChart in the MPAndroidChart open source framework
api 'com.github.PhilJay:MPAndroidChart:v3.1.0'<com.github.mikephil.charting.charts.LineChart
android:id="@+id/lineChart"
android:layout_width="match_parent"
android:layout_height="330dp" />Set up chart
Used to set the top, bottom, left, and right spacing between chart content and chart controls.
setExtraTopOffset,setExtraBottomOffset,setExtraLeftOffset,setExtraRightOffset
Enable chart content sliding (after zooming)
setTouchEnabled
Set the chart drawing time (when there is a lot of chart content, you can set it larger as appropriate to give a buffer time for data processing)
animateX
Set the XY axis to zoom together (if the content of the XY axis is relatively strong, you can set it. If the content of the two axes is relatively independent, you can set their respective zooms)
setPinchZoom
Set which side the Y-axis is displayed on (left and right)
getAxisLeft,getAxisRight //If the value is true, open it
Set line description (if there are multiple curves, you may need to provide a description for each curve)
getLegend gets the entire component drawn
getLegend().setForm //Set the icon style of the description (empty, square, circle, line)
getLegend().setVerticalAlignment //Set the horizontal position of the description component
getLegend().setHorizontalAlignment // //Set the vertical position of the description component
The above two can determine the position (upper left, upper right, lower left, lower right, middle left, middle right, center)
Legend.LegendVerticalAlignment.BOTTOM(TOP, CENTER, BOTTOM)Legend.LegendHorizontalAlignment.RIGHT(LEFT, CENTER, RIGHT)
getLegend().setOrientation //Set the display direction of the description text (horizontal and vertical)
getLegend().setXOffset //Set the distance between the description text and the X-axis
getLegend().setYOffset //Set the distance between the description text and the Y axis
getLegend().setDrawInside //Set the description text to be displayed inside or outside the chart
Set the X axis getXAxis
getXAxis().setAxisMaximum //Set the maximum value of the X axis
getXAxis().setAxisMinimum //Set the minimum value of the X axis
getXAxis().setGranularity //Set the density of the X-axis value (the difference between each value after placing it at the maximum)
getXAxis().setPosition //Set the X-axis position (TOP, BOTTOM, BOTH_SIDED, TOP_INSIDE, BOTTOM_INSIDE)
getXAxis().setDrawGridLines //Whether to draw the grid lines of the X axis (the grid lines are perpendicular to the X axis and parallel to the Y axis)
getXAxis().setAxisLineColor //Set the color of the X-axis line
getXAxis().setLabelCount(7, false) //Set the maximum number of scale values displayed on the The data in the scales and lines may not be aligned. When false, the number of displayed scales may be less than the set value. For example, if it is set to 7, only 6 may be displayed.)
getXAxis().setDrawAxisLine //Whether to draw the X axis
getXAxis().setValueFormatter //Set the scale displayed on the X-axis (if you want to display the week, the data on the X-axis is 1, 2, 3..., 7, and the displayed data is 1, 2, 3, . ..7)
Set the Y axis getAxisLeft or getAxisRight
getAxisLeft().enableGridDashedLine //Set grid line (dashed line)
getAxisLeft().setDrawGridLines //Turn on the grid lines. If not turned on here, the dotted line enable switch will be invalid.
getAxisLeft().setGranularityEnabled //Set the Y-axis fixed interval
Set highlighted text pop-up window
markerView.setChartView(lineChart) //Pass in the pop-up window layout when MarkerView is initialized
setMarker(markerView)
val tfLight = context.resources.getFont(自定义文字样式)
lineChart?.apply {
//X轴在底部,与chart底部的距离(如果需要底部文字对图标进行说明,则可能会用到该值)
//extraBottomOffset = if (isLegend) 50f else 20f
extraBottomOffset = 20f
extraTopOffset = if (isLegend) 30f else 0f
//是否开启触摸监听
setTouchEnabled(isLegend)
dragDecelerationFrictionCoef = 0.9f
isDragEnabled = true
//开启缩放功能
setScaleEnabled(true)
//绘制网格线的背景
setDrawGridBackground(false)
//setPinchZoom(true)
//绘制动画的总时长
animateX(500)
//是否开启右边Y轴
axisRight?.isEnabled = false
//设置图标的标题
setNoDataText("")
//设置X轴底部文字和图标样式
legend?.apply {
//X轴底部对线条说明的样式(方形,或者圆形等)
form = Legend.LegendForm.CIRCLE
//X轴底部文字说明的样式
typeface = tfLight
textSize = 11f
textColor = Color.WHITE
//X轴底部文字说明的位置(横向和竖向)
verticalAlignment = Legend.LegendVerticalAlignment.BOTTOM
horizontalAlignment = Legend.LegendHorizontalAlignment.RIGHT
//底部文字说明的方向
orientation = Legend.LegendOrientation.HORIZONTAL
//底部文字说明与X轴的间距
yOffset = 10f
//是否开启X轴说明
//isEnabled = isLegend
isEnabled = false
//是否绘制在图标内部
setDrawInside(true)
}
xAxis?.apply {
//X轴文字样式
typeface = tfLight
textSize = 11f
textColor = Color.parseColor("#FF5E668A")
//X轴最大值和最小值
axisMaximum = System.currentTimeMillis() / DAY_MILLS + 3f
axisMinimum = System.currentTimeMillis() / DAY_MILLS - 3f
//X轴每个值的差值(缩放时可以体现出来)
granularity = 1f
//X轴的位置
position = XAxis.XAxisPosition.BOTTOM
//是否绘制X轴的网格线(垂直于X轴)
setDrawGridLines(false)
//X轴的颜色
axisLineColor = Color.parseColor("#FFD8E5FA")
//X轴的宽度
axisLineWidth = 2f
//设置X轴显示固定条目,放大缩小都显示这个数
setLabelCount(7, false)
//是否绘制X轴
setDrawAxisLine(!isLegend)
//X轴每个刻度对应的值(展示的值和设置的值不同)
valueFormatter = object : ValueFormatter() {
override fun getFormattedValue(value: Float): String {
return SimpleDateFormat(
"MM.dd",
Locale.getDefault()
).format(Date(value.toLong() * DAY_MILLS))
}
}
}
axisLeft?.apply {
//左侧Y轴文字样式
typeface = tfLight
textColor = Color.parseColor("#FF5E668A")
//左侧Y轴的最大值和最小值
axisMaximum = if (type == 0) 210f else 150f
axisMinimum = 30f
//绘制网格线(样式虚线)
enableGridDashedLine(15f, 8f, 0f)
gridColor = Color.parseColor("#4F9FB1FF")
gridLineWidth = 1f
axisLineColor = Color.parseColor("#FFD8E5FA")
axisLineWidth = 2f
setDrawGridLines(isLegend)
setDrawAxisLine(!isLegend) //绘制左边Y轴是否显示
setDrawZeroLine(false) //是否开启0线
isGranularityEnabled = true
}
//设置选中时的文字提示
val markerView = eMarkerView(context, R.layout.view_chart_mark)
markerView.chartView = lineChart
marker = markerView
//拦截事件,防止有父布局中有其他滑动事件,引起滑动冲突
setOnTouchListener { _, event ->
parent.requestDisallowInterceptTouchEvent(true)
onTouchEvent(event)
}
}Instructions for setting the X-axis and Y-axis
For example, a description such as height (cm)
val description = Description()
description.text = desText
description.textSize = 11f
description.textColor = Color.parseColor("#FF5E668A")
description.textAlign = Paint.Align.LEFT
description.setPosition(30f, 50f) //设置某一个轴的单位
lineChart?.description = descriptionsetPosition is to set the position of the display description text. You need to obtain the relative coordinate points according to the size of the chart control.
The coordinate points here need to be converted into coordinate values using the chart control as the coordinate system, otherwise they may not be displayed.
Set data
getViewPortHandler().setMaximumScaleX //Set the maximum zoom factor of the X-axis
getViewPortHandler().setMaximumScaleY //Set the maximum zoom factor of the Y axis
zoom(maxOfx, 0f, 0f, 0f) //Set the magnification factor of an axis or value
val values = ArrayList<Entry>()
list?.forEach {
values.add(Entry(xValue, yValue))
}
lineChart?.apply {
var maxOfx = 1f
viewPortHandler.setMaximumScaleX(maxOfx)
viewPortHandler.setMaximumScaleY(4f)
zoom(maxOfx, 0f, 0f, 0f)
}
val dataSet = LineDataSet(values, chartDesText).apply {
val valuePointColor =Color.parseColor("#FF00BCC6")
color = valuePointColor //线条的颜色
setCircleColor(valuePointColor) //关键点的圆点颜色
setDrawCircles(true)
setDrawVerticalHighlightIndicator(true) //点击的时候出现竖线
setDrawHorizontalHighlightIndicator(false) //点击的时候出现横线
enableDashedHighlightLine(15f, 5f, 0f)
//选中的高亮竖线颜色
highLightColor = Color.parseColor(#FF00BCC6)
lineWidth = 2f
circleRadius = 3f
fillAlpha = 65
fillColor = ColorTemplate.getHoloBlue()
setDrawCircleHole(false)
isHighlightEnabled = true
}
val lineData = LineData(dataSet).apply {
setDrawValues(false) //是否绘制每个点的数值
setValueTextColor(Color.WHITE)
setValueTextSize(9f)
}
lineChart?.apply {
data = lineData
//移动标记点到坐标轴中间
centerViewTo(values.last().x, values.last().y, YAxis.AxisDependency.LEFT)
//选中某个点
highlightValue(values.last().x, 0)
}PS:
When there is a lot of data and it is zoomed in to the maximum, if you want to move to a certain value by default, you can use
centerViewTo(values.last().x, values.last().y, YAxis.AxisDependency.LEFT)
Select a point and highlight it to use
highlightValue(values.last().x, 0)