[Android] MPAndroidChart BarChart 사용하기

MpAndrodChart의 HorizontalBarChart 사용하기

데이터를 보여줄 때 가독성을 높이는 방법 중엔 그래프가 있습니다.

은근 그래프를 사용할 때가 많은데, 그래프 라이브러리 중 가장 유명한 MPAndroidChart를 사용해보았습니다.

HorizontalBarChart 사용하면서 적용할 수 있는 속성이 너무나도 많아서 나중에 쓰기 위해 쉽게 정리해둬야겠습니다.

 

사용 언어 : Kotlin

MPAndroidChart GitHub

물론 Github에 자세하게 나와있지만, 나름대로 정리해봤습니다.

1. Gradle 추가

 

build.gradle

 

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

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

2. HorizontalBarChart 추가

 

라이브러리를 추가했을 때 xml에서 view를 끌면 MPAndrodChart내의 그래프를 사용할 수 있습니다.

 

<view
  android:id="@+id/barChart"
  class="com.github.mikephil.charting.charts.HorizontalBarChart"
  android:layout_width="match_parent"
  android:layout_height="188dp"
  android:layout_marginLeft="0dp"
  android:layout_marginTop="32dp"
  android:layout_marginRight="0dp"/>

3. Chart에 데이터 적용시키기

 

1) 데이터를 원하는 순서대로 BarEntry에 담아줍니다

     entries.add(x축, y축)의 형태를 사용합니다

 

<val entries = ArrayList<BarEntry>() // entries를 선언
entries.add(BarEntry(0f, 10f))
entries.add(BarEntry(1f, 20f))>

 

2) BarDataSet을 선언합니다

    전에 선언했던 BarEntry를 담아줍니다

 

 var set1 = BarDataSet(entries, "DataSet 1")
 set1.color = Color.parseColor("#990000") // Bar의 컬러
 set1.highLightColor = Color.parseColor("#009900") // highLight의 컬러
 set1.highLightAlpha = 255 // highLight의 투명도

 

3) HorizontalBarChart에 Data 넣기

var datasetsarr = ArrayList<IBarDataSet>()
var data = BarData(datasetsarr)
chart.data = data

 

이렇게 data를 넣어주면 됩니다. 하지만, Chart에 적용할 수 있는 속성이 너무나도 많기에 아래에 몇 가지를 간략히 정리해봤습니다.

4. Chart에 속성 적용하기

각각 적용 가능한 속성이 많기 때문에 문서를 보는 것을 추천합니다.

1) 각 축의 속성(xAxis, yAxisLeft, yAxisRight)

각 축은 chart.xAxis, chart.yAxisLeft, chart.yAxisRight으로 선언선의 표시 유무, 선의 굵기, 최소, 최대값, 선의 색상 등을 지정 가능

 xAxis.setDrawLabels(false)
 xAxis.setDrawGridLines(false)
 xAxis.setDrawAxisLine(true)
 xAxis.setDrawZeroLine(false)
 xAxis.zeroLineWidth = 2f
 xAxis.axisMinimum = 0f
 xAxis.axisMaximum = 200f
 xAxis.axisLineColor = Color.parseColor("#000000")

 

2) DataSet의 속성

DataSet의 하이라이트 색상, 색상, barBorderColor, 하이라이트 여부, icon여부 등을 지정 가능

var set1 = BarDataSet(entries, "DataSet 1")
set1.color = Color.parseColor("#990000")
set1.highLightColor = Color.parseColor("#990000")
set1.highLightAlpha = 255
set1.formLineWidth = 4f
set1.isHighlightEnabled = true
set1.setDrawIcons(false)
set1.setDrawValues(false)

 

3) BarData의 속성

barWidth, value의 색상, text의 색상, 크기, 폰트 등을 지정 가능

var data = BarData(datasetsarr)
data.setDrawValues(false)
data.barWidth = 0.6f
data.setValueTextColor(Color.parseColor("#990000"))
data.setValueTextSize(12f)

val face = Typeface.createFromAsset(context.assets, "폰트명")
data.setValueTypeface(face)