LineChart(折线图) 的简单使用

这些代码在最后面噢！

LineChart依赖

1. 首先在app中的dependencies 中复制下面这行依赖

implementation ‘com.github.PhilJay:MPAndroidChart:v3.1.0’

2. 然后再项目的build.gradle 中allprojects的repositories 复制下面这句
   maven { url “https://jitpack.io” }
   

代码

我们话不多说上代码，几行代码就可以简单的LineChart(折线图)

XML

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

</com.github.mikephil.charting.charts.LineChart>

JAVA代码

public class MainActivity extends AppCompatActivity {
   

    private LineChart lineChart;
    List<Entry> list = new ArrayList<>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
   
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();//初始化控件
        initData();//初始化数据
        initChart();//数据设置
    }

    private void initChart() {
   
        LineData lineData = new LineData();// //线的总管理
	lineData.addDataSet(one);//每加一条就add一次
	lineChart.setData(lineData);//把线条设置给你的lineChart上
	lineChart.invalidate();//刷新
    }

    private void initData() {
   
        //循环添加设置x轴和y轴的点
        for (int i = 0; i < 12; i++) {
   
            //Random().nextInt(300)) 是随机0到300之间的数但并不会取到300
            list.add(new Entry(i,new Random().nextInt(300)));
        }
    }

    private void initView() {
   
        lineChart = (LineChart) findViewById(R.id.lineChart);
    }
}

效果图

经过几行代码就可以实现如下的效果：
当然这种简简单单的效果很多人都不会满意于此的
下面我来介绍些方法来美化折线图

LineChart 的线的一些简单属性设置

我们先来看一下效果图

这次使用了两根线方便使用一个效果图多说一些属性设置

代码如下

其中就initChart改变了，其中listTwo自己新建一个list集合，添加进去数据就可以，和上面listOne一样

private void initChart() {
   
    LineDataSet one = new LineDataSet(listOne, "One");//将数据赋值到你的线条上
    LineDataSet two = new LineDataSet(listTwo, "Two");//将数据赋值到你的线条上

    one.setCircleColor(Color.parseColor("#67BCFF"));//设置点的颜色
    one.setColor(Color.parseColor("#67BCFF"));//设置线的颜色
    one.setDrawCircleHole(false);//设置绘制点是空心还是实心,默认是空心（true），实心为false

    two.setHighlightEnabled(true);//设置哪一条线在最上面
    two.setCircleColor(Color.parseColor("#67BCFF"));//设置点的颜色
    two.setColor(Color.parseColor("#F44336"));//设置线的颜色
    two.setDrawCircles(false);//设置是否绘制点，默认是true  
    two.setDrawValues(false);//是否绘制点上的文字，默认为true
    
    LineData lineData = new LineData();// //线的总管理
    lineData.addDataSet(one);//每加一条就add一次
    lineData.addDataSet(two);
    lineChart.setData(lineData);//把线条设置给你的lineChart上
    lineChart.invalidate();//刷新
}

关于Mode的设置

代码

其中更改的有

private void initChart() {
   
    LineDataSet one = new LineDataSet(listOne, "One");//将数据赋值到你的线条上
    LineDataSet two = new LineDataSet(listTwo, "Two");//将数据赋值到你的线条上
    LineDataSet three = new LineDataSet(listThree, "Three");//将数据赋值到你的线条上
    LineDataSet four = new LineDataSet(listFour, "Four");//将数据赋值到你的线条上

    one.setCircleColor(Color.parseColor("#67BCFF"));//设置点的颜色
    one.setColor(Color.parseColor("#67BCFF"));//设置线的颜色
    one.setDrawCircles(false);//设置是否绘制点，默认是true
    one.setMode(LineDataSet.Mode.LINEAR);//设置Mode为直线，这也是默认的Mode

    two.setCircleColor(Color.parseColor("#67BCFF"));//设置点的颜色
    two.setColor(Color.parseColor("#F44336"));//设置线的颜色
    two.setDrawCircles(false);//设置是否绘制点，默认是true
    two.setMode(LineDataSet.Mode.HORIZONTAL_BEZIER);//设置Mode为水平的贝塞尔曲线 (这个Mode的弧度比较小)

    three.setCircleColor(Color.parseColor("#8BC34A"));//设置点的颜色
    three.setColor(Color.parseColor("#8BC34A"));//设置线的颜色
    three.setDrawCircles(false);//设置是否绘制点，默认是true
    three.setMode(LineDataSet.Mode.CUBIC_BEZIER);//设置Mode为立体的贝塞尔曲线（这个Mode的弧度比较大）

    four.setCircleColor(Color.parseColor("#9C27B0"));//设置点的颜色
    four.setColor(Color.parseColor("#9C27B0"));//设置线的颜色
    four.setDrawCircles(false);//设置是否绘制点，默认是true
    four.setMode(LineDataSet.Mode.STEPPED);//设置Mode为STEPPED这种mode方便与上一个数据进行对比



    LineData lineData = new LineData();// //线的总管理
    lineData.addDataSet(one);//每加一条就add一次
    lineData.addDataSet(two);
    lineData.addDataSet(three);
    lineData.addDataSet(four);
    lineChart.setData(lineData);//把线条设置给你的lineChart上
    lineChart.invalidate();//刷新
}

private void initData() {
   
    //循环添加设置x轴和y轴的点
    for (int i = 0; i < 12; i++) {
   
        //Random().nextInt(300)) 是随机0到300之间的数但并不会取到300
        //new Random().nextInt(1000-800)+800+1)是1000到800之间的随机数 式子random.nextInt(max - min) + min + 1
        listOne.add(new Entry(i,new Random().nextInt(1000-800)+800+1));
        listTwo.add(new Entry(i,new Random().nextInt(700-500)+500+1));
        listThree.add(new Entry(i,new Random().nextInt(500-200)+200+1));
        listFour.add(new Entry(i,new Random().nextInt(200)));
    }
}

效果图

这其中使用了四根线方便我们对不同mode进行对比和查看

我觉得线的属性差不多就说这么多吧，下面是关于线后面的x轴和y轴的属性的设置,以及描述

x轴和y轴的属性的设置,以及描述

效果图

代码

public class MainActivity extends AppCompatActivity {
   

    private LineChart lineChart;
    List<Entry> listOne = new ArrayList<>();


    @Override
    protected void onCreate(Bundle savedInstanceState) {
   
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();//初始化控件
        initData