Android图表控件MPAndroidChart——曲线图LineChart的使用（多条曲线）

最新推荐文章于 2024-08-24 07:29:19 发布

i_a_jun

最新推荐文章于 2024-08-24 07:29:19 发布

阅读量5.4k

点赞数 6

分类专栏： android 文章标签： android 曲线图 MPAndroidChart

android 专栏收录该内容

127 篇文章 2 订阅

订阅专栏

发现最新的MPAndroidChart和以前版本的使用有一些差距，就写下了现在新版的使用方法

Android图表控件MPAndroidChart的简单介绍（MPAndroidChart3.0）

Android图表控件MPAndroidChart——曲线图LineChart的使用（多条曲线）

Android图表控件MPAndroidChart——曲线图LineChart（多条曲线）动态添加数据

Android图表控件MPAndroidChart——柱状图BarChart的使用（多条柱状图）

Android图表控件MPAndroidChart——曲线图+柱状图 CombinedChart的使用

Android图表控件MPAndroidChart——源码修改实现曲线图X轴直尺刻度样式

本文相关代码

一.效果图

1.一条曲线图，带限制线

2.多条曲线图

二.MPAndroidChart的使用

MPAndroidChart在github上16.6K个star，是一款十分强大的图表框架。

地址：https://github.com/PhilJay/MPAndroidChart

1.Android Studio中依赖：

根目录build.gradle文件中加入：

allprojects {
    repositories {
        maven { url "https://jitpack.io" }
    }
}

在app的build.gradle上加入：

dependencies {
    compile 'com.github.PhilJay:MPAndroidChart:v3.0.2'
}

2.LineChart涉及到的常用类

X轴——XAxis

Y轴——YAxis

限制线——LimitLine

曲线描述——Legend

图表描述(可当作X轴描述)——Description

3.具体代码

想要显示曲线图需要

a).得到LineChart对象

b).得到Entry对象，此处添加（X，Y）数据

c).得到LineDataSet对象（一个LineDataSet对象代表一条线）

d).得到LineData对象并添加LineDataSet对象

e).设置数据，显示图表：lineChart.setData(lineData)

写了一个LineChart管理类

public class LineChartManager {

    private LineChart lineChart;
    private YAxis leftAxis;   //左边Y轴
    private YAxis rightAxis;  //右边Y轴
    private XAxis xAxis;      //X轴

    public LineChartManager(LineChart mLineChart) {
        this.lineChart = mLineChart;
        leftAxis = lineChart.getAxisLeft();
        rightAxis = lineChart.getAxisRight();
        xAxis = lineChart.getXAxis();
    }

    /**
     * 初始化LineChart
     */
    private void initLineChart() {
        lineChart.setDrawGridBackground(false);
        //显示边界
        lineChart.setDrawBorders(true);

        //设置动画效果
        lineChart.animateY(1000, Easing.EasingOption.Linear);
        lineChart.animateX(1000, Easing.EasingOption.Linear);

        //折线图例 标签 设置
        Legend legend = lineChart.getLegend();
        legend.setForm(Legend.LegendForm.LINE);
        legend.setTextSize(11f);
        //显示位置
        legend.setVerticalAlignment(Legend.LegendVerticalAlignment.BOTTOM);
        legend.setHorizontalAlignment(Legend.LegendHorizontalAlignment.LEFT);
        legend.setOrientation(Legend.LegendOrientation.HORIZONTAL);
        legend.setDrawInside(false);

        //XY轴的设置
        //X轴设置显示位置在底部
        xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
        xAxis.setAxisMinimum(0f);
        xAxis.setGranularity(1f);
        //保证Y轴从0开始，不然会上移一点
        leftAxis.setAxisMinimum(0f);
        rightAxis.setAxisMinimum(0f);
    }

    /**
     * 初始化曲线 每一个LineDataSet代表一条线
     *
     * @param lineDataSet
     * @param color
     * @param mode        折线图是否填充
     */
    private void initLineDataSet(LineDataSet lineDataSet, int color, boolean mode) {
        lineDataSet.setColor(color);
        lineDataSet.setCircleColor(color);
        lineDataSet.setLineWidth(1f);
        lineDataSet.setCircleRadius(3f);
        //设置曲线值的圆点是实心还是空心
         lineDataSet.setDrawCircleHole(false);
        lineDataSet.setValueTextSize(9f);
        //设置折线图填充
         lineDataSet.setDrawFilled(mode);
        lineDataSet.setFormLineWidth(1f);
        lineDataSet.setFormSize(15.f);
        //线模式为圆滑曲线（默认折线）
        lineDataSet.setMode(LineDataSet.Mode.CUBIC_BEZIER);
    }

    /**
     * 展示折线图(一条)
     *
     * @param xAxisValues
     * @param yAxisValues
     * @param label
     * @param color
     */
    public void showLineChart(List<Float> xAxisValues, List<Float> yAxisValues, String label, int color) {
        initLineChart();
        ArrayList<Entry> entries = new ArrayList<>();
        for (int i = 0; i < xAxisValues.size(); i++) {
            entries.add(new Entry(xAxisValues.get(i), yAxisValues.get(i)));
        }
        // 每一个LineDataSet代表一条线
        LineDataSet lineDataSet = new LineDataSet(entries, label);
        initLineDataSet(lineDataSet, color, true);

        ArrayList<ILineDataSet> dataSets = new ArrayList<>();
        dataSets.add(lineDataSet);
        LineData data = new LineData(dataSets);
        //设置X轴的刻度数
        xAxis.setLabelCount(xAxisValues.size(), true);
        lineChart.setData(data);
    }

    /**
     * 展示线性图(多条)
     *
     * @param xAxisValues
     * @param yAxisValues 多条曲线Y轴数据集合的集合
     * @param labels
     * @param colours
     */
    public void showLineChart(List<Float> xAxisValues, List<List<Float>> yAxisValues, List<String> labels, List<Integer> colours) {
        initLineChart();
        ArrayList<ILineDataSet> dataSets = new ArrayList<>();
        for (int i = 0; i < yAxisValues.size(); i++) {
            ArrayList<Entry> entries = new ArrayList<>();
            for (int j = 0; j < yAxisValues.get(i).size(); j++) {
                if (j >= xAxisValues.size()) {
                    j = xAxisValues.size() - 1;
                }
                entries.add(new Entry(xAxisValues.get(j), yAxisValues.get(i).get(j)));
            }
            LineDataSet lineDataSet = new LineDataSet(entries, labels.get(i));

            initLineDataSet(lineDataSet, colours.get(i), false);
            dataSets.add(lineDataSet);
        }
        LineData data = new LineData(dataSets);
        xAxis.setLabelCount(xAxisValues.size(), true);
        lineChart.setData(data);
    }

    /**
     * 设置Y轴值
     *
     * @param max
     * @param min
     * @param labelCount
     */
    public void setYAxis(float max, float min, int labelCount) {
        if (max < min) {
            return;
        }
        leftAxis.setAxisMaximum(max);
        leftAxis.setAxisMinimum(min);
        leftAxis.setLabelCount(labelCount, false);

        rightAxis.setAxisMaximum(max);
        rightAxis.setAxisMinimum(min);
        rightAxis.setLabelCount(labelCount, false);
        lineChart.invalidate();
    }

    /**
     * 设置X轴的值
     *
     * @param max
     * @param min
     * @param labelCount
     */
    public void setXAxis(float max, float min, int labelCount) {
        xAxis.setAxisMaximum(max);
        xAxis.setAxisMinimum(min);
        xAxis.setLabelCount(labelCount, true);

        lineChart.invalidate();
    }

    /**
     * 设置高限制线
     *
     * @param high
     * @param name
     */
    public void setHightLimitLine(float high, String name, int color) {
        if (name == null) {
            name = "高限制线";
        }
        LimitLine hightLimit = new LimitLine(high, name);
        hightLimit.setLineWidth(2f);
        hightLimit.setTextSize(10f);
        hightLimit.setLineColor(color);
        hightLimit.setTextColor(color);
        leftAxis.addLimitLine(hightLimit);
        lineChart.invalidate();
    }

    /**
     * 设置低限制线
     *
     * @param low
     * @param name
     */
    public void setLowLimitLine(int low, String name) {
        if (name == null) {
            name = "低限制线";
        }
        LimitLine hightLimit = new LimitLine(low, name);
        hightLimit.setLineWidth(4f);
        hightLimit.setTextSize(10f);
        leftAxis.addLimitLine(hightLimit);
        lineChart.invalidate();
    }

    /**
     * 设置描述信息
     *
     * @param str
     */
    public void setDescription(String str) {
        Description description = new Description();
        description.setText(str);
        lineChart.setDescription(description);
        lineChart.invalidate();
    }
}

XML中

<?xml version="1.0" encoding="utf-8"?>
<ScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <com.github.mikephil.charting.charts.LineChart
            android:id="@+id/line_chart1"
            android:layout_width="match_parent"
            android:layout_height="380dp"/>

        <com.github.mikephil.charting.charts.LineChart
            android:id="@+id/line_chart2"
            android:layout_width="match_parent"
            android:layout_height="380dp"/>
    </LinearLayout>
</ScrollView>

Activity中

@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_line_chart);

    LineChart lineChart1 = (LineChart) findViewById(R.id.line_chart1);
    LineChart lineChart2 = (LineChart) findViewById(R.id.line_chart2);

    LineChartManager lineChartManager1 = new LineChartManager(lineChart1);
    LineChartManager lineChartManager2 = new LineChartManager(lineChart2);

    //设置x轴的数据
    ArrayList<Float> xValues = new ArrayList<>();
    for (int i = 0; i <= 10; i++) {
        xValues.add((float) i);
    }

    //设置y轴的数据()
    List<List<Float>> yValues = new ArrayList<>();
    for (int i = 0; i < 4; i++) {
        List<Float> yValue = new ArrayList<>();
        for (int j = 0; j <= 10; j++) {
            yValue.add((float) (Math.random() * 80));
        }
        yValues.add(yValue);
    }

    //颜色集合
    List<Integer> colours = new ArrayList<>();
    colours.add(Color.GREEN);
    colours.add(Color.BLUE);
    colours.add(Color.RED);
    colours.add(Color.CYAN);

    //线的名字集合
    List<String> names = new ArrayList<>();
    names.add("折线一");
    names.add("折线二");
    names.add("折线三");
    names.add("折线四");

    //创建多条折线的图表
    lineChartManager1.showLineChart(xValues, yValues.get(0), names.get(1), colours.get(3));
    lineChartManager1.setDescription("温度");
    lineChartManager1.setYAxis(100, 0, 11);
    lineChartManager1.setHightLimitLine(70,"高温报警",Color.RED);

    lineChartManager2.showLineChart(xValues, yValues, names, colours);
    lineChartManager2.setYAxis(100, 0, 11);
    lineChartManager2.setDescription("温度");
}

三.使用中遇到的一些问题

X轴的刻度数量设置：

xAxis.setLabelCount(xAxisValues.size(), true);

X轴的位置显示

//X轴设置显示位置在底部
xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);

线条描述Legend的显示位置等相关设置

//折线图例 标签 设置
Legend legend = lineChart.getLegend();
//形状
legend.setForm(Legend.LegendForm.LINE);
legend.setTextSize(11f);
//显示位置
legend.setVerticalAlignment(Legend.LegendVerticalAlignment.BOTTOM);
legend.setHorizontalAlignment(Legend.LegendHorizontalAlignment.LEFT);
legend.setOrientation(Legend.LegendOrientation.HORIZONTAL);
legend.setDrawInside(false);

线显示的模式曲线还是折线

//线模式为圆滑曲线（默认折线）
lineDataSet.setMode(LineDataSet.Mode.CUBIC_BEZIER);

线圆点的设置

//设置圆心半径
lineDataSet.setCircleRadius(3f);
//设置曲线值的圆点是实心还是空心
lineDataSet.setDrawCircleHole(false);

Y轴的起始点并没有挨着X轴

//保证Y轴从0开始，不然会上移一点
leftAxis.setAxisMinimum(0f);
rightAxis.setAxisMinimum(0f);

曲线显示的是float类型，怎样去除小数点呢？

可以在设置曲线 LineDataSet时更改数据类型，显示整数

lineDataSet.setValueFormatter(new IValueFormatter() {
    @Override
    public String getFormattedValue(float value, Entry entry, int dataSetIndex, ViewPortHandler viewPortHandler) {
        int IValue = (int) value;
        return String.valueOf(IValue);
    }
});