(Android) KIS OpenAPI 봉차트 만들기 - MPAndroidChart (2)
이제 KIS Open API 수신할 준비가 되었습니다. 다음은 이번에 활용할 오픈소스 MPAndroidChart를 사용 설정을 진행합니다.
1. Build 설정
build.gradle dependandy 추가
implementation("com.github.PhilJay:MPAndroidChart:v3.0.3")
settings.gradle
dependencyResolutionManagement {
repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
repositories {
google()
mavenCentral()
maven { url = uri("https://jitpack.io")}
}
}
위 두가지 설정해 Sync하셔서 모듈 설치해 주시면 됩니다.
제가 먼저 TabLayout과 Fragment에 대해서 연재해 드렸어야 했는데, 요거는 다음번에 설명드록 하고 이번 예제는 Chart 활용이 Main이기에 이 부분에 집중합니다. (새로운 Activity 하나 만드셔서 하시면 됩니다)
2. Chart Layout 작성
이번에 그릴 차트는 봉차트에 이동평균선을 그려넣으므로, CandleStick과 Line Chart입니다. 그러므로 2개의 이종차트를 받기 위해서는 CombinedChart를 이용하셔야 합니다. 그리고 아래에는 거래량을 받아주는 BarChart를 만들어주면 됩니다. ConstraintLayout을 이용하면 배치가 용이합니다.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".Fragment.ChartFragment">
<com.github.mikephil.charting.charts.CombinedChart
android:id="@+id/combinedChart"
android:layout_width="match_parent"
android:layout_height="500dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<com.github.mikephil.charting.charts.BarChart
android:id="@+id/barChart"
android:layout_width="match_parent"
android:layout_height="200dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/combinedChart" />
</androidx.constraintlayout.widget.ConstraintLayout>
MPAndroidChart로 CandleStick Chart (다른 차트도 동일함) 만드는 과정은 아래와 같습니다. 순서를 지켜서 충실하게 만들어 줍니다.
1. ArrayList로 CandleEntry (일자, Float형 시, 고, 저, 종 데이터 포함) 를 만든다.
2. CandleEntry로 DataSet 생성 (Color, Shadow 등 데이터셋에 속정 정의 가능)
3. CandleDataSet을 이용하여 CandleData Object 생성
이 Object를 Chart에 붙이면 차트가 완성된다고 이해하시면 됩니다. 다만 우리는 CombinedChart를 사용할 것이기에 CombinedData에 CandleData와 LineData를 Add시켜 주면 됩니다.
Retrofit 호출하는 부분은 앞 포스트에 자세하게 나와 있으므로 앞 포스트를 참고하시면 됩니다. Response를 받았을 때 로직을 설명드립니다.
1) CandleEntries 선언
List<CandleEntry> candleEntries = new ArrayList<>();
List<Entry> highBandEntries = new ArrayList<>();
List<Entry> lowBandEntries = new ArrayList<>();
List<Entry> cLineEntries = new ArrayList<>();
List<Entry> sLineEntries = new ArrayList<>();
2) for loop을 이용하여 CandleEntry에 데이터 Add
for(int i = 0; i < priceList.size() ; i++) {
float shadowH = Float.parseFloat(priceList.get(i).getStck_hgpr());
float shadowL = Float.parseFloat(priceList.get(i).getStck_lwpr());
float open = Float.parseFloat(priceList.get(i).getStck_oprc());
float close = Float.parseFloat(priceList.get(i).getStck_clpr());
float volume = Float.parseFloat(priceList.get(i).getAcml_vol());
int month = Integer.parseInt(priceList.get(i).getStck_bsop_date().substring(4,6));
int day = Integer.parseInt(priceList.get(i).getStck_bsop_date().substring(6,8));
xAxisLabel.add(Integer.toString(month) + "/" + Integer.toString(day));
candleEntries.add(new CandleEntry(i, shadowH, shadowL, open, close));
}
3) 데이터 Set 생성 및 속성 정의
데이터 Set을 생성하고, 양봉인 경우 빨간색을 음봉인 경우는 파란색으로 속성을 설정해 준다.
CandleDataSet dataSet = new CandleDataSet(candleEntries, "Price");
dataSet.setDrawIcons(false);
dataSet.setIncreasingColor(Color.RED);
dataSet.setIncreasingPaintStyle(Paint.Style.FILL);
dataSet.setDecreasingColor(Color.BLUE);
dataSet.setShadowColorSameAsCandle(true);
dataSet.setDrawValues(false);
4) CandleData 생성
CandleData data = new CandleData(dataSet);
이후 CombinedData에 CandleData를 Add시켜주면 CandleChart는 완성됩니다.
CombinedData combinedData = new CombinedData();
combinedData.setData(new CandleData(dataSet));