Moostock(5) - Next.js 캔들스틱 그래프 그리기 (APEXCHARTS)

2024. 4. 9. 14:13·개발💻/Moostock
반응형

이제 주식에 일봉이나 주봉등을 캔들스틱 차트로 보여주는 걸 하려고 한다

 

구글링 해서 apexcharts 라는 라이브러리를 찾았다

 

ApexCharts.js - Open Source JavaScript Charts for your website

ApexCharts is a a free and open-source modern charting library that helps developers to create beautiful and interactive visualizations for web pages.

apexcharts.com

이미 유명해서 참고할만한 자료들도 많은거 같다

 

일단 샘플데이터를 넣어서 그래프가 그려지는지만 확인하고 싶었다

 

그냥 하라는대로 하면 잘 될줄알았는데 문제가 꽤나 많이 발생했다

 

에러가 많이나서 순서는 기억이 잘 안나서

 

주요 에러와 최종 코드만 보여주겠다

 

일단 설치는

npm install react-apexcharts apexcharts

이걸 하면 되고 그냥 공식문서 보면서 따라하려 했는데 아주 많은 에러가 발생했다

 

- Error: window is not defined

- TypeError: Cannot read properties of undefined (reading 'toString') apexchart

- ApexChart 은(는) JSX 구성 요소로 사용할 수 없습니다

- TypeError: Cannot read properties of undefined (reading 'type')

 

등등...

문제의 원인도 당연하게 여러가지인데

 

아직 정확한 원인은 설명할정도로 알지는 못해서 완성 코드만 보여주겠다

"use client";
import dynamic from "next/dynamic";
const ApexChart = dynamic(() => import("react-apexcharts"), { ssr: false });
export default function ChartPage({
  params: { label },
}: {
  params: { label: string };
}) {
  return (
    <div>
      <h1>라벨 : {label}</h1>
      <ApexChart
        type="candlestick"
        series={[
          {
            data: [
              [1538856000000, 6593.34, 6600, 6582.63, 6600],
              [1538856900000, 6595.16, 6604.76, 6590.73, 6593.86],
            ],
          },
        ]}
        width={700}
        height={500}
        options={{
          theme: {
            mode: "dark",
          },
          chart: {
            toolbar: {
              tools: {},
            },
            background: "transparent",
          },
          grid: {
            show: false,
          },
        }}
      />
    </div>
  );
}

뭐 여기저기서 긁어와서 덕지덕지 붙여서 이렇게 됐다

 

쨋든 

이렇게 그래프가 에러 없이 그려지긴 했따 ㅎ...

 

이제 그래프도 그리기를 성공했으니 진짜 데이터를 가져와서 그래프로 보여주는걸 성공하고 돌아오겠다!!

반응형
저작자표시 비영리 (새창열림)

'개발💻 > Moostock' 카테고리의 다른 글

Moostock(7) - 나스닥 종목 일봉 보여주기  (2) 2024.04.16
Moostock(6) - Next.js API 만들기, CORS해결, use client에서 api 호출 등등 고군분투..  (32) 2024.04.12
Moostock(4) - Next.js module css (scss)  (29) 2024.04.09
Moostock(3) - Next.js 라우팅 (not found routes, Dynamic routes, layout 등등..)  (26) 2024.02.21
Moostock(2) - Next.js 시작하기  (22) 2024.02.16
'개발💻/Moostock' 카테고리의 다른 글
  • Moostock(7) - 나스닥 종목 일봉 보여주기
  • Moostock(6) - Next.js API 만들기, CORS해결, use client에서 api 호출 등등 고군분투..
  • Moostock(4) - Next.js module css (scss)
  • Moostock(3) - Next.js 라우팅 (not found routes, Dynamic routes, layout 등등..)
Moooo_
Moooo_
나의 일상과 개발 공부 기록🤗
  • Moooo_
    MooooStory
    Moooo_
  • 전체
    오늘
    어제
    • 분류 전체보기 (131)
      • 일상☀️ (61)
        • 그냥 이것 저것 아무거나🌈 (48)
        • 무슐랭가이드🍽️ (8)
        • 독서📚 (1)
        • 여행🚶🏻 (4)
      • 개발💻 (70)
        • Vue (16)
        • React (0)
        • NEXT.JS (1)
        • JavaScript (5)
        • TypeScript (4)
        • CSS (2)
        • Moostock (14)
        • Python (1)
        • CS (0)
        • 알고리즘 (21)
        • DB (0)
        • 기타 (6)
  • 인기 글

  • 최근 글

  • 링크

    • 깃허브
    • 인스타
  • 반응형
  • hELLO· Designed By정상우.v4.10.0
Moooo_
Moostock(5) - Next.js 캔들스틱 그래프 그리기 (APEXCHARTS)
상단으로

티스토리툴바