[Android][Java] Customize Line Chart

안녕하세요 오늘은 Line Chart를 커스터마이즈 하는 방법에 대해 소개하려고합니다.

기존의 LineChart 글을 보고 오시지 않아도 적용할 수 있게 작성되었습니다.
https://stickode.tistory.com/704

[Android][Java] LineChat 그리는법

 

1. 라이브러리 추가

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

dependencies {
    implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0'
}

2. main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.github.mikephil.charting.charts.LineChart
        android:id="@+id/linechart"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

3.MainActivity

public class MainActivity extends AppCompatActivity {
    private ActivityMainBinding bind;
    private ArrayList<Entry> datavalues1 = new ArrayList<>();
    private ArrayList<Entry> datavalues2 = new ArrayList<>();
    private ArrayList<ILineDataSet> dataSets = new ArrayList<>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
bind = ActivityMainBinding.inflate(getLayoutInflater());
        setContentView(bind.getRoot());

        // datavalues1과 datavalues2라는 두 개의 데이터 값 세트를 생성한다.
        datavalues1.add(new Entry(0, 1));
        datavalues1.add(new Entry(1, 3));
        datavalues1.add(new Entry(2, 4));
        datavalues1.add(new Entry(3, 1));

        datavalues2.add(new Entry(0, 3));
        datavalues2.add(new Entry(1, 1));
        datavalues2.add(new Entry(2, 2));
        datavalues2.add(new Entry(3, 4));

        // 두 개의 데이터 값을 가지고 LineDataSet 객체를 생성한다.
        // 각각의 데이터 값을 구분하기 위해 두 개의 라벨을 사용한다.
        LineDataSet lineDataSet1 = new LineDataSet(datavalues1, "data set1");
        LineDataSet lineDataSet2 = new LineDataSet(datavalues2, "data set2");

        // 두 개의 LineDataSet 객체를 ArrayList 에 추가한다.
        dataSets.add(lineDataSet1);
        dataSets.add(lineDataSet2);

        // 배경색을 설정한다.
        bind.linechart.setBackgroundColor(Color.GREEN);
        bind.linechart.setNoDataText("NO Data");
        bind.linechart.setNoDataTextColor(Color.BLUE);
        
        // 배경에 격자무늬를 추가해준다.
        bind.linechart.setDrawGridBackground(true);
        
        // 배경에 태두리에 강조선을 추가한다.
        bind.linechart.setDrawBorders(true);
        bind.linechart.setBackgroundColor(Color.RED);
        bind.linechart.setBorderWidth(5);
        
        // 차트 상세 설명을 설정한다.
        Description description = new Description();
        description.setText("동물원");
        description.setTextColor(Color.BLUE);
        description.setTextSize(20);
        bind.linechart.setDescription(description);

        // ArrayList 로부터 LineData 객체를 생성한다.
        LineData data = new LineData(dataSets);

        // 생성된 LineData 객체를 LineChart 뷰에 설정하고, 화면을 갱신한다.
        bind.linechart.setData(data);
        bind.linechart.invalidate();
    }

 

 

setBackgroundColor : 차트에 배경색을 설정합니다.

setNoDataText : 차트에 데이터가 없을때 보일 text 값을 설정합니다.

setDataTextColor : 차트에 데이터가 없을때 보일 text 의 색을 설정합니다.

setDrawGridBackground : 차트 배경에 격자무늬를 추가해준다.

setDrawBorders : 차트 테두리에 강조선을 추가합니다.

setBorderWidth : 강조선의 넓이를 설정합니다.

Description : 차트 상세 설명 정보를 담고 있는 객체입니다.

setDescription : Description 객체를 차트 View에 설정하고, 화면을 갱신합니다.

 

수정전

수정후