본문으로 건너뛰기
툴허브

차트 스튜디오

JSON 또는 CSV 데이터를 붙여넣으면 바로 차트를 생성하고 코드를 복사할 수 있습니다

데이터 입력

사용 가이드

지원 형식

  • •JSON 배열: [{"key": "value"}, ...] 형태의 객체 배열
  • •CSV: 첫 줄 헤더 + 쉼표 구분 데이터 (탭 구분도 지원)
  • •파일 드래그 & 드롭: .json, .csv 파일을 끌어다 놓기
  • •숫자 칼럼은 자동 감지되어 Y축 후보로 추천됩니다

차트 유형 안내

  • •막대(Bar): 카테고리별 값 비교에 적합, 가로/세로/누적 지원
  • •라인(Line): 시계열 추이 표현, 곡선 스무딩 지원
  • •영역(Area): 라인 차트에 면적 채우기 추가, 누적 비교에 적합
  • •파이(Pie): 전체 대비 비율 표현, Y축 1개만 선택
  • •산점도(Scatter): 두 변수 간 상관관계 분석
  • •레이더(Radar): 다차원 데이터 비교에 적합

활용 팁

  • •여러 Y축 필드를 선택하면 멀티 시리즈 차트가 됩니다
  • •생성된 ECharts Option 코드를 프로젝트에 바로 사용할 수 있습니다
  • •React Component 코드는 echarts-for-react 라이브러리가 필요합니다
  • •PNG 다운로드는 2배 해상도로 저장됩니다

차트 스튜디오란?

차트 스튜디오는 JSON·CSV 데이터를 붙여넣으면 바·라인·파이·산점도·레이더 등 6가지 차트를 즉시 생성하고 ECharts 코드와 React 컴포넌트 코드를 자동으로 만들어주는 데이터 시각화 도구입니다. 별도의 라이브러리 설치 없이 브라우저에서 바로 사용할 수 있으며, 생성된 차트를 PNG 이미지로 다운로드하거나 코드를 복사해 프로젝트에 바로 적용할 수 있습니다.

차트 스튜디오 활용 팁

  • CSV 데이터 활용: 엑셀에서 CSV로 내보낸 후 붙여넣으면 바로 차트가 생성됩니다.
  • 차트 타입 선택: 비교에는 바 차트, 추세에는 라인 차트, 비율에는 파이 차트가 가장 효과적입니다.
  • ECharts 코드 복사: 생성된 ECharts 옵션 코드를 바로 프로젝트에 붙여넣어 사용하세요.
  • React 컴포넌트: React 앱에 바로 사용할 수 있는 컴포넌트 코드도 함께 제공됩니다.
  • PNG 내보내기: 완성된 차트를 이미지로 저장해 보고서·발표자료에 바로 삽입하세요.