관리 메뉴

막내의 막무가내 프로그래밍 & 일상

[안드로이드] 원형차트(Radar Chart) 본문

안드로이드/자바 & Previous

[안드로이드] 원형차트(Radar Chart)

막무가내막내 2020. 1. 5. 00:45
728x90

 

 

안드로이드에서 차트라이브러리는 그렇게 많지는 않은 것 같다.

그 중 내가 아는것 중 가장 유명한 라이브러리인 MPAndroidChart의 Radar Chart에 소개할려한다.

 

https://github.com/PhilJay/MPAndroidChart

 

PhilJay/MPAndroidChart

A powerful 🚀 Android chart view / graph view library, supporting line- bar- pie- radar- bubble- and candlestick charts as well as scaling, dragging and animations. - PhilJay/MPAndroidChart

github.com

원형 차트 말고도 여러 차트가 구현되어있으므로 차트를 만들려고 하시는분들은 사용하시면 좋을 것 같다.

 

 

 

 

먼저 위와 같은 차트를 구현할려고 한다.

 

 

1. 해당 라이브러리를 추가해준다.

implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0'
allprojects {
    repositories {
        google()
        jcenter()
        maven { url "https://jitpack.io" }
    }
}

 

 

 

2. xml

<?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"
    android:orientation="vertical"
    tools:context=".activities.MapSearchDetailActivity"
    >

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


</LinearLayout>

 

 

 

3. java

//xml
    RadarChart radarChart;
     radarChart = findViewById(R.id.mapsearchdetail_radar_chart);
//차트 데이터 생성
    private ArrayList<RadarEntry> dataValue(){
        ArrayList<RadarEntry> dataVals = new ArrayList<>();
        dataVals.add(new RadarEntry(bigMartList.size()));
        dataVals.add(new RadarEntry(gs24List.size()));
        dataVals.add(new RadarEntry(schoolList.size()));
        dataVals.add(new RadarEntry(academyList.size()));
        dataVals.add(new RadarEntry(subwayList.size()));
        dataVals.add(new RadarEntry(bankList.size()));
        dataVals.add(new RadarEntry(hospitalList.size()));
        dataVals.add(new RadarEntry(pharmacyList.size()));
        dataVals.add(new RadarEntry(cafeList.size()));
        return  dataVals;
    }

 데이터 리스트를 만든다.

//차트생성
    private void makeChart(){
        RadarDataSet dataSet = new RadarDataSet(dataValue(), "DATA");
        dataSet.setColor(Color.BLUE);

        RadarData data = new RadarData();
        data.addDataSet(dataSet);
        String[] labels =  {"대형마트", "편의점", "학교", "학원", "지하철", "은행", "병원", "약국", "카페"};
        XAxis xAxis = radarChart.getXAxis();
        xAxis.setValueFormatter(new IndexAxisValueFormatter(labels));
        radarChart.setData(data);
    }

그래프 사진을 같이보면 이해가 잘될거다.

1) dataSet 생성("DATA"는 가장 처음에있는 그래프사진을 보면 밑에 DATA라는 이름이 보일거다. 즉 그래프 그룹의 이름을 뜻한다. 첫번째 매개변수는 데이터 리스트를 넣으면 된다.)

2) setColor( 그래프 선 색설정)

3) labels (라벨 설정, 데이터를 8개 했으니 라벨도 8개가 필요하다.)

4) 차트에 세팅

 

 

 

 

4.  만약 여러개의 그룹의 데이터를 한번에  비교해주면서 보여줄려면 RadarDataSet을 2개 만들고 radarChart에 2개를 setData() 해주면된다.

 

728x90
Comments