使用MPAndroidChart绘制折线图

效果图

主要代码

1. 引入依赖库

• 在工程根目录下build.gradle中的allprojects下增加:

maven { url "https://www.jitpack.io" }

• 在app工程目录下build.gradle中添加依赖:

implementation 'com.github.PhilJay:MPAndroidChart:3.1.0'

2. 布局文件中添加

3. 设置样式及数据

import android.graphics.Color
import android.graphics.DashPathEffect
import com.github.mikephil.charting.charts.LineChart
import com.github.mikephil.charting.components.Legend
import com.github.mikephil.charting.data.Entry
import com.github.mikephil.charting.data.LineData
import com.github.mikephil.charting.data.LineDataSet
import com.github.mikephil.charting.interfaces.datasets.ILineDataSet
import com.github.mikephil.charting.utils.Utils
import java.util.*

class LineChart1 {
    fun initLineChart(lineChart: LineChart) {
        //设置手势滑动事件
        //lineChart.setOnChartGestureListener(this)
        //设置数值选择监听
        //lineChart.setOnChartValueSelectedListener(this)
        //后台绘制
        lineChart.setDrawGridBackground(false)
        //设置描述文本
        lineChart.description.isEnabled = false
        //设置支持触控手势
        lineChart.setTouchEnabled(true)
        //设置缩放
        lineChart.isDragEnabled = true
        //设置推动
        lineChart.setScaleEnabled(true)
        //如果禁用,扩展可以在x轴和y轴分别完成
        lineChart.setPinchZoom(true)

        val values = getMockData()

        //设置数据
        setData(lineChart, "工作报告", values)
        //默认动画
        lineChart.animateX(2500)
        //刷新
        lineChart.invalidate()
        val legend = lineChart.legend
        // 底部描述文本前面的标志
        legend.form = Legend.LegendForm.LINE
    }

    private fun getMockData(): ArrayList {
        val values = ArrayList()
        values.add(Entry(5F, 50F))
        values.add(Entry(10F, 66F))
        values.add(Entry(15F, 120F))
        values.add(Entry(20F, 30F))
        values.add(Entry(35F, 10F))
        values.add(Entry(40F, 110F))
        values.add(Entry(45F, 30F))
        values.add(Entry(50F, 160F))
        values.add(Entry(100F, 30F))
        return values
    }

    //传递数据集
    private fun setData(lineChart: LineChart, title: String, dataList: ArrayList) {
        val lineDataSet: LineDataSet
        val lineColor = Color.parseColor("#3C89FF")
        val circleColor = Color.parseColor("#3C89FF")
        val belowLineColor = Color.parseColor("#EBF3FE")

        if (lineChart.data != null && lineChart.data.dataSetCount > 0) {
            lineDataSet = lineChart.data.getDataSetByIndex(0) as LineDataSet
            lineDataSet.values = dataList
            lineChart.data.notifyDataChanged()
            lineChart.notifyDataSetChanged()
        } else {
            // 创建一个数据集,并给它一个类型
            lineDataSet = LineDataSet(dataList, title)

            //设置折线为虚线
            lineDataSet.enableDashedLine(10f, 5f, 0f)
            lineDataSet.enableDashedHighlightLine(10f, 5f, 0f)
            lineDataSet.color = lineColor
            //设置折线交点的圆点颜色
            lineDataSet.setCircleColor(circleColor)
            //设置折线的宽度
            lineDataSet.lineWidth = 1f
            //设置折线交点的圆点半径
            lineDataSet.circleRadius = 3f
            //设置折线交点的圆点是否空心
            lineDataSet.setDrawCircleHole(true)
            lineDataSet.valueTextSize = 9f
            lineDataSet.setDrawFilled(true)
            lineDataSet.formLineWidth = 1f
            lineDataSet.formLineDashEffect = DashPathEffect(floatArrayOf(10f, 5f), 0f)
            lineDataSet.formSize = 15f
            if (Utils.getSDKInt() >= 18) {
                // 填充背景只支持18以上
                //Drawable drawable = ContextCompat.getDrawable(this, R.mipmap.ic_launcher)
                //set1.setFillDrawable(drawable)
                lineDataSet.fillColor = belowLineColor
            } else {
                lineDataSet.fillColor = Color.BLACK
            }
            val dataSets = ArrayList()
            //添加数据集
            dataSets.add(lineDataSet)

            //谁知数据
            lineChart.data = LineData(dataSets)
        }
    }
}

4. 调用

        LineChart1().initLineChart(lineChart)

完整源代码

https://gitee.com/hspbc/mpandroid-chart-demo