MpAndroidChart之lineChart的基本使用

老规矩，现来一波效果图，后续咱们文章也是讲解如果实现效果图对应的效果。

效果看着还不错吧，这里是使用的一个很火的图表控件进行绘制的， MpandroidChart

https://github.com/PhilJay/MPAndroidChart

使用这个开源的图表控件，可以快速帮我们实现很多炫酷的效果，比如下面的


在接下来的一小段时间，我将从基本的控件使用，逐步到源码分析和使用踩坑，整体过一波。

1、基本绘制

我们今天绘制目标是绘制中最简单的LineChart，虽然LineChart看起来比较简单，但是可以帮助我们理清楚MpandroidChart的基本使用方式，帮助我们快速了解一些基本的属性。

我在我们最上面的图上标注了5个点，先对着图表说明下，他对应的是mpandroidchart中的什么属性。

• 1-标示的是y轴左边部分，对应的是axisLeft
• 2-标示的是x轴，对应的是xAxis
• 5-标示的是x轴的label，可以使用drawLabel进行绘制
• 3-对应的是legend，标示图例
• 4-这里是我们的主角了，想要绘制的线

下面上实现代码，代码里面加了属性注释，方便对照属性

<com.github.mikephil.charting.charts.LineChart
            android:id="@+id/lineChartView"
            android:layout_width="match_parent"
            android:layout_height="300dip" />

lineChartView2.description.text = ""
        lineChartView2.description.textColor = Color.RED
        lineChartView2.description.textSize = 16F
        lineChartView2.setNoDataText("无可用数据")  //没数据的时候展示
        lineChartView2.setDrawBorders(false)// 是否绘制边框
        lineChartView2.animateX(500)  //x轴动画
        lineChartView2.setTouchEnabled(true)  //设置支持触摸
        lineChartView2.setScaleEnabled(true)  //是否支持缩放，默认true
        lineChartView2.isDragEnabled = true //是否支持拖拽
        lineChartView2.isScaleXEnabled = true //是否支持x轴缩放
        lineChartView2.isScaleYEnabled = true //是否支持y轴缩放
        lineChartView2.setPinchZoom(true)  //是否支持x、y轴同时缩放，默认为false
        lineChartView2.isDoubleTapToZoomEnabled = true //是否支持双击屏幕放大，默认true
        lineChartView2.isHighlightPerDragEnabled = true  //是否拖拽高亮线（数据点和坐标的提示线），默认true
        lineChartView2.isDragDecelerationEnabled = true //拖拽滚动时，手放开是否会持续滚动，默认true，false是拖动到那算那
        lineChartView2.dragDecelerationFrictionCoef = 0.99F //和上面的属性相配合，配置持续滚动的速度快慢，区间【0-1】0表示立即停止

        //绘制x轴
        val xAxis = lineChartView2.xAxis
        xAxis.position = XAxis.XAxisPosition.BOTTOM //设置x轴位置
        xAxis.axisMinimum = 0F //设置x轴最小值
        xAxis.textSize = 14F
        xAxis.textColor = Color.RED
        xAxis.isEnabled = true //是否显示x轴是否禁用
        xAxis.setDrawLabels(true) //设置x轴标签展示
        xAxis.setDrawGridLines(true) //设置设置x轴上每个对应的点的竖线
        xAxis.enableAxisLineDashedLine(2F, 2F, 2F) //竖线 -虚线样式
        xAxis.labelRotationAngle = 30F //设置x轴标签的旋转角度

        //绘制y轴
        val yAxisLeft = lineChartView2.axisLeft
        yAxisLeft.textSize = 14F
        yAxisLeft.axisMinimum = 0F
        val yAxisRight = lineChartView2.axisRight
        yAxisRight.isEnabled = false

        val lineDataEntities = ArrayList<Entry>()
        val random = Random(10)
        for (index in 1 until 20) {
            lineDataEntities.add(Entry(index.toFloat(), random.nextFloat()))
        }

        val lineDataSet = LineDataSet(lineDataEntities, "股票走势曲线")
        lineDataSet.highLightColor = Color.RED  //设置高亮线的颜色
        lineDataSet.color = Color.BLACK  //折线颜色
        lineDataSet.setCircleColor(Color.BLUE)  //设置交点的圆圈颜色
        lineDataSet.setDrawCircles(false)  //是否绘制交点
        lineDataSet.setDrawValues(false)  //是否显示交叉点的数值
        lineDataSet.valueTextColor = Color.CYAN  //设置交叉点上的值的颜色
        lineDataSet.valueTextSize = 14F //设置交叉点上值的字体大小
        lineDataSet.mode = LineDataSet.Mode.CUBIC_BEZIER //设置平滑曲线
        lineDataSet.fillColor = Color.parseColor("#F14400")
        lineDataSet.setDrawFilled(true)

        val lineData = LineData(lineDataSet)
        lineChartView2.data = lineData
        lineChartView2.invalidate()

2、Marker使用

如果你突发奇想，想要可以长按的时候，展示当前按的位置的数据。不要担心，mpandroidchart作为一个强大的图表库，他是完全可以满足你的。

那么，marker是时候登场了。

使用 marker其实很简单。只需要3步。

• 1、继承MarkView，在refreshContent(e: Entry?, highlight: Highlight?)中构造你要展示的数据内容。
• 2、使用lineChartView.marker = 你的marker，将marker和图表绑定到一起。
• 3、最关键的一步，运行代码，查看效果。

class SimpleMarkerView(context: Context?) :
    MarkerView(context, R.layout.simple_marker_view) {

    override fun refreshContent(e: Entry?, highlight: Highlight?) {
        //这里的e值的是长按位置的数据，hignlight可以获取我们长按位置的x、y坐标
        if (e?.y == 0F || e?.x == 0F) {
            tv_off.text = "暂无数据"
        } else {
            tv_off.text = "第${e?.x}天支出${e?.y}元"
        }
        super.refreshContent(e, highlight)
    }

    //用来设置marker和长按的时候的指示hignlight的距离
    override fun getOffset(): MPPointF {
        return MPPointF((-width / 2).toFloat(), (-height).toFloat())
    }
}

lineChartView.marker = SimpleMarkerView(this)

这里多说两句废话，或许是对你有用的，如果你想让长按的marker在手指离开后自动小时，可以自己通过手势实现。

3、格式化x轴和y轴的数据展示

如果你细心的画，肯定会发现，我们数据的x轴和y轴数据展示不一样，x轴是xx天的格式展示。这种是怎么实现的呢？

这里就要用到坐标轴的格式化展示了。

xAxis.valueFormatter = object : ValueFormatter() {
            override fun getFormattedValue(value: Float): String {
                return "${lineEntities[value.toInt()].x}天"
            }
        }

4、设置线条区域全填充、设置渐变

要实现这两个功能，也很简答，首先是全填充。

lineDataSet.setDrawFilled(true)

可以直接使用LineDataSet的属性实现。同样，如果想要设置渐变的话，可以使用lineDataSet.fillDrawable设置一个drawable对象。