HighCharts에는 Stock Tools이란 강력한 GUI도구가 있습니다. 이 툴은 차트 위에서 직접 분석 도구를 사용할 수 있게 하는 기능 모음(UI 툴바)입니다.
즉, 유명한 TradingView처럼 차트 위에 선을 긋거나 기술적 지표를 추가할 수 있는 기능입니다.
Stock Tools 개념
Highcharts Stock Tools는 단순한 차트 라이브러리를 넘어, 웹브라우저 상에서 전문적인 HTS(Home Trading System) 수준의 분석 환경을 구현해주는 GUI(그래픽 사용자 인터페이스) 모음입니다.
쉽게 말해, 개발자가 복잡한 분석 도구를 일일이 코딩할 필요 없이, 설정 하나만으로 차트 옆에 ‘전문가용 도구 상자’를 통째로 붙여준다고 생각하면 됩니다.
Stock Tools 주요 기능
Stock Tools의 기능들은 단순히 “보여주기용”이 아니며, 사용자가 직접 그린 선이나 설정한 지표 값을 저장하게 할수 있으며, 특히 “나만의 분석 차트 저장”이라는 강력한 멤버십 기능으로 연결할 수 있습니다.
그리기 도구 (Drawing Tools)
가장 기본적이면서도 강력한 기능입니다. 사용자가 차트 위에 직접 선이나 도형을 그려 기술적 분석을 할 수 있습니다.
-
추세선(Trend Line): 저점과 저점, 고점과 고점을 연결해 주가의 방향성을 확인합니다.
-
피보나치 되돌림(Fibonacci Retracements): 주가 조정의 폭을 예측하는 전문적인 도구입니다.
-
평행 채널(Parallel Channel): 주가가 움직이는 통로를 그려 박스권 매매 전략을 세울 수 있습니다.
기술적 지표 (Technical Indicators)
복잡한 수식 계산 없이 클릭 몇 번으로 수백 가지의 지표를 차트에 띄울 수 있습니다.
-
추세 지표: 이동평균선(SMA, EMA), 일목균형표 등.
-
보조 지표: RSI(상대강도지표), MACD, 볼린저 밴드 등.
-
커스텀: 사용자가 지표의 수치(예: 20일 이동평균선 -> 50일)를 직접 수정할 수 있는 GUI 설정창을 제공합니다.
주석 및 플래그 (Annotations & Flags)
차트의 특정 시점에 메모를 남기거나 이벤트를 표시하는 기능입니다.
-
텍스트 레이블: “매수 타이밍”, “중요 저항선” 등 분석 내용을 차트에 기록합니다.
-
뉴스 플래그: 특정 날짜에 발생한 공시나 뉴스 아이콘을 표시하여 주가 변동의 원인을 직관적으로 보여줍니다.
측정 도구 (Measure Tool)
마우스 드래그만으로 특정 구간의 변화를 즉시 계산해 줍니다.
-
가격 변화량: “이 구간에서 몇 달러가 올랐는가?”
-
수익률 계산: “저점 대비 현재 몇 % 상승했는가?”
-
기간 측정: “횡보 기간이 며칠 동안 지속되었는가?”
차트 컨트롤 및 뷰 설정 (Chart Controls)
사용자 편의를 극대화하는 운영 기능입니다.
-
전체 화면 모드(Fullscreen): 복잡한 지표를 넓은 화면에서 세밀하게 분석할 수 있습니다.
-
로그 스케일 전환: 급격한 변동이 있는 종목을 분석할 때 유용한 로그 차트 전환 기능을 제공합니다.
-
초기화(Reset): 여러 지표와 그림으로 지저분해진 차트를 한 번에 깨끗하게 정리합니다.
🤖 실전! 프론트엔드에 HighCharts 추가(2-8)
🧠 이번 실습은 프론트엔드의 HighCharts에 강력한 GUI도구인 Stock Tools을 사용할 수 있게 추가하는 과정입니다.
사전작업
- https://www.highcharts.com/demo/stock/stock-tools-gui 로 이동합니다.
- 좌측 하단의 JS Fiddle 나 Codepen을클릭합니다.
- HTML, CSS, JS를 복사해서 temp/temp.md에 기존 내용은 삭제하고 순서별로 붙여넣기 합니다.
- 크롬브라우저 확장 프로그램/Chrome 웹 스토어 방문하기를 선택합니다.
- Antigravity Browser Extension 찾고 설치 후 Antigravity 리스타트
✨ 사용자의 의도(Vibe)
temp/temp.md에 있는 highcharts의 HTML, CSS, JS를 참고해서 HighChartGUI.tsx에 stook tools를 추가해줘
💻 AI가 생성한 코드 (Syntax) 및 결과
- 🪄 바이브: “프론트엔드 컨테이너를 리빌드 리스타트해줘”
~my-project > docker compose up -d --build frontend
-
🚨 “Application error: a client-side exception has occurred while loading localhost (see the browser console for more information).” 라는 에러가 있습니다.
-
브라우저에서 마우스 우측버튼 “검사”를 클릭한후 “Console”탭을 선택합니다.
- 에러가 표시됩니다. 복사하고 🪄 바이브: “오류를 수정해줘” => 수정완료 후
~my-project > docker compose up -d --build frontend
- Stock Tools의 아이콘이 보이지 않습니다.
- stock-tools-icon.zip를 다운로드 하고 frontend/public/images/icons/stock-icons에 복사합니다.
- 🪄 바이브: Stock Tools의 아이콘이 보이지 않아 “frontend/public/images/icons/stock-icons” 를 사용하게 해줘
- 아이콘을 클릭해서 사용해 봅니다.