[Android] 차트 그리기 MPAndroidChart - LineChart

예전에 해커톤에서 어플리케이션을 개발할 때 MPAndroidChart를 이용해서 간단하게 안드로이드 그래프를 만든적이 있습니다.

MPAndroidChart는 GitHub에 공개되어있는 오픈소스 라이브러리입니다. 라이센스는 Apache 2.0입니다.

MPAndroidChart 깃헙 링크

깃헙에서 제공하는 예제보다 더 간단한 코드를 통해서 LineChart를 그리는 법을 알아보겠습니다.

 

일단 새로운 프로젝트를 생성합니다.

그리고 build.gradle (Module:app)에 가서 아래의 두 줄을 추가합니다.

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

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

build.gradle

 

build를 했을 때 문제가 없다면 다음으로 넘어가면 됩니다.

문제가 있다면 소스코드 추가를 잘못한 것이니 사진을 보고 다시 추가해주세요.

 

그리고 activity_main.xml과 MainActivity.java를 변경합니다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical">

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

</LinearLayout>

import com.github.mikephil.charting.charts.LineChart;
import com.github.mikephil.charting.data.Entry;
import com.github.mikephil.charting.data.LineData;
import com.github.mikephil.charting.data.LineDataSet;
import com.github.mikephil.charting.interfaces.datasets.ILineDataSet;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

    private LineChart chart;

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

        chart = findViewById(R.id.linechart);

        ArrayList<Entry> values = new ArrayList<>();

        for (int i = 0; i < 10; i++) {

            float val = (float) (Math.random() * 10);
            values.add(new Entry(i, val));
        }

        LineDataSet set1;
        set1 = new LineDataSet(values, "DataSet 1");

        ArrayList<ILineDataSet> dataSets = new ArrayList<>();
        dataSets.add(set1); // add the data sets

        // create a data object with the data sets
        LineData data = new LineData(dataSets);

        // black lines and points
        set1.setColor(Color.BLACK);
        set1.setCircleColor(Color.BLACK);

        // set data
        chart.setData(data);
    }

}

실행화면은 다음과 같습니다.

실행화면

라이브러리에서 선의 색 부터 채우기 등등 다양한 커스터마이징을 지원합니다.

제가 사용했던 설정들을 아래에 간단하게 정리해봤습니다.

chart.setBackgroundColor(Color.RED); // 그래프 배경 색 설정
set1.setColor(Color.BLACK); // 차트의 선 색 설정
set1.setCircleColor(Color.BLACK); // 차트의 points 점 색 설정

set1.setDrawFilled(true); // 차트 아래 fill(채우기) 설정
set1.setFillColor(Color.BLACK); // 차트 아래 채우기 색 설정

---

잘못된 내용이 있다면 언제든지 댓글이나 메일로 알려주시면 감사하겠습니다.

이 포스팅이 도움이 되었다면 공감 부탁드립니다.

궁금한 점은 언제든지 댓글 남겨주시면 답변해드리겠습니다:D