[안드로이드] 프래그먼트에 라이브러리를 이용한 차트 그리기

 

---

 

차트 라이브러리 모음 

https://github.com/PhilJay/MPAndroidChart

GitHub - PhilJay/MPAndroidChart: A powerful 🚀 Android chart view / graph view library, supporting line- bar- pie- radar- bubb

https://github.com/HackPlan/AndroidCharts

GitHub - HackPlan/AndroidCharts: An easy-to-use Android charts library with animation.

https://github.com/diogobernardino/WilliamChart

GitHub - diogobernardino/williamchart: Android Library to rapidly develop attractive and insightful charts in android applicatio

https://github.com/AnyChart/AnyChart-Android

 

GitHub - diogobernardino/williamchart: Android Library to rapidly develop attractive and insightful charts in android applicatio

https://github.com/blackfizz/EazeGraph

GitHub - blackfizz/EazeGraph: An Android chart and graph library

 

 

이 중에서 원하는 라이브러리를 골라 사용하시면 됩니다

 

---

 

저는 맨 위의 PhilJay/MPAndroidChart 를 사용했습니다.

 

 

들어가서 보시면 이런 내용이 나오는데 아래의 Maven Setup은 안보셔도 됩니다.

 

 

위의 repositories와 dependencies만 복사해서 build.gradle(Module)에 붙여넣기 해주시면 됩니다.

 

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

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

 

[build.gradle(Module)]

실제 코드 사용 화면입니다.

 

 

그 후 chart를 입력할 Fragment의 Layout에 차트를 입력해줍니다.

 

 

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

크기는 원하시는대로 조정하시면 됩니다.

 

[fragment_home.xml]

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".HomeFragment">

    <com.github.mikephil.charting.charts.LineChart
        android:id="@+id/chart"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/> 
        
    <TextView
        android:layout_width="match_parent"
        android:layout_height="57dp"
        android:gravity="center"
        android:text="홈"
        android:textSize="32dp"
        android:layout_gravity="bottom"/>


</FrameLayout>

레이아웃 디자인이 이렇게 뜨시면 맞게 하신 겁니다

 

 

이제 마지막으로 Fragment 창에 그래프를 입력해 줍니다.

 

 

[HomeFragment.java]

public class HomeFragment extends Fragment {

    View v;
    LineChart lineChart;
    

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);


    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        v =  inflater.inflate(R.layout.fragment_home, container, false);

        lineChart = (LineChart) v.findViewById(R.id.chart);

        List<Entry> entries = new ArrayList<Entry>();
        entries.add(new Entry(1,1));
        entries.add(new Entry(2,2));
        entries.add(new Entry(3,3));
        entries.add(new Entry(4,4));
        entries.add(new Entry(5,5));


        LineDataSet dataSet = new LineDataSet(entries, "Label");
        dataSet.setLineWidth(4); //라인 두께
        dataSet.setCircleRadius(6); // 점 크기
        dataSet.setCircleColor(Color.parseColor("#FFA1B4DC")); // 점 색깔
        dataSet.setDrawCircleHole(true); // 원의 겉 부분 칠할거?
        dataSet.setColor(Color.parseColor("#FFA1B4DC")); // 라인 색깔

        LineData lineData = new LineData(dataSet);
        lineChart.setData(lineData);
        lineChart.invalidate();

        return v;
    }
}

 

주의하실 점) Fragment창이기 때문에 onCreate가 아닌 onCreateView에서 구현해주셔야 합니다.

 

 

 

이렇게 뜨시면 맞게 하신겁니다

 

 

질문은 댓글 남겨주세요!