TOAST UI Chart 4.0 Beta 배포


image

2021년 1월 초 정식 배포를 앞둔 새로운 TOAST UI Chart 4.0를 미리 여러분께 공개합니다!

무엇이 바뀌었나요?

"svg" 에서 "canvas"로

TOAST UI Chart3은 svg기반이며 raphael.jstoast-ui.code-snippet에 의존을 갖고 개발되었습니다. 그중 raphael.js는 차트를 개발하는데 큰 도움이 되었지만 시간이 지남에 따라 업데이트가 되지 않고 있습니다.

이에 TOAST UI Chart는 자연스럽게 raphael.js를 더 이상 사용하지 않게 되었고 svg 기반의 차트를 과감하게 canvas 기반으로 변경해 새로운 차트를 개발했습니다. 이로써 TOAST UI Char4는 의존이 모두 사라지게 되었으며 더 가벼운 차트가 되었습니다.

더 많은 옵션, 더 많은 기능, 더 많은 테마

전체적인 차트의 디자인이 개선되었습니다. 좀 더 새로운 차트를 경험할 수 있게 되었습니다.

또한, 많은 요청이 있었던 반응형 레이아웃과 Live update 기능이 지원됩니다. 목적에 맞는 차트를 개발할 수 있게 많은 테마 옵션이 추가됩니다. 이 외에 직관적이지 못했던 매개변수들과 API 구조들이 수정되며 더 많은 작업들을 수행할 수 있게 되었습니다.

공개하지 않은 변화와 개선된 부분이 아직 많이 존재합니다. 조금만 더 기다려 주시고 정식 배포때 내용을 확인해보세요!😄

지금 바로 사용해볼 수 있습니다!

체험해보기

여러 종류의 차트를 체험할 수 있는 스토리북을 공개했습니다. 아래 링크로 들어가 체험할 수 있습니다!

설치하기

npm을 이용해 로컬에서 설치해 직접 설치할 수 있다.

npm install @toast-ui/chart@4.0.0-beta.1

Chart 4는 전체적인 사용성과 API 구조가 변경되어 Chart3의 가이드를 그대로 적용하기 어려울 수 있습니다. 또한, 현재는 가이드 문서가 존재하지 않아 codesandbox를 이용해 간단하게 수정해 보며 체험할 수 있도록 프로젝트를 만들었습니다.

아래 링크에 들어가 옵션을 수정해보고 체험해보세요! 👇👇👇

name link
Line https://codesandbox.io/s/linechart-bylpg
Area https://codesandbox.io/s/areachart-4kue2
Line-Area https://codesandbox.io/s/lineareachart-h82mq
Bar https://codesandbox.io/s/barchartstack-emuwg
Column https://codesandbox.io/s/columnchartgroupstack-0yoo8
Column-Line https://codesandbox.io/s/columnlinechart-u6c3j
Bullet https://codesandbox.io/s/bullet-3h7wn
BoxPlot https://codesandbox.io/s/boxplot-1hj2e
Treemap https://codesandbox.io/s/treemapchart-uf6w3
Heatmap https://codesandbox.io/s/heatmapchart-v2j5e
Scatter https://codesandbox.io/s/scatterchart-6dwbd
Line-Scatter https://codesandbox.io/s/linescatterchart-7s26i
Bubble https://codesandbox.io/s/bubblechart-oxtc4
Pie https://codesandbox.io/s/pie-cmh6o
Nested-Pie https://codesandbox.io/s/nested-pie-jmjrt
Radar https://codesandbox.io/s/radar-mgerf

아직 완벽하게 작업이 마무리되지 않아 추가 변경이 있을 수 있습니다. 읽어주셔서 고맙고 더 좋은 차트와 함께 1월에 찾아오도록 하겠습니다. 감사합니다!