[안드로이드] MPAndroidChart를 활용한 HorizontalBarChart 사용

hyeseungS·2022년 1월 7일

이번 안드로이드 앱 프로젝트에서 MPAnrdoidChart로 차트를 넣어 사용했던 것을 기록하기 위해 이 글을 작성하게 되었다.

이 글에서는 HorizontalBarChart(수평 막대 그래프)에 대하여 자세하게 설명하고 다음 글에서 LineChart(선 그래프)를 설명할 것이다.

MPAndroidChart는 쉽게 막대, 선, 원 등의 다양한 차트를 안드로이드 앱에 시각적으로 나타낼 수 있는 오픈소스 라이브러리이다.

Import MPAndroidChart

아래 링크에서 최신 버전을 확인 후, Grandle dependency 에 추가한다. MPAndroidChart

implementation 'com.github.PhilJay:MpAndroidChart:v3.1.0'

이후, Grandle Sync 해주면 MPAnroidChart를 사용할 수 있다.

BarChart View

xml 레이아웃에 com.github.mikephil.charting.charts.HorizontalBarChart 를 추가한다.

<com.github.mikephil.charting.charts.HorizontalBarChart
            android:id="@+id/chart2"
            android:layout_width="340dp"
            android:layout_height="240dp"
            android:layout_gravity="center"
            android:background="@drawable/round_button_white"
            android:visibility="gone"

            />

BarChart 코드

BarChart의 기본적인 것들을 세팅해준다.

private void configureChartAppearance() {

        barChart2.getDescription().setEnabled(false); // chart 밑에 description 표시 유무
        barChart2.setTouchEnabled(false); // 터치 유무
        barChart2.getLegend().setEnabled(false); // Legend는 차트의 범례
        barChart2.setExtraOffsets(10f, 0f, 40f, 0f);

        // XAxis (수평 막대 기준 왼쪽) - 선 유무, 사이즈, 색상, 축 위치 설정
        XAxis xAxis = barChart2.getXAxis();
        xAxis.setDrawAxisLine(false);
        xAxis.setGranularity(1f);
        xAxis.setTextSize(15f);
        xAxis.setGridLineWidth(25f);
        xAxis.setGridColor(Color.parseColor("#80E5E5E5"));
        xAxis.setPosition(XAxis.XAxisPosition.BOTTOM); // X 축 데이터 표시 위치

        // YAxis(Left) (수평 막대 기준 아래쪽) - 선 유무, 데이터 최솟값/최댓값, label 유무
        YAxis axisLeft = barChart2.getAxisLeft();
        axisLeft.setDrawGridLines(false);
        axisLeft.setDrawAxisLine(false);
        axisLeft.setAxisMinimum(0f); // 최솟값
        axisLeft.setAxisMaximum(50f); // 최댓값
        axisLeft.setGranularity(1f); // 값만큼 라인선 설정
        axisLeft.setDrawLabels(false); // label 삭제

        // YAxis(Right) (수평 막대 기준 위쪽) - 사이즈, 선 유무
        YAxis axisRight = barChart2.getAxisRight();
        axisRight.setTextSize(15f);
        axisRight.setDrawLabels(false); // label 삭제
        axisRight.setDrawGridLines(false);
        axisRight.setDrawAxisLine(false);

        // XAxis에 원하는 String 설정하기 (앱 이름)
        xAxis.setValueFormatter(new ValueFormatter() {

            @Override
            public String getFormattedValue(float value) {
                return APPS[(int) value];
            }
        });
    }

BarChart에 표시될 데이터를 생성한다.
- BarEntry에는 (x, y) 쌍으로 Bar Chart에 표시될 데이터를 저장하여 이를 리스트에 추가한다. 일단, 아래에서는 표시될 데이터를 랜덤으로 설정한다.
- BarDataSet는 위의 단순 데이터인 BarEntry 를 막대 모양으로 표시하기 위해 반드시 필요하며, 막대의 모양을 설정한다.
- BarData는 보여질 데이터를 구성한다.

private BarData createChartData() {

        // 1. [BarEntry] BarChart에 표시될 데이터 값 생성
        ArrayList<BarEntry> values = new ArrayList<>();
        for (int i = 0; i < MAX_X_VALUE; i++) {
            float x = i;
            float y = new Random().nextFloat() * (MAX_Y_VALUE - MIN_Y_VALUE) + MIN_Y_VALUE;
            values.add(new BarEntry(x, y));
        }

        // 2. [BarDataSet] 단순 데이터를 막대 모양으로 표시, BarChart의 막대 커스텀
        BarDataSet set2 = new BarDataSet(values, SET_LABEL);
        set2.setDrawIcons(false);
        set2.setDrawValues(true);
        set2.setColor(Color.parseColor("#66767676")); // 색상 설정
        // 데이터 값 원하는 String 포맷으로 설정하기 (ex. ~회)
        set2.setValueFormatter(new ValueFormatter() {
            @Override
            public String getFormattedValue(float value) {
                return (String.valueOf((int) value)) + "회";
            }
        });

        // 3. [BarData] 보여질 데이터 구성
        BarData data = new BarData(set2);
        data.setBarWidth(0.5f); 
        data.setValueTextSize(15);

        return data;
    }

위의 생성된 BarData를 실제 BarChart 객체에 전달하고 BarChart를 갱신해 데이터를 표시한다.

 private void prepareChartData(BarData data) {
        barChart2.setData(data); // BarData 전달
        barChart2.invalidate(); // BarChart 갱신해 데이터 표시
    }