美文网首页安卓开发
使用MPAndroidChart绘制折线图

使用MPAndroidChart绘制折线图

作者: 蓝不蓝编程 | 来源:发表于2020-09-03 09:03 被阅读0次

    效果图

    主要代码

    1. 引入依赖库
    • 在工程根目录下build.gradle中的allprojects下增加:
    maven { url "https://www.jitpack.io" }
    
    • 在app工程目录下build.gradle中添加依赖:
    implementation 'com.github.PhilJay:MPAndroidChart:3.1.0'
    
    1. 布局文件中添加
    <com.github.mikephil.charting.charts.LineChart
        android:id="@+id/lineChart"
        android:layout_width="match_parent"
        android:layout_height="320dp" />
    
    1. 设置样式及数据
    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<Entry> {
            val values = ArrayList<Entry>()
            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<Entry>) {
            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<ILineDataSet>()
                //添加数据集
                dataSets.add(lineDataSet)
    
                //谁知数据
                lineChart.data = LineData(dataSets)
            }
        }
    }
    
    1. 调用
            LineChart1().initLineChart(lineChart)
    

    完整源代码

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

    相关文章

      网友评论

        本文标题:使用MPAndroidChart绘制折线图

        本文链接:https://www.haomeiwen.com/subject/xaousktx.html