[안드로이드/android] 차트 라이브러리 (MPAndroidChart)

데이터들을 보기 쉽게 만들고자 차트를 구현하려고 검색한 결과 MPAndroidChart 라는 라이브러리를 많이 이용하고 있기에 적용하여 구현하였다. 제작자의 깃허브에 들어가면 많은 자료들이 있고 구글에 검색해도 한글로된 블로그 자료를 많이 찾을 수 있다.

 

https://github.com/PhilJay/MPAndroidChart

 

 

 

gradle

 

 

// repositories 추가
maven { url 'https://jitpack.io' }
// 차트 라이브러리
implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0'

 

jitpack이 추가 안되어 있다면 위의 코드를 먼저 추가해주고 라이브러리를 gradle에 등록하면 사용할 수 있다.

 

 

 activity_main.xml

 

 

<?xml version="1.0" encoding="utf-8"?>
<layout 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">
    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

        <com.github.mikephil.charting.charts.LineChart
            android:id="@+id/chartView"
            android:layout_width="360dp"
            android:layout_height="320dp"
            android:layout_gravity="center"
            android:visibility="visible"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

 

위와같이 xml에 차트를 추가하면 사용할 수 있다.

 

 

MainActivity

 

 

public class MainActivity extends AppCompatActivity {

    ActivityMainBinding binding;

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

    LineData data;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        binding = DataBindingUtil.setContentView(this,R.layout.activity_main);

		            //차트 갱신
                    binding.chartView.invalidate();
                    binding.chartView.clear();
					
                    for(int i = 0;i < 10;i++){
                       float val = (float) (Math.random() * 10);
                       valueList.add(new Entry(i, val));
                    }
                    
                    LineDataSet set1;
                    set1 = new LineDataSet(valueList,"DataSet 1");
                    ArrayList<ILineDataSet> dataSets = new ArrayList<>();
                    dataSets.add(set1);
                    LineData data = new LineData(dataSets);

                    set1.setColor(Color.BLUE);
                    set1.setLineWidth(1);
                    // x축 가져오기
                    XAxis xAxis = binding.chartView.getXAxis();
                    // x축 아래로 설정 기본은 위에 있음
                    xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
                    // x축 단위를 5로 변경
                     xAxis.setGranularity(5);
                     xAxis.setGranularityEnabled(true);

                    binding.chartView.setData(data);

    }

}

 

ArrayList<Entry> 에 10개의 랜덤한 float 값을 넣어서 이 데이터를 차트로 표시하는 코드이다. int값을 넣어도 잘 사용이 되었다.

 

직접 쓰는 코드는 runOnUiThread 를 통해 갱신을 해야 하는 상황이라 차트를 갱신해주는 코드를 추가 하였다.

 

아래의 코드를 이용해 차트의 스타일 등을 설정 할 수 있다.

// description 
binding.chartView.getDescription().setEnabled(false);
// 그래프 터치
binding.chartView.setTouchEnabled(false);
// X축으로 드래그
binding.chartView.setDragXEnabled(false);
// Y축으로 드래그
binding.chartView.setDragYEnabled(false);
// 확대
binding.chartView.setScaleEnabled(false);
// pinch zoom
binding.chartView.setPinchZoom(false);

//circle 삭제
set1.setDrawCircles(false);