Android Kotlin : 차트 그리기(Highcharts 라이브러리)

개요

요즘 시간이 없어서 간단하게 기록하려고 오랜만에 글을 쓴다.

차트를 그리고 싶었다. 그래서 몇가지 유명한 라이브러리를 찾아봤다. 

 

 

 

1. MPAndroidChart

(PhilJay 제작)

 

https://github.com/PhilJay/MPAndroidChart

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

LineChart
BarChart
BubbleChart
CandleStickChart
CombinedChart
PieChart
HorizontalBarChart
RardarChart
ScatteChart 등 여러가지 차트를 그릴 수 있는 라이브러리이다.

안드로이드에서 차트를 그릴 때 가장 많이 사용하는 라이브러리이다.

 

 

 

2. HighCharts 

웹쪽에서는 차트로 꽤나 유명하다고 들었다.

웹을 기반으로 라이브러리가 짜여있기 때문에 안드로이드에서는 조금 사용하기가 힘들 수 있다.

물론 안되는건 아니다. 근데 좀 복잡하고 자료가 별로 나와있지 않다. 

 

https://www.highcharts.com/

Interactive javascript charts library

 

 

안드로이드에서 사용하는 예제이다. 보고 따라해보길 바란다.

https://www.highcharts.com/blog/tutorials/highcharts-android-wrapper-tutorial/

Highcharts Android Wrapper Tutorial – Highcharts

하지만 사용 예시가 Java 코드밖에 없어서 만약 Koltin을 사용한다면 직접 변환을 시켜줘야했다.

 

코드

 

1. gradle(app)

dependencies에 다음 종속성(implementation)을 추가해준다.

implementation 'com.github.highcharts:highcharts-android:10.0.0'
implementation 'com.google.code.gson:gson:2.8.6'

 

2. gradle(project)

(Arctic Fox버전 이후에 만든 프로젝트는 settings.gradle에 넣어준다)

maven { url 'https://jitpack.io' }
flatDir {dirs 'libs'}
maven {
    url "https://highsoft.bintray.com/Highcharts"
}

 

3. xml

HIChartView를 위해 다음 코드를 추가해준다.

(각자 입맛에 맞게 변형해서 사용해도 된다.)

<com.highsoft.highcharts.core.HIChartView
    android:id="@+id/hc"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

 

 

4. Activity

자바코드 예시밖에 없어서 직접 Kotlin으로 변환했다.

 

package com.example.highchart

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import com.highsoft.highcharts.common.hichartsclasses.*
import com.highsoft.highcharts.core.HIChartView

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

                //HIChartView 선언
                val chartView = findViewById<HIChartView>(R.id.hc)
                //HIchart 옵션을 통해 차트를 변형시켜줄 준비를 한다.
                val options = HIOptions()


                val chart = HIChart()
                chart.type = "column"
                //chart.zoomType = "x"
                options.chart = chart

                //차트 제목
                val maintitle = HITitle()
                maintitle.text = "건물 용도에 따른 공사 현황"
                options.title = maintitle

                //차트 부제목
                val subtitle = HISubtitle()
                subtitle.text = "(Top 5)"
                options.subtitle = subtitle

                //y축의 제목을 정해주고 최소 범위를 지정해준다.
                val yAxis = HIYAxis()
                val title = HITitle()
                yAxis.min = 0
                yAxis.title = title
                yAxis.title.text = "공사현황"
                options.yAxis = object : ArrayList<HIYAxis>() {
                    init { add(yAxis) }
                }


                //x축의 카테고리를 지정해준다.
                val xAxis = HIXAxis()
                val category = ArrayList<String>()
                category.add("아파트")
                category.add("일반주택")
                category.add("공동주택")
                xAxis.categories = category
                options.xAxis = object : ArrayList<HIXAxis>() {
                    init { add(xAxis) }
                }

                //tooltip이란 차트에 마우스나 손을 올렸을 때 정보가 보여지는 기능을 가지고 있다. 급하게 하느라 여기는 조금 이상할 수도 있다(직접 커스텀)
                val tooltip = HITooltip()
                //"<span style=\\\"font-size:15px\\\">{point.key}</span><table>"
                tooltip.headerFormat = "<table>"
                tooltip.pointFormat = "<tr><td style=\\\"color:{series.color};padding:0\\\">{series.name}: </td>\" + \"<td style=\\\"padding:0\\\"><b>{point.y}</b></td></tr>"
                tooltip.footerFormat = "</table>"
                tooltip.shared = true
                tooltip.useHTML = true
                options.tooltip = tooltip


                //각 컬럼 차트를 커스텀할 수 있다.(너비 등등)
                val plotOption = HIPlotOptions()
                plotOption.column = HIColumn()
                plotOption.column.pointPadding = 0.2
                plotOption.column.borderWidth = 0
                options.plotOptions = plotOption

                //데이터의 이름과 데이터를 넣어준다. 여기는 고정값으로 일단 테스트했다.
                val apart = HIColumn()
                apart.name = "아파트"
                val apartData = ArrayList<Int>()
                apartData.add(36)
//        apartData.add(31)
//        apartData.add(93)
                apart.data = apartData

                val normal = HIColumn()
                normal.name = "일반주택"
                val normalData = ArrayList<Int>()
                normalData.add(1)
//        normalData.add(5)
//        normalData.add(10)
                normal.data = normalData

                val share = HIColumn()
                share.name = "공동주택"
                val shareData = ArrayList<Int>()
                shareData.add(10)
//        sharData.add(18)
//        sharData.add(44)
                share.data = shareData

            //시리즈는 차트에 출력할 데이터값의 집합이다.
                val series = ArrayList<HISeries>()
                series.add(apart)
                series.add(normal)
                series.add(share)

                options.series = series

            //옵션을 차트뷰에 적용시킨다.
                chartView.options = options

            }
        }

 

 

완성화면

 

 

 

 

저렇게 그래프를 터치했을 때 나오는 것이 tooltip이다.

 

아래에서 보고싶은  카테고리만 선택할 수 있다

 

 

끝