안녕하세요 오늘은 UI/UX 중 차트바에 대해서 포스팅 해보겠습니다.
프로젝트를 진행하다 보면 데이터를 화면에 표시할 때 차트를 쓰는 경우가 있습니다.
표를 통해 데이터를 쉽게 표시할 수 있는 장점이 있어 자주 보지만 구현 해본 것은 처음인것 같습니다.
먼저 제가 차트를 구현한 방법은 Android에서 차트를 구현할 때 가장 많이 쓰이는 MPAndroidChart를 이용해서 저도 이번 포스팅에서는 MPAndroidChart를 이용해 차트를 구현하는 방법에 대해 작성해보겠습니다.
1. Gradle 설정
라이브러리를 사용하는 것이니 Gradle파일에 의존성 추가를 해줘야 합니다.
app단의 bulid.gradle파일에 의존성 추가
최신 안드로이드 기준 -> setting.gradle에 JitPack 저장소 추가
2. 레이아웃에 차트 추가하기
액티비티, 프래그먼트에서 차트를 추가합니다. 저는 차트바 형식의 차트를 추가했습니다.
추가하고 나면 preview화면에 하단의 이미지대로 표시가 되는대 정상적으로 표시되는 것입니다.
3. 차트에 사용할 데이터 추가
차트에 표시할 데이터를 추가해줘야 합니다. 차트가 있는 액티비티,프래그먼트에서 작성해주시면 됩니다.
ArrayList<BarEntry> entry_chart = new ArrayList<>();
entry_chart.add(new BarEntry(1,1));
entry_chart.add(new BarEntry(2,0));
entry_chart.add(new BarEntry(3,2));
entry_chart.add(new BarEntry(4,3));
entry_chart.add(new BarEntry(5,4));
entry_chart.add(new BarEntry(6,2));
entry_chart.add(new BarEntry(7,3));순서대로 x1부터 ~x7까지 7개의 데이터를 집어넣엇습니다.
4. 차트 데이터 설정 및 스타일링
표시할 차트에 관한 데이터 설정 및 스타일링이 필요합니다. 저는 차트를 여러 화면에서 사용해야하기 때문에 별도의 util로 만들어 관리했으나 필요에 따라서 데이터를 추가한 액티비티,프래그먼트에서 바로 작성하셔도 됩니다.
public static void setupBarChart(View view, int chartId, List<BarEntry> entries, boolean showBaseline, float textSize, float barWidth) {
// 차트 뷰를 참조
BarChart barChart = view.findViewById(chartId);
BarData barData = new BarData();
// 가장 높은 값을 찾음
float maxValue = Collections.max(entries, Comparator.comparing(BarEntry::getY)).getY();
// 각 항목에 대한 색상을 설정. 가장 높은 값은 다른 색상으로 표시.
List<Integer> colors = new ArrayList<>();
for (BarEntry entry : entries) {
if (entry.getY() == maxValue) {
colors.add(Color.parseColor("#14c2a3")); // 최대 값일 때의 색상
} else {
colors.add(Color.LTGRAY); // 그 외의 값의 색상
}
}
// 차트 하단 기준선 표시
if (showBaseline) {
LimitLine ll = new LimitLine(0f);
ll.setLineColor(Color.parseColor("#f2f2f2")); // 기준선의 색상
ll.setLineWidth(2f); // 기준선의 두께
YAxis leftAxis = barChart.getAxisLeft();
leftAxis.addLimitLine(ll); // 왼쪽 축에 기준선 추가
}
// 데이터셋 설정 및 차트에 데이터 추가
BarDataSet barDataSet = new BarDataSet(entries, "bardataset");
barDataSet.setColors(colors); // 데이터셋의 색상 설정
barDataSet.setValueTextSize(textSize); // 각 항목의 텍스트 크기 설정
barData.addDataSet(barDataSet); // 데이터 추가
barChart.setData(barData); // 차트에 데이터 적용
barChart.invalidate(); // 차트를 다시 그림
// 바의 너비 설정
barData.setBarWidth(barWidth);
// 차트의 상호작용 및 표시 설정
barChart.setTouchEnabled(false); // 터치 인터랙션 비활성화
barChart.getDescription().setEnabled(false); // 설명 비활성화
barChart.setDrawGridBackground(false); // 그리드 배경 비활성화
barChart.getXAxis().setDrawGridLines(false); // X축 그리드 선 비활성화
barChart.getAxisLeft().setDrawGridLines(false); // 왼쪽 축 그리드 선 비활성화
barChart.getAxisRight().setDrawGridLines(false); // 오른쪽 축 그리드 선 비활성화
barChart.getXAxis().setDrawLabels(false); // X축 라벨 비활성화
barChart.getAxisLeft().setDrawLabels(false); // 왼쪽 축 라벨 비활성화
barChart.getAxisRight().setDrawLabels(false); // 오른쪽 축 라벨 비활성화
barChart.getAxisRight().setEnabled(false); // 오른쪽 축 비활성화
barChart.getLegend().setEnabled(false); // 범례 비활성화
barChart.getAxisLeft().setDrawAxisLine(false); // 왼쪽 축 선 비활성화
barChart.getXAxis().setDrawAxisLine(false); // X축 선 비활성화
// 값 표시 포맷터 설정
barDataSet.setValueFormatter(new ValueFormatter() {
@Override
public String getFormattedValue(float value) {
return String.valueOf((int) value); // 소수점 없이 정수 형태로 반환
}
});
}
여기서 본인에게 필요한 설정을 해주시면 됩니다.
저는 간단하게 기타 레이아웃을 다 비활성화 하고 차트를 그렸습니다.
5. 차트 연결
마지막으로 작성한 유틸 클래스에서 필요한 메소드를 정의해 연결시켜 화면에 보여주면 끝입니다.
ChartBar.setupBarChart(view, R.id.chart, entry_chart, false, 10,0.75f);
이렇게 간단한 차트 구현이 완성 되었습니다.
공식 깃허브를 들어가면 구현할 수 있는 차트의 종류가 있고 생각보다 다양하고 커스텀하기 편리해서 차트를 구현하기 좋은 것 같습니다.
전체 코드
@Override
public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
super.onViewCreated(view, savedInstanceState);
ArrayList<BarEntry> entry_chart = new ArrayList<>();
entry_chart.add(new BarEntry(1,1));
entry_chart.add(new BarEntry(2,0));
entry_chart.add(new BarEntry(3,2));
entry_chart.add(new BarEntry(4,3));
entry_chart.add(new BarEntry(5,4));
entry_chart.add(new BarEntry(6,2));
entry_chart.add(new BarEntry(7,3));
setupBarChart(view, R.id.safety_report_week_chart, entry_chart, false, 10,0.75f);
}
public void setupBarChart(View view, int chartId, List<BarEntry> entries, boolean showBaseline, float textSize, float barWidth) {
// 차트 뷰를 참조
BarChart barChart = view.findViewById(chartId);
BarData barData = new BarData();
// 가장 높은 값을 찾음
float maxValue = Collections.max(entries, Comparator.comparing(BarEntry::getY)).getY();
// 각 항목에 대한 색상을 설정. 가장 높은 값은 다른 색상으로 표시.
List<Integer> colors = new ArrayList<>();
for (BarEntry entry : entries) {
if (entry.getY() == maxValue) {
colors.add(Color.parseColor("#14c2a3")); // 최대 값일 때의 색상
} else {
colors.add(Color.LTGRAY); // 그 외의 값의 색상
}
}
// 차트 하단 기준선 표시
if (showBaseline) {
LimitLine ll = new LimitLine(0f);
ll.setLineColor(Color.parseColor("#f2f2f2")); // 기준선의 색상
ll.setLineWidth(2f); // 기준선의 두께
YAxis leftAxis = barChart.getAxisLeft();
leftAxis.addLimitLine(ll); // 왼쪽 축에 기준선 추가
}
// 데이터셋 설정 및 차트에 데이터 추가
BarDataSet barDataSet = new BarDataSet(entries, "bardataset");
barDataSet.setColors(colors); // 데이터셋의 색상 설정
barDataSet.setValueTextSize(textSize); // 각 항목의 텍스트 크기 설정
barData.addDataSet(barDataSet); // 데이터 추가
barChart.setData(barData); // 차트에 데이터 적용
barChart.invalidate(); // 차트를 다시 그림
// 바의 너비 설정
barData.setBarWidth(barWidth);
// 차트의 상호작용 및 표시 설정
barChart.setTouchEnabled(false); // 터치 인터랙션 비활성화
barChart.getDescription().setEnabled(false); // 설명 비활성화
barChart.setDrawGridBackground(false); // 그리드 배경 비활성화
barChart.getXAxis().setDrawGridLines(false); // X축 그리드 선 비활성화
barChart.getAxisLeft().setDrawGridLines(false); // 왼쪽 축 그리드 선 비활성화
barChart.getAxisRight().setDrawGridLines(false); // 오른쪽 축 그리드 선 비활성화
barChart.getXAxis().setDrawLabels(false); // X축 라벨 비활성화
barChart.getAxisLeft().setDrawLabels(false); // 왼쪽 축 라벨 비활성화
barChart.getAxisRight().setDrawLabels(false); // 오른쪽 축 라벨 비활성화
barChart.getAxisRight().setEnabled(false); // 오른쪽 축 비활성화
barChart.getLegend().setEnabled(false); // 범례 비활성화
barChart.getAxisLeft().setDrawAxisLine(false); // 왼쪽 축 선 비활성화
barChart.getXAxis().setDrawAxisLine(false); // X축 선 비활성화
// 값 표시 포맷터 설정
barDataSet.setValueFormatter(new ValueFormatter() {
@Override
public String getFormattedValue(float value) {
return String.valueOf((int) value); // 소수점 없이 정수 형태로 반환
}
});
}다들 즐거운 프로그래밍 하세요~!
https://github.com/PhilJay/MPAndroidChart <- MPAndroidChart 공식 깃허브
개린이