MPAndroidChart 图表库之快速上手LineChart(折线图)

Liumanggo
5,636 阅读4分钟

上上上个月项目中有一些数据需要用图表进行展示，包括折线图（LineChart）、柱状图（BarChart）、散点图（ScatterChart）、雷达图（RadarChart）、饼图（PieChart）。作为一名初级鶸，接到需求就很自觉地开始在github上寻找第三方库了，MPAndroidChart久负盛名（好吧，其实是网络上关于MPAndroidChart的教程是最多的容易上手），只是找了好多教程都是hello world级别入门，还是得自己去查看各API方法，效果摸一遍，真的你们写教程能不能写得详细点，还是自己也写一篇希望能够让新手们更加快速入门

Android Studio 添加MPAndroidChart依赖，build.gradle(Project)下的allprojects->repositories下:

allprojects {
    repositories {
        google()
        jcenter()
        maven { url 'https://jitpack.io' }
    }
}

build.gradle(Module)下添加dependencies:

implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0'

折线图（LineChart）涉及到的类

LineChart（折线图本身）、Legend（图例）、XAxis（X轴）、YAxis（包括左Y轴与右Y轴）、Entry（数据类）、LineDataSet（数据集，其本身在折线图上就是一条折线）、LineData（线类）。好了创建折线图的基本流程就是将要显示的数据赋值给Entry（数据类），当然数据是一组的所以用List<Entry>，之后再将List<Entry>给LineDataSet，LineDataSet再给LineData，最后再lineChart.setData(lineData)就行了。

我们先看看简单的hello world级别效果怎么写

        //无数据时显示
        lineChart.setNoDataText("没有获取到数据哦~");
        lineChart.setNoDataTextColor(Color.parseColor("#00bcef"));
        //初始化显示数据
        List<Float> floats = new ArrayList<>();
        floats.add(0.5f);
        floats.add(3f);
        floats.add(1f);
        floats.add(0.1f);
        List<Entry> entries = new ArrayList<>();
        for (int i = 0;i<floats.size();i++){
            entries.add(new Entry(i,floats.get(i)));
        }
        //将数据赋给数据集,一个数据集表示一条线
        LineDataSet lineDataSet = new LineDataSet(entries,"");
        LineData lineData = new LineData(lineDataSet);
        //不显示曲线点的具体数值
        lineData.setDrawValues(false);
        lineChart.setData(lineData);

效果是这样的：

可以说是相当不忍直视了......

别急，我们来优化一下，按着第一张效果图来，先把不需要显示的都给它去了，这表格线就不要了，显示的数据也不要了，下面那个颜色方块也去了，Description Label什么鬼，也不要了

        //无数据时显示
        lineChart.setNoDataText("没有获取到数据哦~");
        lineChart.setNoDataTextColor(Color.parseColor("#00bcef"));
        //取消缩放
        lineChart.setScaleEnabled(false);
        //不显示高亮
        lineChart.setHighlightPerTapEnabled(false);
        //不显示description
        lineChart.getDescription().setEnabled(false);
        //不显示边界
        lineChart.setDrawBorders(false);
        //不显示图例
        lineChart.getLegend().setEnabled(false);
        lineChart.setHighlightPerDragEnabled(false);
        lineChart.setExtraBottomOffset(10f);
        //获取X轴
        XAxis xAxis = lineChart.getXAxis();
        //给X轴添加标签
        xAxis.setValueFormatter(new IndexAxisValueFormatter(new String[]{"清醒","浅睡","深睡","离床"}));
        xAxis.setDrawGridLines(false);
        xAxis.setDrawAxisLine(false);
        xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
        xAxis.setTextSize(12f);
        YAxis leftYAxis = lineChart.getAxisLeft();
        leftYAxis.setAxisMinimum(0);
        leftYAxis.setEnabled(false);
        YAxis rightYAxis = lineChart.getAxisRight();
        rightYAxis.setEnabled(false);
        //初始化显示数据
        List<Float> floats = new ArrayList<>();
        floats.add(0.5f);
        floats.add(3f);
        floats.add(1f);
        floats.add(0.1f);
        List<Entry> entries = new ArrayList<>();
        for (int i = 0;i<floats.size();i++){
            entries.add(new Entry(i,floats.get(i)));
        }
        //将数据赋给数据集,一个数据集表示一条线
        LineDataSet lineDataSet = new LineDataSet(entries,"");
        LineData lineData = new LineData(lineDataSet);
        //不显示曲线点的具体数值
        lineData.setDrawValues(false);
        lineChart.setData(lineData);

看看效果：

嗯，稍微还可以了一点，对比一下代码，其实就是通过lineChart提供的方法控制图例、描述、缩放、高亮（还有动画）等效果，通过XAxis、YAxis来控制网格线的显示以及X轴、Y轴的数值或者标签显示。

接下来就是颜色填充以及平滑曲线效果啦

        //无数据时显示
        lineChart.setNoDataText("没有获取到数据哦~");
        lineChart.setNoDataTextColor(Color.parseColor("#00bcef"));
        //取消缩放
        lineChart.setScaleEnabled(false);
        //不显示高亮
        lineChart.setHighlightPerTapEnabled(false);
        //不显示description
        lineChart.getDescription().setEnabled(false);
        //不显示边界
        lineChart.setDrawBorders(false);
        //不显示图例
        lineChart.getLegend().setEnabled(false);
        lineChart.setHighlightPerDragEnabled(false);
        lineChart.setExtraBottomOffset(10f);
        //获取X轴
        XAxis xAxis = lineChart.getXAxis();
        xAxis.setValueFormatter(new IndexAxisValueFormatter(new String[]{"清醒","浅睡","深睡","离床"}));
        xAxis.setDrawGridLines(false);
        xAxis.setDrawAxisLine(false);
        xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
        xAxis.setTextSize(12f);
        YAxis leftYAxis = lineChart.getAxisLeft();
        leftYAxis.setAxisMinimum(0);
        leftYAxis.setEnabled(false);
        YAxis rightYAxis = lineChart.getAxisRight();
        rightYAxis.setEnabled(false);
        //初始化显示数据
        List<Float> floats = new ArrayList<>();
        floats.add(0.5f);
        floats.add(3f);
        floats.add(1f);
        floats.add(0.1f);
        List<Entry> entries = new ArrayList<>();
        for (int i = 0;i<floats.size();i++){
            entries.add(new Entry(i,floats.get(i)));
        }
        //将数据赋给数据集,一个数据集表示一条线
        LineDataSet lineDataSet = new LineDataSet(entries,"");
        //线颜色
        lineDataSet.setColor(Color.parseColor("#FFA2A2"));
        //线宽度
        lineDataSet.setLineWidth(1.0f);
        //显示圆点
        lineDataSet.setDrawCircles(true);
        //设置圆点颜色(外圈)
        lineDataSet.setCircleColor(Color.parseColor("#008CFF"));
        //设置圆点填充颜色
        lineDataSet.setCircleHoleColor(Color.parseColor("#008CFF"));
        //设置线条为平滑曲线
        lineDataSet.setMode(LineDataSet.Mode.HORIZONTAL_BEZIER);
        //设置直线图填充
        lineDataSet.setDrawFilled(true);
        //设置填充颜色
        lineDataSet.setFillColor(Color.parseColor("#FFA2A2"));
        LineData lineData = new LineData(lineDataSet);
        //不显示曲线点的具体数值
        lineData.setDrawValues(false);
        lineChart.setData(lineData);

OK，hello world pro效果就出现了

如果你还希望有动画效果，那么可以在lineChart.setData(lineData)之前调用lineChart.animateY(时间)、lineChart.animateX(时间)或lineChart.animateXY(时间)进行设置

结语

以上就是MPAndroidChart中的LineChart(折线图)的简单pro使用，下一篇介绍一下BarChart(柱状图的使用)

avatar
文章
阅读
粉丝