MPAndroidChart实现LineChart（折线图）

一、参照油管视频做法

　　1.引入依赖

　　新建Android工程，然后分别在build.gradle(Project:...)添加

maven { url 'https://jitpack.io' }

　　在build.fradle(Module.app)上添加，（官方推荐）

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

　　配置完成后点击AS 中File菜单的Sync Projects...或直接点击这个图标

　　2.布局文件和java文件的代码

　　现在打开布局文件，输入LineChart会有提示的，这说明配置成功了。

　　.xml文件

 1 <?xml version="1.0" encoding="utf-8"?>

 2 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

 3     android:layout_width="match_parent"

 4     android:layout_height="match_parent">

 5

 6     <com.github.mikephil.charting.charts.LineChart

 7         android:id="@+id/line_chart"

 8         android:layout_width="match_parent"

 9         android:layout_height="match_parent"/>

10

11 </RelativeLayout>

　　.java文件

 1 package com.example.learnmpandchart;

 2

 3 import androidx.appcompat.app.AppCompatActivity;

 4

 5 import android.os.Bundle;

 6

 7 import com.github.mikephil.charting.charts.LineChart;

 8 import com.github.mikephil.charting.data.Entry;

 9 import com.github.mikephil.charting.data.LineData;

10 import com.github.mikephil.charting.data.LineDataSet;

11 import com.github.mikephil.charting.interfaces.datasets.ILineDataSet;

12

13 import java.util.ArrayList;

14 import java.util.Map;

15

16 public class MainActivity extends AppCompatActivity {

17

18     LineChart mpLineChart;

19

20     @Override

21     protected void onCreate(Bundle savedInstanceState) {

22         super.onCreate(savedInstanceState);

23         setContentView(R.layout.activity_main);

24

25         mpLineChart = (LineChart) findViewById(R.id.line_chart);//找到折线图控件

26         LineDataSet lineDataSet1 = new LineDataSet(dataValues1(),"Data Set 1");

27         ArrayList<ILineDataSet> dataSets = new ArrayList<>();

28         dataSets.add(lineDataSet1);

29

30         LineData data = new LineData(dataSets);

31         mpLineChart.setData(data);

32         mpLineChart.invalidate();

33     }

34

35     private ArrayList<Entry> dataValues1() {

36         ArrayList<Entry> dataVals = new ArrayList<Entry>();

37         dataVals.add(new Entry(0,20));

38         dataVals.add(new Entry(1,24));

39         dataVals.add(new Entry(2,2));

40         dataVals.add(new Entry(3,10));

41         dataVals.add(new Entry(4,28));

42

43         return dataVals;

44     }

45 }

点击运行后就完成了。

　　（以上步骤全参考至油管视频，链接如下）

　　油管上教程https://www.youtube.com/playlist?list=PLFh8wpMiEi89LcBupeftmAcgDKCeC24bJ

二、官方文档介绍方法

　　在LineChart章节中，官方的列子是这样的（机翻）例如，您可能希望在一个线型图中显示两家不同公司在一年内的季度收入。在这种情况下，建议创建两个不同的LineDataSet对象，每个对象包含四个值(每个季度一个值)。

　　附上代码.java文件

 1 package com.example.learnmpandchart;

 2

 3 import androidx.appcompat.app.AppCompatActivity;

 4

 5 import android.os.Bundle;

 6

 7 import com.github.mikephil.charting.charts.LineChart;

 8 import com.github.mikephil.charting.components.AxisBase;

 9 import com.github.mikephil.charting.components.XAxis;

10 import com.github.mikephil.charting.components.YAxis;

11 import com.github.mikephil.charting.data.Entry;

12 import com.github.mikephil.charting.data.LineData;

13 import com.github.mikephil.charting.data.LineDataSet;

14 import com.github.mikephil.charting.formatter.ValueFormatter;

15 import com.github.mikephil.charting.interfaces.datasets.ILineDataSet;

16

17 import java.util.ArrayList;

18 import java.util.List;

19

20 public class MainActivity2 extends AppCompatActivity {

21

22     LineChart mplinechart2;//布局文件折线图的名字

23     List<Entry> valsComp1  = new ArrayList<Entry>();//创建类型为Entry的列表保存公司1的数值

24     List<Entry> valsComp2  = new ArrayList<Entry>();//公司2的数值

25

26     @Override

27     protected void onCreate(Bundle savedInstanceState) {

28         super.onCreate(savedInstanceState);

29         setContentView(R.layout.activity_main2);

30

31         mplinechart2 = (LineChart) findViewById(R.id.line_chart2);//找到折线图

32

33         //公司1的5个数据点，x横坐标，y纵坐标

34         Entry c1el = new Entry(0f,100000f);

35         valsComp1.add(c1el);

36         Entry c1e2 = new Entry(1f,120000f);

37         valsComp1.add(c1e2);

38         Entry c1e3 = new Entry(2f,140000f);

39         valsComp1.add(c1e3);

40         Entry c1e4 = new Entry(3f,160000f);

41         valsComp1.add(c1e4);

42         Entry c1e5 = new Entry(4f,180000f);

43         valsComp1.add(c1e5);

44

45         //公司2的5个数据点

46         Entry c2e1 = new Entry(0f,200000f);

47         valsComp2.add(c2e1);

48         Entry c2e2 = new Entry(1f,220000f);

49         valsComp2.add(c2e2);

50         Entry c2e3 = new Entry(2f,240000f);

51         valsComp2.add(c2e3);

52         Entry c2e4 = new Entry(3f,260000f);

53         valsComp2.add(c2e4);

54         Entry c2e5 = new Entry(4f,280000f);

55         valsComp2.add(c2e5);

56

57         //创建LineDataSet对象

58         LineDataSet setComp1 = new LineDataSet(valsComp1,"Company 1");

59         setComp1.setAxisDependency(YAxis.AxisDependency.LEFT);

60         LineDataSet setComp2 = new LineDataSet(valsComp2,"Company2");

61         setComp2.setAxisDependency(YAxis.AxisDependency.LEFT);

62

63         //使用接口ILineDataSet

64         List<ILineDataSet> dataSets = new ArrayList<ILineDataSet>();

65         dataSets.add(setComp1);

66         dataSets.add(setComp2);

67

68         LineData data = new LineData(dataSets);

69         mplinechart2.setData(data);//将数据塞入折线图中

70         mplinechart2.invalidate();//刷新，不刷新显示不出来

71

72         //设置x轴坐标的名称，Q表示4个不同的季度

73         final String[] quarters = new String[] {"Q1","Q2","Q3","Q4","Q1"};

74

75         //通过ValueFormatter类添加更多关于x轴的描述

76         ValueFormatter formatter = new ValueFormatter() {

77             @Override

78             public String getAxisLabel(float value, AxisBase axis) {

79                 return quarters[(int) value];

80             }

81         };

82

83         XAxis xAxis = mplinechart2.getXAxis();

84         xAxis.setGranularity(1f);//最小轴步，从1开始

85         xAxis.setValueFormatter(formatter);

86     }

87 }

　　.xml文件

 1 <?xml version="1.0" encoding="utf-8"?>

 2 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

 3     android:layout_width="match_parent"

 4     android:layout_height="match_parent">

 5

 6     <com.github.mikephil.charting.charts.LineChart

 7         android:id="@+id/line_chart2"

 8         android:layout_width="match_parent"

 9         android:layout_height="match_parent"/>

10

11 </RelativeLayout>

　　第二步骤全部参考至，官方文档https://weeklycoding.com/mpandroidchart-documentation/

17:09:04

巴特西

MPAndroidChart实现LineChart（折线图）

最新文章

热门文章