※링크
하이차트 로드하기 및 커스텀 정리
[1] 하이차트 로드하기
깃허브에 들어가면 빌드하는 방법 너무 친절하게 적혀 있기는 하지만,,,그래도 정리하는 김에 씀
1. setting.gradle 빌드
setting.gradle 안엔 repositories가 두갠데 어디에 넣으란건지는 불친잘히게 안써있더라 참내~
- pluginManagement안에 repositories에 flatDir 선언하기
pluginManagement {
repositories {
...
flatDir {
dirs ("libs")
}
}
}- dependencyResolutionManagement안에 repositories에 maven 설정하기
maven이 이미 있다고 기존거에 냅다 url만 쓰면 안됨
그럼 첫번째 url 무시해서 못찾음
따로따로 써줘야한다
dependencyResolutionManagement {
repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
repositories {
google()
mavenCentral()
maven {
url = java.net.URI("https://devrepo.kakao.com/nexus/content/groups/public/")
}
maven {
url = java.net.URI("https://jitpack.io")
}
}
}2. 앱 수준 build.gradle
dependencies에 하이차트 추가 & 파싱을 해야하기 때문에 반드시 gson도 같이 넣어줘야함
나는 현재 버전 카탈로그 기능을 사용하여 의존성 관리 방식 사용중이라 lid.version.toml도 같이 써둠
- build.gradle
//하이차트
implementation (libs.gson)
implementation (libs.highcharts.android)- lid.version.toml
[versions]
gson = "2.10.1"
highchartsAndroid = "12.0.2"
[libraries]
gson = { module = "com.google.code.gson:gson", version.ref = "gson" }
highcharts-android = { module = "com.github.highcharts:highcharts-android", version.ref = "highchartsAndroid" }[2] 차트 사용법
시안에 맞춰 적용함
내가 쓴 것들보다 더 많은 설정이 있음 난 극히 일부만 사용함,,
1. View
위에서 빌드가 잘 되었다면 하이차트 뷰를 그릴 수 있다
<com.highsoft.highcharts.core.HIChartView
android:id="@+id/bar_graph"
app:layout_constraintTop_toBottomOf="@+id/lly_btn"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginHorizontal="20dp"
android:background="@color/black"
android:layout_width="match_parent"
android:layout_height="290dp"/>2. code
1. 막대 그래프 만들기 준비 (HIOptions, HIChart)
- HIOptions(): 그래프 그릴 공간 선언
- HIChart(): 어떤 그림을 그릴지 정하는 곳
- chart.type : 어떤 그래프 그릴지 타입 설장하는 부분 "column" 은 막대그래프
2. 그래프 제목
- HITitle(): 이건 그래프의 제목을 적는 곳
- chartTitle.text = "" : 제목을 사용하지않을거면 비우기, 사용할거면 여기에 적으면 된다
3. 그래프의 높이와 너비 정하기
- HIYAxis(): 그래프의 높이(세로축)를 설정하는 곳
- yAxis.min = 0: 그래프의 높이 시작점을 0으로 설정
- yAxis.title.text = "": 축의 제목 - HIXAxis(): 그래프의 너비(가로축)를 설정하는 곳
- xAxis.min = 0: 그래프의 너비 시작점을 0으로 설정
-xAxis.labels.enabled = false: 너비 축에 숫자를 표시하지 않도록 설정
4. 막대 모양 설정하기
- HIPlotOptions(): 막대들의 모양을 설정하는 곳
-plotOption.column.pointPadding = 0.1: 막대 사이 간격
-plotOption.column.groupPadding = 0.05: 막대 그룹 사이 간격
-plotOption.column.pointWidth = 28: 막대의 너비를 28픽셀로 설정
-plotOption.column.borderWidth = 0: 막대의 테두리
- HIColumn(): 각각의 막대 정보를 설정하는 곳
-firstWeek.name = "": 막대 이름 설정
-firstWeekData.add(데이터 값): 막대 높이 (받아온 데이터 값)
-firstWeek.color = getColor(week1, maxData, minData): 막대 색깔 설정 (getColor는 내가 만든 함수임,,, 밑에 있음)
-firstWeek.data = firstWeekData: 막대의 높이 데이터 설정
5. 막대 데이터 넣기
- HISeries(): 막대들을 모두 모아서 그래프에 넣는 곳
- series.add() : HIColumn() 정보 설정한 그래프 추가
6. 그래프의 범례 설정
- HILegend(): 그래프의 범례(각 막대가 무엇을 의미하는지 설명하는 부분)를 설정하는 곳
- legend.enabled = false: 범례를 표시하지 않도록 설정
7. 그래프를 이미지 저장 기능
- HIExporting(): 그래프를 이미지 파일로 저장하는 기능을 설정하는 곳 (차트 오른쪽 위 메뉴바 그림)
- exporting.enabled = false: 이미지 저장 기능을 사용하지 않도록 설정
8. 그래프 그리기
- binding.barGraph.options = options: 위에서 설정한 모든 내용을 그래프를 그릴 공간(binding.barGraph)에 넣기
- binding.barGraph.reload() : 그래프 리로드
private fun setBarUi(
week1:Int,
week2:Int,
week3:Int,
week4:Int,
week5:Int,
) {
val options = HIOptions()
val chart = HIChart()
chart.type = "column"
options.chart = chart
//차트 제목
val chartTitle = HITitle()
chartTitle.text = ""
options.title = chartTitle
//y축의 제목을 정해주고 최소 범위를 지정해준다.
val yAxis = HIYAxis()
val ytitle = HITitle()
yAxis.min = 0
yAxis.title = ytitle
yAxis.title.text = ""
options.yAxis = object : ArrayList<HIYAxis>() {
init { add(yAxis) }
}
val xAxis = HIXAxis()
xAxis.min = 0
// xAxis.max = 6 // x축 범위 설정
xAxis.labels = HILabels()
xAxis.labels.enabled = false
options.xAxis = object : ArrayList<HIXAxis>() {
init { add(xAxis) }
}
val plotOption = HIPlotOptions()
plotOption.column = HIColumn()
plotOption.column.pointPadding = 0.1 // 막대 사이 간격 조절
plotOption.column.groupPadding = 0.05 // 막대 그룹 사이 간격 조절
plotOption.column.pointWidth = 28 // 너비 조정 (픽셀 단위)
plotOption.column.borderWidth = 0
options.plotOptions = plotOption
// 데이터 최대값 및 최소값 찾기
val data = listOf(week1, week2, week3, week4, week5)
val maxData = data.maxOrNull() ?: 0
val minData = data.minOrNull() ?: 0
val firstWeek = HIColumn()
firstWeek.name = "1주차"
val firstWeekData = ArrayList<Int>()
firstWeekData.add(week1)
firstWeek.color = getColor(week1, maxData, minData)
firstWeek.data = firstWeekData
val secondWeek = HIColumn()
secondWeek.name = "2주차"
val secondWeekData = ArrayList<Int>()
secondWeekData.add(week2)
secondWeek.color = getColor(week2, maxData, minData)
secondWeek.data = secondWeekData
val thirdWeek = HIColumn()
thirdWeek.name = "3주차"
val thirdWeekData = ArrayList<Int>()
thirdWeekData.add(week3)
thirdWeek.color = getColor(week3, maxData, minData)
thirdWeek.data = thirdWeekData
val fourthWeek = HIColumn()
fourthWeek.name = "4주차"
val fourthWeekData = ArrayList<Int>()
fourthWeekData.add(week4)
fourthWeek.color = getColor(week4, maxData, minData)
fourthWeek.data = fourthWeekData
val fifthWeek = HIColumn()
fifthWeek.name = "5주차"
val fifthWeekData = ArrayList<Int>()
fifthWeekData.add(week5)
fifthWeek.color = getColor(week5, maxData, minData)
fifthWeek.data = fifthWeekData
//시리즈는 차트에 출력할 데이터값의 집합이다.
val series = ArrayList<HISeries>()
series.add(firstWeek)
series.add(secondWeek)
series.add(thirdWeek)
series.add(fourthWeek)
series.add(fifthWeek)
options.series = series
// 범위 표시 없애기
val legend = HILegend()
legend.enabled = false
options.legend = legend
// 메뉴 표시 아이콘 없애기
val exporting = HIExporting()
exporting.enabled = false
options.exporting = exporting
//옵션을 차트뷰에 적용시킨다.
binding.barGraph.options = options
binding.barGraph.reload()
}※ 그라디언트 넣기 (막대 색상 설정 함수)
내 막대는 그라디언트가 들어가야했다,,
방향 설정과 시작색 끝색 설정하는 방법은 아래와 같음
- HIStop(0f, HIColor.initWithRGBA(91, 160, 47, 0.0))
- HIStop(투명도 0~1사이값 Float여야함, HIColor.initWithRGBA(써있듯 rgba a가 투명도 인데 얜 double로 명시해줘야함))
- HIColor.initWithLinearGradient(HIGradient(0f, 1f, 0f, 0f), stops)
- HIColor.initWithLinearGradient(HIGradient(그라데이션 시작점 x, 그라데이션 시작점 y, 그라데이션 끝점의 x, 그라데이션 끝점의 y ), 위에 명시한 HIStop)
- 얘를 조절해야 그라데이션 시작점을 조절 가능함
아래 설정을 하용하면 그림처럼 설정 된다
// 막대 색상 설정 함수
private fun getColor(value: Int, max: Int, min: Int): HIColor {
return when (value) {
max -> {
val stops = LinkedList<HIStop>().apply {
add(HIStop(0f, HIColor.initWithRGBA(91, 160, 47, 0.0))) //시작
add(HIStop(1f, HIColor.initWithRGBA(91, 160, 47, 1.0))) //끝
}
HIColor.initWithLinearGradient(HIGradient(0f, 1f, 0f, 0f), stops)
}
min -> {
val stops = LinkedList<HIStop>().apply {
add(HIStop(0f, HIColor.initWithRGBA(255, 71, 71, 0.0)))
add(HIStop(1f, HIColor.initWithRGBA(255, 71, 71, 1.0)))
}
HIColor.initWithLinearGradient(HIGradient(0f, 1f, 0f, 0f), stops)
}
else -> {
val stops = LinkedList<HIStop>().apply {
add(HIStop(0f, HIColor.initWithRGBA(98, 173, 206, 0.0)))
add(HIStop(1f, HIColor.initWithRGBA(98, 173, 206, 1.0)))
}
HIColor.initWithLinearGradient(HIGradient(0f, 1f, 0f, 0f), stops)
}
}
}cf) 색 설정을 반대로 하고 싶다면..?
initWithLinearGradient에 시작점 조절
val stops = LinkedList<HIStop>().apply {
add(HIStop(0f, HIColor.initWithRGBA(98, 173, 206, 0.0)))
add(HIStop(1f, HIColor.initWithRGBA(98, 173, 206, 1.0)))
}
HIColor.initWithLinearGradient(HIGradient(0f, 0f, 0f, **1f**), stops)제일 유명한 하이차트 사용법은 많은데 커스텀 하는법은 너무 안나온다,,
데이터 겹쳐서 그리는 거 해야되는데 ㅠ
되면,,,다시 한번 정리해야겠다,,
보조기억장치