JSON데이터를 ApexCharts로 데이터 변환하여 캔들 형식 만들기

결과화면

 

---

 

1. npm 설치

npm install react-apexcharts apexcharts

1) apexcharts

 - 차트 엔진 ( 실제 그래프 그리는 핵심 라이브러리 )

 - 브라우저에서 차트 UI를 그리는 기능을 제공한다.

2) react-apexcharts

 - React에서 apexcharts를 쉽게 쓰드록 만든 래퍼이다.

 - React 컴포넌트 형태로 <Chart /> 를 사용할 수 있게 해준다.

import react

CandleChart.js

import React, { useState, useEffect } from "react";
import Chart from "react-apexcharts";
import axios from "axios";


function CandleChart() {
    const [candle, setCandle] = useState([]);

    useEffect(() => {
        axios
            .get("http://localhost:8000/chart/candle")   // ← 직접 호출
            .then(res => setCandle(res.data))
            .catch(err => console.log(err));
    }, []);

    const seriesData = candle.map(item => ({
        x: new Date(item.candle_date_time_kst),
        y: [
            item.opening_price,
            item.high_price,
            item.low_price,
            item.trade_price,
        ]
    }));

    const chartOptions = {
        chart: { type: "candlestick", height: 450 },
        xaxis: { type: "datetime" },
        yaxis: { tooltip: { enabled: true } },
    };

    return (
        <Chart
            options={chartOptions}
            series={[{ data: seriesData }]}
            type="candlestick"
            height={450}
        />
    );
}

export default CandleChart;

 

---

 ApexCharts 데이터 변환

const seriesData = candle.map(item => ({
    x: new Date(item.candle_date_time_kst),
    y: [
        item.opening_price,
        item.high_price,
        item.low_price,
        item.trade_price,
    ]
}));

ApexCharts의 캔들 차트는 위와 같은 형태로 넣어야한다.

{ x : 날짜, y : [시가, 고가, 저가, 종가] }

즉, Upbit 데이터를 ApexCharts 표준 포맷으로 변환 하는 부분을 담당한다.

(변수는 item이 아니라 아무거나 가능)

 

차트 옵션 설정

const chartOptions = {
    chart: { type: "candlestick", height: 450 },
    xaxis: { type: "datetime" },
    yaxis: { tooltip: { enabled: true } },
};

chart.type = "candlestick"

→ 캔들 차트를 그리겠다는 의미

 

xaxis.type = "datetime"

→ x축을 시간 축으로 쓰겠다는 의미

 

yaxis.tooltip.enabled = true

→ 마우스 hover 시 가격 정보 표시

 

실제 차트 렌더링

return (
    <Chart
        options={chartOptions}
        series={[{ data: seriesData }]}
        type="candlestick"
        height={450}
    />
);

ApexCharts 컴포넌트에 옵션과 데이터 전달해서 화면에 차트를 그림.

options → 차트설정

series → 실제 데이터

type="candlestick" → 차트 종류 명시

height → 차트 높이 조절 

---

이렇게 변경만 해주면 

이런식으로 차트가 바로 그려진다.

 

다음  포스팅에서는 이동 평균선을 넣어보도록 하자.