IT회사에서 성장하는 이야기

[javascript- chart.js] 대시보드 차트는 어떻게 기획하고 개발할까? 본문

스터디

[javascript- chart.js] 대시보드 차트는 어떻게 기획하고 개발할까?

somsamtam 2024. 10. 29. 00:47

최근 전문가와 사용자의 사용현황을 분석해서 보여주는 대시보드를 기획하고 있습니다.

 

개발자들은 어떻게 대시보드를 구현하는지 감이 안 와서 개발자분에게 물어보니 이 정보를 알려주더군요! 저는 처음에 직접 다 코딩을 한 건줄 알았답니다. 알고보니 웹에서 대시보드를 구현할 때 사용할 수 있는 오픈 소스가 있어서 금방 구현이 가능하다고요. 초보 기획자라는 것을 한번 더 느낍니다. 기획자는 어떻게 구현이 될지 대략적으로라도 알아야 일정을 짜고 계획을 하니까요.

 

아래 링크에 차트 구현 시 사용할 수 있는 많은 오픈 소스가 있어요, 언어와 니즈에 맞게 사용하시면 됩니다. 

https://awesome.cube.dev/?tools=charts

 

Front-end data tools — the awesome list

Front-end data tools for application developers: charting libraries, data grids, maps, etc.

awesome.cube.dev

 

아래와 같이 구체적인 구현 방법이 정리되어 있는 글을 보고 구현에 도움을 받았습니다. 

 

https://velog.io/@choichoijin/Chart.js%EB%A1%9C-%EC%B0%A8%ED%8A%B8-%ED%81%AC%EB%A6%AC%EA%B8%B0-React-Typescript

 

Chart.js로 방사형 차트 그리기 (React, Typescript)

React, Typescript와 차트 라이브러리 Chart.js를 이용해 방사형 차트 구현하기

velog.io

https://noanomal.tistory.com/3

 

[javascript] chart.js로 차트 그리기

Chart.js로 차트 그리기 본 페이지 내용은 아래 사이트의 그래프를 단순히 옮겨놓은 것입니다. 아래 페이지로 이동하시면 더 많은 차트를 보실 수 있습니다 !! tobiasahlin.com/blog/chartjs-charts-to-get-you-st

noanomal.tistory.com

 

'스터디' 카테고리의 다른 글

[B2B] B2B 고객사 전용 서비스 페이지 기획  (0) 2024.12.11
[BM] 뜯어보기 - 배달의민족  (0) 2024.11.11
[결제 시스템] 이해하기 - PG사와 VAN사 결제 시스템  (1) 2024.09.29
[앱 심사] 우리 서비스가 Spam이라고요? - Apple 앱 심사 리젝 대응 팁 :Guideline 4.3(b), Guideline 5.1.1  (8) 2024.09.29
[GA4] 믹스패널과 다른 GA4 셋팅하기  (0) 2024.09.26
'스터디' Related Articles more