๐Ÿ“Š JavaScript Best Chart Libraries

Ericยท2022๋…„ 10์›” 12์ผ
6

JavaScript

๋ชฉ๋ก ๋ณด๊ธฐ
1/1
post-thumbnail

๐ŸŸIndex

1๏ธโƒฃย [Chart Libaray ๋ž€?]

2๏ธโƒฃย [JavaScript Best Chart Libraries in 2022]

3๏ธโƒฃย [Chart.js ๋กœ ์•Œ์•„๋ณด๋Š” ์˜ˆ์‹œ]

๐Ÿงฉย Chart Library ๋ž€?

๋ฐ์ดํ„ฐ ์ˆ˜์ง‘์ด ์ฆ๊ฐ€ํ•จ์— ๋”ฐ๋ผ ๋ชจ๋“  ์กฐ์ง์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ์ฐจํŠธ๋‚˜ ํ‘œ๋กœ ํ‘œ์‹œํ•ด์•ผ ํ•˜๋Š” ํ•„์š”์„ฑ์ด ๋”์šฑ ์ค‘์š”ํ•ด์ง€๊ณ  ์žˆ๋‹ค. ๋ชจ๋“  ์‚ฌ๋žŒ์ด ์ดํ•ดํ•  ์ˆ˜ ์žˆ๋Š” ๋Œ€์‹œ๋ณด๋“œ์™€ ์ฐจํŠธ๋ฅผ ๋งŒ๋“ค๊ธฐ ์œ„ํ•ด ๊ฐœ๋ฐœ์ž๋Š” ๋งŽ์€ ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค ๋ ˆ์ฝ”๋“œ๋ฅผ ํ˜ผํ•ฉํ•ด์•ผ ํ•œ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ์ฐจํŠธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๊ฐ€ ๋„์ž…๋œ ์ดํ›„ ๋ฐ์ดํ„ฐ ์‹œ๊ฐํ™”๊ฐ€ ๊ฐœ์„ ๋˜์—ˆ๋‹ค. ์ด์ œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์™€ ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ํ†ตํ•ด ๋Œ€ํ™”ํ˜• ์ฐจํŠธ๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์‚ฌ์šฉ์ž์˜ ์š”๊ตฌ ์‚ฌํ•ญ์— ๊ฐ€์žฅ ์ ํ•ฉํ•œ JavaScript Charting Library๋ฅผ ์‹๋ณ„ํ•˜๊ธฐ ์œ„ํ•ด ๋‹ค์–‘ํ•œ ์˜ต์…˜์„ ์‚ดํŽด๋ณด์ž.

๐Ÿงฉย JavaScript Best Chart Libraries in 2022

  1. **[Chart.js]
  2. **[FusionCharts]
  3. **[Dygraphs]
  4. **[Victory]
  5. **[Chartist.js]
  6. **[D3.js]
  7. **[Recharts]
  8. **[AmCharts]
  9. **[Google Charts]
  10. **[AnyChart]
  11. **[Highcharts]
  12. **[Billboard.js]
  13. **[ApexCharts.js]
  14. **[NVD3]
  15. **[Vis.js]

๐ŸŒฑ1. Chart.js

Chart.js๋Š” 8๊ฐ€์ง€ ์œ ํ˜•์˜ ์ฐจํŠธ๋ฅผ ์ง€์›ํ•˜๋Š” ์˜คํ”ˆ ์†Œ์Šค JavaScriptย ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ž…๋‹ˆ๋‹ค. ํฌ๊ธฐ๊ฐ€ 60kb์— ๋ถˆ๊ณผํ•˜๊ธฐ ๋•Œ๋ฌธ์— JS ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๊ฐ€ ์ž‘๋‹ค. ๋ ˆ์ด๋”, ์ธ๋ผ์ธ ์ฐจํŠธ, ์›ํ˜• ์ฐจํŠธ, ๋ง‰๋Œ€ ์ฐจํŠธ, ์‚ฐ์ ๋„, ๋ฉด์  ์ฐจํŠธ, ๋ฒ„๋ธ” ์ฐจํŠธ ๋ฐ ํ˜ผํ•ฉ ์ฐจํŠธ๊ฐ€ ๋ชจ๋‘ ์ œ๊ณต๋œ๋‹ค. ์ƒ˜ํ”Œ์€ ์™ธ๊ด€์ด ์ƒ๋‹นํžˆ ํ˜„๋Œ€์ ์ด๊ณ , ์ฒ˜์Œ ๊ทธ๋ฆด ๋•Œ ์ฒซ ์• ๋‹ˆ๋ฉ”์ด์…˜์ด ํŠน์ง•. ์‹œ๊ณ„์—ด๋„ ์ง€์›๋œ๋‹ค. ๋ Œ๋”๋ง์—๋Š” ์บ”๋ฒ„์Šค ์š”์†Œ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉฐ, ํฌ๊ธฐ ์กฐ์ •์„ ์œ„ํ•ด ์ฐฝ ํฌ๊ธฐ ์กฐ์ •์— ๋ฏผ๊ฐํ•˜๋‹ค. Internet Explorer 9์™€์˜ ํ•˜์œ„ ํ˜ธํ™˜์„ฑ์ด ์žˆ์Šต๋‹ˆ๋‹ค.IE7์—์„œ๋„ ํด๋ฆฌํ•„์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๐ŸํŠน์ง•

  • ๋ชจ๋“  ์ฐจํŠธ ์œ ํ˜•์€ ๋ณ€๊ฒฝ ๋ฐ ์• ๋‹ˆ๋ฉ”์ด์…˜์ด ๊ฐ€๋Šฅํ•˜๋ฉฐ ๋ชจ๋“  ์ฐจํŠธ๋ฅผ ์˜จ๋ผ์ธ์œผ๋กœ ์‚ฌ์šฉํ•  ๊ฒฝ์šฐ ์‘๋‹ตํ•ฉ๋‹ˆ๋‹ค.
  • ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ์‚ฌ์šฉํ•˜์—ฌ ์‹œ์Šคํ…œ ๊ธฐ๋Šฅ ํ–ฅ์ƒ ๊ฐ€๋Šฅ
  • ๋ฌธ์„œ๊ฐ€ ํ›Œ๋ฅญํ•ฉ๋‹ˆ๋‹ค.
  • IE9+๋Š” ๋Œ€๋ถ€๋ถ„์˜ ๋ธŒ๋ผ์šฐ์ €์—์„œ ์ง€์›๋ฉ๋‹ˆ๋‹ค.

๐Ÿ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ์ฐจํŠธ

  • ๋ง‰๋Œ€

  • ์„ 

  • ํŒŒ์ด

  • ๋„๋„›

  • ๋ฒ„๋ธ”(bubble)

  • ์ง€์—ญ

  • ์Šค์ผ€ํ‹€๋Ÿฌ(Scatter)

  • ๋ ˆ์ด๋”

    ๐Ÿ๊ฐ€๊ฒฉ

  • ๋ฌด๋ฃŒ


๐ŸŒฑย 2. FusionCharts

Fusionย Charts๋Š” ํ˜„์žฌ ์‹œ์žฅ์—์„œ ๊ฐ€์žฅ ์™„์ „ํ•œ JavaScript ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ด๋ฉฐ 90๊ฐœ ์ด์ƒ์˜ ์ฐจํŠธ ์˜ต์…˜๊ณผ 900๊ฐœ์˜ ๋งต์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค. ์—…๊ณ„ ์ตœ๊ณ ์˜ ์™ธ๊ด€์„ ์ž๋ž‘ํ•˜๋Š” ์ฐจํŠธ๋ฅผ ๋ณด์œ ํ•˜๊ณ  ์žˆ์œผ๋ฉฐ ๋Œ€์‹œ๋ณด๋“œ๋ฅผ ํ†ตํ•œ ๊ฐ•๋ ฅํ•œ ๋ณด๊ณ ์„œ ์ž‘์„ฑ ๊ฒฝํ—˜์„ ํ†ตํ•ด ์ฐจํŠธ๋ฅผ ๋ฐฑ์—…ํ•˜๊ณ  ์žˆ๋‹ค. ๋ชจ๋“  ๋น„์ฆˆ๋‹ˆ์Šค ํ™œ๋™์„ ํ•œ๋ˆˆ์— ํŒŒ์•…ํ•  ์ˆ˜ ์žˆ๋‹ค.

Fusion Charts๋Š” PC, Mac, iPhone, Android ํƒœ๋ธ”๋ฆฟ์„ ํฌํ•จํ•œ ๋‹ค์–‘ํ•œ ์žฅ์น˜์™€ ํ˜ธํ™˜๋˜๋ฉฐ IE6๋ฅผ ํฌํ•จํ•œ ํฌ๋กœ์Šค ๋ธŒ๋ผ์šฐ์ € ํ˜ธํ™˜์„ฑ์„ ๋ณด์žฅํ•˜๊ธฐ ์œ„ํ•ด ๊ทธ ์ด์ƒ์˜ ๊ธฐ๋Šฅ์„ ์ œ๊ณตํ•œ๋‹ค.

๐ŸํŠน์ง•

  • 2D ๋ฐ 3D๋กœ ๊ตฌ์„ฑ๋œ ์ˆ˜์‹ญ ๊ฐ€์ง€ ์ฐจํŠธ ์˜ต์…˜๊ณผ ๋ชจ๋“  ๋Œ€๋ฅ™์„ ์•„์šฐ๋ฅด๋Š” 950๊ฐœ ์ด์ƒ์˜ ๋งต์ด ์žˆ์Šต๋‹ˆ๋‹ค.

  • ์• ๋‹ˆ๋ฉ”์ด์…˜์œผ๋กœ ์™„๋ฒฝํ•˜๊ฒŒ ๋Œ€ํ™” ๊ฐ€๋Šฅํ•œ ์ฐจํŠธ ๋ฐ ์ง€๋„

  • ASP.NET, PHP ๋ฐ Ruby on Rails ์„œ๋ฒ„์ธก API

  • jQuery, Angular, PHP, ASP. NET, React Native, Django, React, Ruby on Rails, Java ๋“ฑ์ด ๋ชจ๋‘ ์ง€์›๋ฉ๋‹ˆ๋‹ค.

  • ์‚ฌ์šฉ์ž ํ•ธ๋“œ๋ถ๊ณผย APIย ๋ ˆํผ๋Ÿฐ์Šค๋Š” ๋ชจ๋‘ ๋งค์šฐ ํฌ๊ด„์ ์ž…๋‹ˆ๋‹ค.

  • ์‚ดํŽด๋ณผ ์ƒ˜ํ”Œ๊ณผ ๋Œ€์‹œ๋ณด๋“œ๊ฐ€ ๋ช‡ ๊ฐœ ์žˆ์Šต๋‹ˆ๋‹ค.

  • ์ด์ „ ๋ธŒ๋ผ์šฐ์ € ์ง€์› ๊ฐ€๋Šฅ

  • PNG, JPG ๋˜๋Š” PDF ํŒŒ์ผ์„ ๋‚ด๋ณด๋‚ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  • ์ง€์› ์„œ๋น„์Šค๋Š” ๊ธฐ์ˆ  ์ž๋ฃŒ ๋ฐ ์ปค๋ฎค๋‹ˆํ‹ฐ ํฌ๋Ÿผ ํ˜•์‹์œผ๋กœ ์ œ๊ณต๋ฉ๋‹ˆ๋‹ค.

  • ๋ผ์ด์„ผ์Šค ์†Œ์œ ์ž๋Š” ์šฐ์„  ์ˆœ์œ„ ์ง€์›์— ์ œํ•œ ์—†์ด ์•ก์„ธ์Šคํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

    ๐Ÿ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ์ฐจํŠธ

  • ๋ง‰๋Œ€

  • ๊ธฐ๋‘ฅ.

  • ์„ 

  • ์ง€์—ญ

  • ํŒŒ์ด

  • ํŠธ๋ฆฌ๋งต์Šค

  • ํžˆํŠธ๋งต

  • ๊ฐ„ํŠธ ์ฐจํŠธ(Gantt Charts)

  • ๋งˆ๋ฆฌ๋ฉ”์ฝ” ์ฐจํŠธ(Marimekko Charts)

  • ๊ฒŒ์ด์ง€(Gauges0

  • ์ŠคํŒŒ์ด๋” ์ฐจํŠธ

  • ์›Œํ„ฐํด ์ฐจํŠธ

    ๐Ÿ๊ฐ€๊ฒฉ

  • ์—ฐ๊ฐ„ 499๋‹ฌ๋Ÿฌ๋ถ€ํ„ฐ ์‹œ์ž‘


๐ŸŒฑย 3. Dygraphs

Dygraphs๋Š” ์—…๊ณ„์—์„œ ๊ฐ€์žฅ ๋น ๋ฅธ ์ฐจํŠธ ๋ Œ๋”๋ง ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์ค‘ ํ•˜๋‚˜๋กœ ๊ฐ„์ฃผ๋˜๋Š” ์˜คํ”ˆ ์†Œ์Šค ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ž…๋‹ˆ๋‹ค. ๋Œ€๋Ÿ‰์˜ ๋ฐ์ดํ„ฐ๋ฅผ ์‰ฝ๊ฒŒ ์ฒ˜๋ฆฌํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋ฐ์ดํ„ฐ ๋ถ„์„๊ฐ€๋Š” ์ด JavaScript ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋Œ€์šฉ๋Ÿ‰ ๋ฐ์ดํ„ฐ ์„ธํŠธ๋ฅผ ์ฒ˜๋ฆฌํ•˜๊ณ  ๋›ฐ์–ด๋‚œ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ์ œ๊ณตํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.์ด ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋Š” ๋›ฐ์–ด๋‚œ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ์ œ๊ณตํ•˜๋ฉด์„œ๋„ ์ˆ˜๋งŒ ๊ฐœ์˜ ๋ฐ์ดํ„ฐ ์„ธํŠธ๋ฅผ ์ฒ˜๋ฆฌํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๐Ÿย ํŠน์ง•

  • ์—ฌ๋Ÿฌ ์ฐจํŠธ ๋™๊ธฐํ™”

  • ์ด Range/ViewFinder์—๋Š” ์ฃผ์„๊ณผ ๋งค์šฐ ๋งž์ถค ๊ฐ€๋Šฅํ•œ ์ฃผ์„์ด ์žˆ์Šต๋‹ˆ๋‹ค.

  • ์‹œ์ž‘์€ ๋งค์šฐ ๊ฐ„๋‹จํ•ฉ๋‹ˆ๋‹ค.

  • ๋ฐ์ดํ„ฐ๋ฅผ ์‹ค์‹œ๊ฐ„์œผ๋กœ ํ‘œ์‹œํ•˜๋Š” ๋ฐ ์ด์ƒ์ ์ž…๋‹ˆ๋‹ค.

  • ๋ฐ์ดํ„ฐ ํฌ์ธํŠธ์˜ ํ”ผ๋“œ๋ฐฑ์€ ๋งค์šฐ ๊ณ ์†์œผ๋กœ ๋ฐ์ดํ„ฐ๊ฐ€ ์ฐจํŠธ ๋ฐ–์œผ๋กœ ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค.

  • ํ™•๋Œ€/์ถ•์†Œ ๊ธฐ๋Šฅ

  • JSFiddles์— ๋Œ€ํ•œ ๋งํฌ๊ฐ€ ์žˆ๋Š” ์ƒ˜ํ”Œ์ด ๋งŽ์ด ์žˆ์Šต๋‹ˆ๋‹ค.

  • ๊ธฐ๋ณธ ์–ด๋ ˆ์ด๋กœ ๋ฐ์ดํ„ฐ ์กฐ์ž‘์ด ๊ฐ„๋‹จํ•˜๊ฑฐ๋‚˜ ํ…์ŠคํŠธ ๋˜๋Š” CSV ํŒŒ์ผ์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ๋กœ๋“œํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

    ๐Ÿย ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ์ฐจํŠธ

  • ์„ 

  • ๋ฉ€ํ‹ฐ๋ผ์ธ

    ๐Ÿย ๊ฐ€๊ฒฉ

  • ๋ฌด๋ฃŒ


๐ŸŒฑ4.Victory

Victory๋Š” ์ฐจํŠธ๋ฅผ ๋งŒ๋“ค๊ธฐ ์œ„ํ•œ ๊ธฐ๋ฐ˜์„ ๋งˆ๋ จํ•˜๋Š” ํ›Œ๋ฅญํ•œ ํ–‰๋™์„ ํ•œ๋‹ค.๋‹จ์ผ ๊ทธ๋ž˜ํ”„์— ๋Œ€ํ•ด ์ถ•, ๋ ˆ์ด๋ธ” ๋ฐ ์—ฌ๋Ÿฌ ๋ฐ์ดํ„ฐ ์„ธํŠธ๋ฅผ ์‚ฌ์šฉ์ž ์ •์˜ํ•˜๋Š” ์ž‘์—…์€ ๋ชจ๋‘ ๋น„๊ต์  ๊ฐ„๋‹จํ•˜๋ฉฐ ์Šคํƒ€์ผ ์˜ต์…˜ ๋ฐ ๋™์ž‘์„ ์กฐ์ •ํ•˜๋Š” ์ž‘์—…์€ ๊ฐ„๋‹จํ•˜๊ณ  ์ง๊ด€์ ์ž…๋‹ˆ๋‹ค.๋งค์šฐ ํšจ๊ณผ์ ์ด๊ณ  ์˜คํ”ˆ ์†Œ์Šค์ด๋ฉฐ ์ฝ”๋“œ๋ฅผ ๊ฑฐ์˜ ์‚ฌ์šฉํ•˜์ง€ ์•Š๊ณ ๋„ ๋ฉ‹์ง„ ์ฐจํŠธ๋ฅผ ๋งŒ๋“ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.ํฌ๋กœ์Šค ํ”Œ๋žซํผ ์†Œํ”„ํŠธ์›จ์–ด๋ฅผ ์ฐพ๊ณ  ๊ณ„์‹ ๋‹ค๋ฉด ํ™•์ธํ•ด ๋ณด์‹œ๊ธฐ ๋ฐ”๋ž๋‹ˆ๋‹ค.

๐Ÿย ํŠน์ง•:

  • ๋ณต์žกํ•œ ์ฐจํŠธ ์ž‘์„ฑ์— ์‚ฌ์šฉํ•˜๊ธฐ ์‰ฌ์šด ์ปดํฌ๋„ŒํŠธ

  • ์ž์ฒด ์™„๋น„๋˜์–ด ์žฌ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ๋ฐ์ดํ„ฐ ์‹œ๊ฐํ™” ๋ชจ๋“ˆ์ด ์Šคํƒ€์ผ ์˜ต์…˜ ๋ฐ ๋™์ž‘์„ ๋‹ด๋‹นํ•ฉ๋‹ˆ๋‹ค.

  • Android์™€ iOS ์‹œ์Šคํ…œ์€ ๋™์ผํ•œ API๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

    ๐Ÿ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ์ฐจํŠธ

  • Line

  • Graph

  • Pie

  • Area Hover Styles

  • Radar Chart

  • Polar Cardioid

  • Stream Graph

  • Staked Histogram

    ๐Ÿ๊ฐ€๊ฒฉ:

  • ๋ฌด๋ฃŒ


๐ŸŒฑย 5. Chartist.js

Chartist.js๋Š” ์ตœ์ฒจ๋‹จ SVG ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ž…๋‹ˆ๋‹ค.์ด ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋กœ ์ž‘์„ฑ๋œ ์ฐจํŠธ์˜ SVG ์• ๋‹ˆ๋ฉ”์ด์…˜์ด ๊ฐ€์žฅ ์ฃผ๋ชฉํ•  ๋งŒํ•œ ๊ธฐ๋Šฅ์ž…๋‹ˆ๋‹ค.๊ฐ•๋ ฅํ•œ ๊ธฐ์ˆ  ๊ธฐ๋ฐ˜์„ ๊ฐ€์ง€๊ณ  ์žˆ์œผ๋ฉฐ, ์˜คํ”ˆ ์†Œ์Šค์ด๋ฉฐ ์‹คํ–‰์ด ๊ฐ„๋‹จํ•ฉ๋‹ˆ๋‹ค.๋ชจ๋“  ๋ฐฑ์—”๋“œ ๋ฐ์ดํ„ฐ ์†Œ์Šค์™€ ๋Œ€ํ™”ํ•˜๋Š” ๋งค์šฐ ์ธ์ƒ์ ์ธ ๊ทธ๋ž˜ํ”ฝ์„ ๋ช‡ ๋ถ„ ๋งŒ์— ์ƒ์„ฑํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.Chartist๋Š” Sass๋ฅผย ์‚ฌ์šฉํ•˜์—ฌ ๋งž์ถคํ™”ํ•  ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ์„ค์ •๋„ ๋งค์šฐ ๊ฐ„๋‹จํ•ฉ๋‹ˆ๋‹ค.

๐Ÿย ํŠน์ง•

  • ํ™˜์ƒ์ ์ธ ์• ๋‹ˆ๋ฉ”์ด์…˜

  • API ์„ค๋ช…์„œ์—์„œ ์ค‘์š”ํ•œ ์ •๋ณด๋ฅผ ๋ชจ๋‘ ์ œ๊ณตํ•˜์ง€๋งŒ ํƒ์ƒ‰์— ๋ถˆํŽธํ•˜์—ฌ ์Šคํฌ๋กค์ด ๋งŽ์ด ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.

  • ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ์‚ฌ์šฉํ•˜์—ฌ ๊ธฐ๋Šฅ ํ–ฅ์ƒ ๊ฐ€๋Šฅ

  • ์ฐจํŠธ๋Š” SVG๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๊ทธ๋ ค์ง‘๋‹ˆ๋‹ค.

  • ์ด์ „ ๋ธŒ๋ผ์šฐ์ € ์ง€์› ๊ฐ€๋Šฅ

    ๐Ÿย ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ์ฐจํŠธ

  • ์„ 

  • ๋ง‰๋Œ€

  • ํŒŒ์ด

    ๐Ÿ๊ฐ€๊ฒฉ:

  • ๋ฌด๋ฃŒ


๐ŸŒฑ6. D3.js

D3.js๋Š” ๊ฐ•๋ ฅํ•œ ์˜คํ”ˆ ์†Œ์Šค JavaScript ๋ฐ์ดํ„ฐ ์‹œ๊ฐํ™” ํ”„๋ ˆ์ž„์›Œํฌ์ž…๋‹ˆ๋‹ค.D3๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ผ๊ธฐ๋ณด๋‹ค๋Š” ํ”„๋ ˆ์ž„์›Œํฌ์— ๊ฐ€๊น์Šต๋‹ˆ๋‹ค.์ฒ˜์Œ์—๋Š” ํฐ ๋ฌธ์ œ๋กœ ๋ณด์ผ ์ˆ˜ ์žˆ๋Š” ์ž‘์—…ํ•˜๊ธฐ ์‰ฝ์ง€ ์•Š์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.๊ทธ๋Ÿฌ๋‚˜ ์ด์šฉ ๊ฐ€๋Šฅํ•œ ์œ ์šฉํ•œ ์ •๋ณด ์‚ฌ์ดํŠธ๊ฐ€ ๋„ˆ๋ฌด ๋งŽ์Šต๋‹ˆ๋‹ค.๋งˆ์ง€๋ง‰์œผ๋กœ, ๋ชจ๋“  ์ข…๋ฅ˜์˜ ๋†€๋ผ์šด ์‹œ๊ฐํ™” ๋ฐ ๋น„์ฃผ์–ผ์„ ์ฒ˜์Œ๋ถ€ํ„ฐ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ์œผ๋ฏ€๋กœ D3๋Š” ์ถฉ๋ถ„ํžˆ ์‹œ๊ฐ„์„ ๋“ค์ผ ๊ฐ€์น˜๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

๐Ÿย ํŠน์ง•

  • ๋Œ€๋ถ€๋ถ„์˜ ๊ธฐ์กด JavaScript ์ฐจํŠธ ์ž‘์„ฑ ํ”„๋ ˆ์ž„์›Œํฌ๋ณด๋‹ค ํ›จ์”ฌ ๋งŽ์€ ์ฐจํŠธ ์˜ต์…˜์„ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค.

  • ํ•™์Šต ๊ณก์„ ์ด ๊ฐ€ํŒŒ๋ฅด๋‹ค

  • DOM ์กฐ์ž‘์— ๋Œ€ํ•œ ๋ฐ์ดํ„ฐ ์ค‘์‹ฌ ์ ‘๊ทผ ๋ฐฉ์‹์„ ์ •๊ตํ•œ ์‹œ๊ฐํ™” ๊ตฌ์„ฑ ์š”์†Œ์™€ ๊ฒฐํ•ฉ

  • ๋ธŒ๋ผ์šฐ์ € ๋‚ด ์š”์†Œ ๊ฒ€์‚ฌ๊ธฐ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋””๋ฒ„๊น…ํ•˜๋Š” ๋ฐฉ๋ฒ•์€ ๊ฐ„๋‹จํ•ฉ๋‹ˆ๋‹ค.

  • ์ˆ˜๋ฐฑ ๊ฐœ์˜ ์ƒ˜ํ”Œ์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  • ๊ณก์„ ์„ ์ƒ์„ฑํ•˜๋Š” ํ•จ์ˆ˜

  • ๋“œ๋ž˜๊ทธ ์•ค ๋“œ๋กญ ๊ธฐ๋Šฅ

    ๐Ÿย ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ์ฐจํŠธ

  • ๋ง‰๋Œ€

  • ์›ํ˜•

  • ํŒŒ์ด

  • ๋„๋„›

  • ์„ 

  • ๊ฑฐํ’ˆ

    ๐Ÿย ๊ฐ€๊ฒฉ

  • ๋ฌด๋ฃŒ


๐ŸŒฑ7. Recharts

Recharts๋Š”ย ์„ ์–ธ์  ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ๋…ธ์ถœํ•˜๊ณ  ํ›„๋“œ ์•„๋ž˜์— D3๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.์˜คํ”ˆ ์†Œ์Šค, ๊ฒฝ๋Ÿ‰, SVG ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ Œ๋”๋งํ•˜์—ฌ ๋†€๋ผ์šด ์ธํ„ฐ๋ž™ํ‹ฐ๋ธŒ ์ฐจํŠธ๋ฅผ ๋งŒ๋“ญ๋‹ˆ๋‹ค.์‚ฌ์šฉํ•˜๊ธฐ ์‰ฝ๊ณ  ์„ค๋ช…์„œ๋„ ์žฌ๋ฏธ์žˆ์Šต๋‹ˆ๋‹ค.

๋ฒ”๋ก€ ํˆดํŒ ๋ฐ ๋ ˆ์ด๋ธ”๊ณผ ๊ฐ™์€ ์ผ๋ฐ˜ ์ฐจํŠธ ์˜ต์…˜์ด ๋‚ด์žฅ๋˜์–ด ์ •์  ์ฐจํŠธ์—์„œ๋„ ์ž˜ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค.๊ฐ™์€ ํŽ˜์ด์ง€์— ์žˆ๋Š” ๋‹ค์ˆ˜์˜ ์• ๋‹ˆ๋ฉ”์ด์…˜ ์ฐจํŠธ ๋ฐ ๋Œ€๊ทœ๋ชจ ๋ฐ์ดํ„ฐ์…‹์„ ์ฒ˜๋ฆฌํ•  ๊ฒฝ์šฐ ์†๋„๊ฐ€ ๋Š๋ ค์งˆ ์ˆ˜ ์žˆ์ง€๋งŒ ๋Œ€๋ถ€๋ถ„์˜ ๊ฒฝ์šฐ ์ถฉ๋ถ„ํ•ฉ๋‹ˆ๋‹ค.

๐ŸํŠน์ง•

  • ์žฌ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ React ์ปดํฌ๋„ŒํŠธ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ฐจํŠธ๋ฅผ ์‰ฝ๊ฒŒ ์ƒ์„ฑ

  • SVG ์š”์†Œ ์œ„์— ๊ตฌ์„ฑ๋˜๋ฉฐ D3 ํ•˜์œ„ ๋ชจ๋“ˆ์— ๋”ฐ๋ผ ๋น›์— ์˜์กดํ•ฉ๋‹ˆ๋‹ค.

  • ์ปดํฌ๋„ŒํŠธ ์†์„ฑ์„ ์กฐ์ •ํ•˜๊ณ  ์ปค์Šคํ…€ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ถ”๊ฐ€ํ•˜์—ฌ ์ฐจํŠธ๋ฅผ ์ปค์Šคํ„ฐ๋งˆ์ด์ฆˆํ•ฉ๋‹ˆ๋‹ค.

  • ๋ช‡ ๊ฐ€์ง€ ์œ ์šฉํ•œ ์˜ˆ์ œ๊ฐ€ ํฌํ•จ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค.

    ๐Ÿย ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ์ฐจํŠธ

  • ์„ 

  • ๋ง‰๋Œ€

  • ํŒŒ์ด

  • Area Chart

    ๐Ÿย ๊ฐ€๊ฒฉ

  • ๋ฌด๋ฃŒ


๐ŸŒฑ8. AmChart

AmCharts๋Š” ์‚ฌ์šฉ์ž๊ฐ€ ๋ฐ์ดํ„ฐ ํ‘œ์‹œ๋ฅผ ์‚ฌ์šฉ์ž ์ •์˜ํ•  ์ˆ˜ ์žˆ๋Š” ๋‹ค์–‘ํ•œ ์ฐจํŠธ ์˜ต์…˜์ด ์žˆ๋Š” ๋Œ€ํ˜• ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ž…๋‹ˆ๋‹ค.ํ”„๋ฆฌ๋ฏธ์—„ ๋ชจ๋ธ์˜ ํ”„๋ฆฌ๋ฏธ์—„ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ž…๋‹ˆ๋‹ค.์ง€๋„์™€ ์ฐจํŠธ๋Š” ๋ˆ„๊ตฌ๋‚˜ ๋ฐ์ดํ„ฐ๋ฅผ ์‹œ๊ฐํ™”ํ•˜๊ณ  ๋ถ„์„ํ•˜๋Š” ๋ฐ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.๋‹จ, ์ถฉ์ „ํ•  ์ˆ˜ ์žˆ๋Š” ๋ช‡ ๊ฐ€์ง€ ์ค‘์š”ํ•œ ํŠน์„ฑ์ด ์žˆ์Šต๋‹ˆ๋‹ค.

๐ŸํŠน์ง•

  • ํ™˜์ƒ์ ์ธ ์• ๋‹ˆ๋ฉ”์ด์…˜

  • ๊ทธ๋ฆผ ์ฐจํŠธ ์ž‘์„ฑ ๊ธฐ๋Šฅ

  • ์ตœ๋Œ€ ๋งž์ถค ๊ฐ€๋Šฅ

  • TypeScript/ES6์™€ Vanilla JS์˜ ์˜ˆ๋ฅผ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค.

  • ํ›Œ๋ฅญํ•œ ๋ฌธ์„œ

  • ์›ํ˜• ์ฐจํŠธ ๋˜๋Š” ๋ง‰๋Œ€ ์ฐจํŠธ ๋‚ด์— ์ฐจํŠธ๋ฅผ ์ค‘์ฒฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

    ๐Ÿ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ์ฐจํŠธ

  • Bar

  • Pie

  • Annotation

  • Donut

  • Line

  • Bubble

  • Area

  • Funnel

  • Pyramid

  • Marimekko

  • Candlestick

  • Scatter

  • Gauge

  • Gant

  • TreeMap

  • Spark

  • Bullet

  • Heat

  • Radar

    ๐Ÿ๊ฐ€๊ฒฉ

  • 90๋‹ฌ๋Ÿฌ ๋ถ€ํ„ฐ ์‹œ์ž‘


๐ŸŒฑ9. Google Charts

๊ตฌ๊ธ€ย ์ฐจํŠธ๋Š” ์˜ค๋žซ๋™์•ˆ ์กด์žฌํ•ด ์˜จ ์ฐจํŠธ ์ž‘์„ฑ ํŒจํ‚ค์ง€์ด๋ฉฐ ๋„๋ฆฌ ์‚ฌ์šฉ๋˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.์ด ๋ฉ”๋‰ด์–ผ์€ ํ’๋ถ€ํ•œ ๋ฉ”๋‰ด์–ผ๊ณผ ํ•จ๊ป˜ ์ œ๊ณต๋˜๊ณ  ์žˆ์–ด, ๋„์ž…์— ๋„์›€์ด ๋ฉ๋‹ˆ๋‹ค.๊ฒŒ๋‹ค๊ฐ€ ๊ตฌ๊ธ€ ์ฐจํŠธ๋Š” ์‹œ๊ฐ์ ์ธ ์ฆ‰๊ฐ์ ์ธ ์‹คํ˜„์„ ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ•˜๋Š” ๋ฐ˜ํ˜„๋Œ€์ ์ธ ๋””์ž์ธ๊ณผ ๋ฏธ๋ฆฌ ์„ค์ •๋œ ์ƒ‰์ฑ„ ์ฒด๊ณ„๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค.

๐Ÿย ํŠน์ง•

  • ๋Œ€๋ถ€๋ถ„์˜ ๊ธฐ๋Šฅ์€ ๋ฌด๋ฃŒ๋กœ ์‚ฌ์šฉ ๊ฐ€๋Šฅ

  • ํˆดํŒ

  • ์ƒ˜ํ”Œ์ด ํฌํ•จ๋œ ๊ด‘๋ฒ”์œ„ํ•œ ์‚ฌ์šฉ์ž ๋ฌธ์„œ

  • ์ฃผ์„

  • ๊ฐ€์žฅ ์ž˜ ์ž‘๋™ํ•˜๋Š” ์‹œ๊ฐ์  ์ฐจํŠธ ๊ฒŒ์ด์ง€

  • ์ฐจํŠธ๋ฅผ ํ™•๋Œ€ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

    ๐Ÿ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ์ฐจํŠธ

  • Bar

  • Line

  • Pie

  • Donut

  • Annotation

  • Area

  • Bubble

  • Scatter

  • Gant

  • Candlestick

  • Map

  • Gauge

  • Bullet

  • TreeMap

    ๐Ÿ๊ฐ€๊ฒฉ

  • ๋ฌด๋ฃŒ


๐ŸŒฑ10. AnyChart

AnyChart๋Š” SVG/VML๋กœ ๋ Œ๋”๋งํ•˜๋Š” ๊ธฐ๋Šฅ์ด ํ’๋ถ€ํ•˜๊ณ  ๊ฐ€๋ณ๊ณ  ๊ฒฌ๊ณ ํ•œ JS ์ฐจํŠธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ž…๋‹ˆ๋‹ค. ์›น ๊ฐœ๋ฐœ์ž๋Š” ๋‹ค์–‘ํ•œ ์ฐจํŠธ๋ฅผ ์„ค๊ณ„ํ•˜์—ฌ ๋ฐ์ดํ„ฐ ๋ถ„์„ ๋ฐ ๋ฐ์ดํ„ฐ ์ค‘์‹ฌ ์˜์‚ฌ ๊ฒฐ์ •์„ ์ง€์›ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.Android, Angular, Elasticsearch, iOS, Qlik, Oracle APEX, React, Vue.js ๋“ฑ์„ ํ†ตํ•ฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.์ฝ”๋“œ ์ž๋™ ์™„์„ฑ์ด ๊ฐ€๋Šฅํ•œ ์ „์šฉ ๋†€์ดํ„ฐ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ๋‹ค์–‘ํ•œ ์ƒ˜ํ”Œ๊ณผ ๋Œ€์‹œ๋ณด๋“œ๋ฅผ ์ด์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๐ŸํŠน์ง•

  • ์ฐจํŠธ์˜ ๋ฐ์ดํ„ฐ๋ฅผ ๋“œ๋ฆด๋‹ค์šดํ•ฉ๋‹ˆ๋‹ค.

  • ์ฆ‰์‹œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๊ธฐ์ˆ  ๋ถ„์„ ์ง€ํ‘œ ๋ฐ ์ฃผ์„

  • ํ’๋ถ€ํ•œ ๋ฌธ์„œ, API ๋ฐ ์œ ์šฉํ•œ ๊ณ ๊ฐ ์„œ๋น„์Šค

  • ์ด์ „ ๋ธŒ๋ผ์šฐ์ € ์ง€์› ๊ฐ€๋Šฅ

  • ์ฐจํŠธ๋ฅผ PDF, JPG, PNG ๋˜๋Š” SVG ๊ทธ๋ž˜ํ”ฝ์Šค ๋ฐ XSLX ๋˜๋Š” CSV ํŒŒ์ผ์˜ ์ฐจํŠธ ๋ฐ์ดํ„ฐ๋กœ ๋‚ด๋ณด๋‚ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

    ๐Ÿ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ์ฐจํŠธ

  • Bar

  • Pie

  • Graph

  • Line

  • Stock Charts

  • Maps

  • Gantt

  • PERT charts

    ๐Ÿ๊ฐ€๊ฒฉ

  • ํ”Œ๋žœ์€ ์ œํ’ˆ๋‹น 49๋‹ฌ๋Ÿฌ๋ถ€ํ„ฐ ์‹œ์ž‘


๐ŸŒฑ11. Highcharts

HighCharts๋Š” ๋งŽ์€ ๋Œ€๊ธฐ์—…์—์„œ ์‚ฌ์šฉ๋˜๋Š” ์ธ๊ธฐ ์žˆ๋Š” JavaScript ์ฐจํŠธ ์ž‘์„ฑ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ž…๋‹ˆ๋‹ค.์ฐจํŠธ๋Š” SVG๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ž‘์„ฑํ•œ ํ›„ IE6์—์„œ IE8๋กœ์˜ ํ•˜์œ„ ํ˜ธํ™˜์„ฑ์„ ์œ„ํ•ด VML๋กœ ๋ณ€ํ™˜๋ฉ๋‹ˆ๋‹ค.๋ฐ๋ชจ ์ฐจํŠธ์—๋Š” ๋ช‡ ๊ฐ€์ง€ ๋›ฐ์–ด๋‚œ ๊ธฐ๋Šฅ์ด ์žˆ์ง€๋งŒ ์‹œ๊ฐ์ ์œผ๋กœ ๋งค๋ ฅ์ ์ด์ง€ ์•Š์Šต๋‹ˆ๋‹ค.API ๋งค๋‰ด์–ผ ํŠœํ† ๋ฆฌ์–ผ์€ ์—ฌ๊ธฐ์— ๊ธฐ์žฌ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค.๋˜, ์ผ๋ฐ˜์ ์ธ ๋ฉ”๋‰ด์–ผ์— ๊ธฐ์žฌ๋˜์–ด ์žˆ๋Š” ์ค‘์š”ํ•œ ํ† ํ”ฝ๋„ ๋‹ค์ˆ˜ ๊ธฐ์žฌ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค.

๐ŸํŠน์ง•

  • ์™„์ „ํžˆ JavaScript๋กœ ์ž‘์„ฑ๋˜์–ด ์žˆ์–ด ์–ด๋””์„œ๋“  ๋ฐ์ดํ„ฐ๋ฅผ ๋ถˆ๋Ÿฌ์˜ฌ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  • ์ƒ์„ธํ•œ ๋ฌธ์„œ, API ๋ ˆํผ๋Ÿฐ์Šค ๋ฐ ์ปค๋ฎค๋‹ˆํ‹ฐ ์‡ผ์ผ€์ด์Šค

  • ์ฐจํŠธ ๋ฐ์ดํ„ฐ ๋ฐ ๊ธฐํƒ€ ์ƒํ˜ธ ์ž‘์šฉ ์˜ต์…˜์„ ๋“œ๋ฆด๋‹ค์šดํ•ฉ๋‹ˆ๋‹ค.

  • React, Angular, Meteor ๋“ฑ๊ณผ ํ•จ๊ป˜ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค.

    NET, iOS ๋ฐ ๊ธฐํƒ€ ํ”„๋ ˆ์ž„์›Œํฌ

  • PNG, JPG, PDF ๋ฐ SVG ํŒŒ์ผ์„ ๋ชจ๋‘ ๋‚ด๋ณด๋‚ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  • ํ”„๋ฆฌ๋ฏธ์—„ ์ด๋ฉ”์ผ ๋ฐ Skype ์ง€์›์€ ํ•„์š”ํ•œ ๋ผ์ด์„ ์Šค๋ฅผ ๊ฐ€์ง„ ์ƒ์šฉ ์‚ฌ์šฉ์ž์—๊ฒŒ๋งŒ ์ œ๊ณต๋ฉ๋‹ˆ๋‹ค.

    ๐Ÿย ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ์ฐจํŠธ

  • Line

  • Area

  • Bar

  • Pie

  • Donut

  • Scatter and bubble

  • Combinations

  • 3D charts

  • Gauges

  • Heat and treemaps

    ๐Ÿ๊ฐ€๊ฒฉ

  • ์—ฐ๊ฐ„ 535๋‹ฌ๋Ÿฌ๋ถ€ํ„ฐ ์‹œ์ž‘


๐ŸŒฑ12. Billboard.js

Billboard.js๋Š” ์˜คํ”ˆ ์†Œ์Šค์ด๋ฉฐ, ๊ธฐ์—…์ด ๋ฐ์ดํ„ฐ๋ฅผ ๋ณผ ์ˆ˜ ์žˆ๋„๋ก ์ง€์›ํ•˜๋Š” ๋‹ค์–‘ํ•œ ์ฐจํŠธ์™€ ํ•จ๊ป˜ ์ œ๊ณต๋˜๋Š” ๋งค์šฐ ๊ธฐ๋ณธ์ ์ธ ํŒจํ‚ค์ง€์ž…๋‹ˆ๋‹ค.์ด ํŒจํ‚ค์ง€๋Š” c3.js ์ฐจํŠธ์™€ ๋™๋“ฑํ•˜๋ฉฐ D3 ๋ฒ„์ „4๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ํ•ฉ๋‹ˆ๋‹ค.์ด์™ธ์—๋„ ๋นŒ๋ณด๋“œ๋Š” ๋ชจ๋“  ์กฐ์ง์ด ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ์ฐจํŠธ ๋ชฉ๋ก๊ณผ ์ถ•, ๋ฒ”๋ก€, ํˆดํŒ ๋“ฑ ๊ตฌ์„ฑ ๊ฐ€๋Šฅํ•œ ๋‹ค์–‘ํ•œ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๊ฐ–์ถ˜ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ž…๋‹ˆ๋‹ค.

๐ŸํŠน์ง•

  • ๋‹ค์–‘ํ•œ ์ปค์Šคํ„ฐ๋งˆ์ด์ฆˆ ์˜ต์…˜

  • ๋ผ๋ฒจ์ด ์žˆ๋Š” Y๋ผ์ธ์€ ์‰ฝ๊ฒŒ ์‚ฝ์ž…ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  • ์™„์ „ํ•œ ์ ์‘์„ฑ

  • ๋ทฐํŒŒ์ธ๋” ์คŒ์—๋Š” ์คŒ, ์„œ๋ธŒ์ฐจํŠธ, ๋“œ๋ž˜๊ทธ ์คŒ์ด ํฌํ•จ๋ฉ๋‹ˆ๋‹ค.

  • ํˆดํŒ ๋ฐ ํˆดํŒ์— ๋งํฌ๋œ ๋“€์–ผ ์ฐจํŠธ

    ๐Ÿ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ์ฐจํŠธ

  • ๋ง‰๋Œ€

  • ์„ 

  • ๋„๋„›

  • ํŒŒ์ด

  • ๊ฑฐํ’ˆ

  • ์ง€์—ญ

  • ๊ฒŒ์ด์ง€

  • ์Šค์ผ€ํ‹€๋Ÿฌ(Scatter)

  • ๋ ˆ์ด๋”

  • ํŠธ๋ฆฌ ๋งต

    ๐Ÿ๊ฐ€๊ฒฉ

  • ๋ฌด๋ฃŒ


๐ŸŒฑ13. Apex Charts.js

ApexChart.js๋Š” ์›น ์‚ฌ์ดํŠธ์—์„œ ๋›ฐ์–ด๋‚œ ๋ฐ์ดํ„ฐ ๋ถ„์„์„ ์ œ๊ณตํ•˜๋Š” ๋ฐ ๋„์›€์ด ๋˜๋Š” ๋งŽ์€ ๊ธฐ๋Šฅ์„ ๊ฐ–์ถ˜ ์˜คํ”ˆ ์†Œ์Šค ์ฐจํŠธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ž…๋‹ˆ๋‹ค.์ด ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋Š” ์‚ฌ์šฉ์ž ๋งค๋‰ด์–ผ ์„ค๋ช…์— ๋”ฐ๋ผ ๋ชจ๋“  ์ฐจํŠธ ์ž‘์„ฑ ๊ธฐ๋Šฅ์„ ์ œ๊ณตํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.ApexCharts.js๋Š” ์ฃผ์„ ๊ธฐ๋Šฅ ๋•Œ๋ฌธ์— ๋งค์šฐ ์ผ๋ฐ˜์ ์ด์ง€ ์•Š์Šต๋‹ˆ๋‹ค.๊ทธ๊ฒƒ๊ณผ๋Š” ๋ณ„๋„๋กœ, ์ด ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์˜ ์ฃผ๋œ ์ธก๋ฉด์€ ์• ๋‹ˆ๋ฉ”์ด์…˜๊ณผ ๋ฐ˜์‘์„ฑ์ด๋‹ค.

๐ŸํŠน์ง•

  • ์•„๋ฆ„๋‹ค์šด ๋น„์ฃผ์–ผ์„ ๊ฐ€์ง„ ์ฃผ์„

  • VueJ, vanilla JS, React ๋ฐ Angular๊ฐ€ ๋ชจ๋‘ ์ง€์›๋ฉ๋‹ˆ๋‹ค.

  • ๋ฐ๋ชจ์™€ ์†Œ์Šค ์ฝ”๋“œ๊ฐ€ ๋งŽ๋‹ค

  • ์‘๋‹ต์„ฑ์ด ๋›ฐ์–ด๋‚œ ํˆดํŒ

  • ๊ด‘๋ฒ”์œ„ํ•œ ์‚ฌ์šฉ์ž ๋ฌธ์„œ

  • ํ”„๋ฆฌ ์ธ์Šคํ†จ ๋œ ์ƒ‰์ฑ„ ๊ตฌ์„ฑํ‘œ

    ๐Ÿ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ์ฐจํŠธ

  • Bar

  • Donut

  • Pie

  • Line

  • Area

  • Annotation

  • Bubble

  • Gant

  • Candlestick

  • Scatter

  • Spark

  • TreeMap

  • Heat and Radar

    ๐Ÿ๊ฐ€๊ฒฉ

  • ๋ฌด๋ฃŒ


๐ŸŒฑ14. NVD3

NVD3๋Š” ๊ฐ€์žฅ ๋„๋ฆฌ ์‚ฌ์šฉ๋˜๋Š” ์˜คํ”ˆ ์†Œ์Šค ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์ค‘ ํ•˜๋‚˜์ž…๋‹ˆ๋‹ค.์œ„์˜ ๋‹ค๋ฅธ ์ œํ’ˆ๊ณผ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ D3.js๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ๊ตฌ์ถ•๋˜์–ด ๊ฒฌ๊ณ ํ•œ ๊ธฐ์ˆ  ๊ธฐ๋ฐ˜์„ ๊ฐ–์ถ”๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.์„ฑ๋Šฅ์€ ๊ดœ์ฐฎ์€ ํŽธ์ด๋ฉฐ, ์žฌ๋ฏธ์—†๋Š” UI์— ์‹œ๊ฐ์ ์ธ ํฅ๋ฏธ๋ฅผ ๋”ํ•˜๊ธฐ ์œ„ํ•œ ๋ช‡ ๊ฐ€์ง€ ๊ธฐ๋ณธ์ ์ธ ์• ๋‹ˆ๋ฉ”์ด์…˜ ์˜ต์…˜์ด ์žˆ์Šต๋‹ˆ๋‹ค.NVD3๋Š” .json ํŒŒ์ผ์—์„œ ์ง์ ‘ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์˜ฌ ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ๊ธฐ์กด ๋ฐ์ดํ„ฐ API ์†”๋ฃจ์…˜๊ณผ ์—ฐ๊ฒฐํ•˜๊ธฐ๊ฐ€ ๋งค์šฐ ์‰ฝ์Šต๋‹ˆ๋‹ค.

๐ŸํŠน์ง•

  • ์‘๋‹ต์„ฑ

  • JSON์€ ์‚ฌ์šฉํ•˜๊ธฐ ์‰ฝ๋‹ค

  • ์‚ฌ์šฉํ•˜๊ธฐ ์‰ฝ๊ณ  ์ปค์Šคํ„ฐ๋งˆ์ด์ฆˆ ๊ฐ€๋Šฅํ•œ ํˆดํŒ

  • ์˜์ƒ ์‹œ๋ฆฌ์ฆˆ ์ผœ๊ธฐ ๋ฐ ๋„๊ธฐ

  • ์†Œํ”„ํŠธ์›จ์–ด ๋‹ค์šด๋กœ๋“œ ๋ฐ ์‚ฌ์šฉ์ด ๊ฐ„๋‹จํ•˜๊ณ  ์‹ ์†ํ•จ

  • ๋‘ ์ถ•์—์„œ์˜ ๋Šฅ๋ ฅ

    ๐Ÿ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ์ฐจํŠธ

  • ๋ง‰๋Œ€

  • ํŒŒ์ด

  • ์„ 

  • ๋„๋„›

  • ๋ฉ€ํ‹ฐ๋ผ์ธ

  • ์ง€์—ญ

  • ํฉ์–ด์ง€๋‹ค

  • ๊ธ€๋จธ๋ฆฌ ๊ธฐํ˜ธ

  • ์ด›๋Œ€

  • ์ŠคํŒŒํฌ

    ๐Ÿ๊ฐ€๊ฒฉ

  • ๋ฌด๋ฃŒ


๐ŸŒฑ15. Vis.js

Vis.js๋Š” ๋„คํŠธ์›Œํ‚น, 2D, ํƒ€์ž„๋ผ์ธ ๋ฐ 3D ์‹œ๊ฐํ™”์™€ ๊ธฐํƒ€ ๊ธฐ๋Šฅ๊ณผ ํ•˜์œ„ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ํฌํ•จํ•˜๋Š” ์˜คํ”ˆ ์†Œ์Šค JavaScript ์ฐจํŠธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ž…๋‹ˆ๋‹ค.์ด ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์˜ 3D ์ฐจํŠธ๋Š” ์ฐจํŠธ ์ž‘์„ฑ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์ค‘์—์„œ ์ƒ๋‹นํžˆ ๋“œ๋ฌธ ๊ฒƒ์ž…๋‹ˆ๋‹ค.์ด์™€๋Š” ๋ณ„๋„๋กœ Vis.js๋Š” ๋‹ค์–‘ํ•œ ์šฉ๋„๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๋›ฐ์–ด๋‚œ 2D ๋ฐ 3D ํ˜•์‹์˜ ์‹œ๊ฐํ™”๊ฐ€ ํฌํ•จ๋œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ž…๋‹ˆ๋‹ค.

๐ŸํŠน์ง•

  • ์™„๋ฒฝํ•œ ์• ๋‹ˆ๋ฉ”์ด์…˜

  • ํˆดํŒ์€ ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ์˜ต์…˜ ์ค‘ ํ•˜๋‚˜์ž…๋‹ˆ๋‹ค.

  • ์—ฌ๋Ÿฌ ์ฐจํŠธ๋ฅผ ์ƒ์„ฑํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  • ์ฐจํŠธ ๋†€์ดํ„ฐ์—๋Š” ๋‹ค์–‘ํ•œ ํŠน์ง•์ด ์žˆ์Šต๋‹ˆ๋‹ค.

  • ๊ด€๋ จ ์ฐจํŠธ์—๋Š” 3D ์ƒํ˜ธ์ž‘์šฉ์ด ์žˆ์Šต๋‹ˆ๋‹ค.

    ๐Ÿ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ์ฐจํŠธ

  • ๋ง‰๋Œ€

  • ์„ 

  • ๋ฉ€ํ‹ฐ๋ผ์ธ

  • ๊ฑฐํ’ˆ

  • ์ง€์—ญ

  • ๊ฐ ํŠธ

  • ์Šค์ผ€ํ‹€๋Ÿฌ(Scatter)

    ๐Ÿ๊ฐ€๊ฒฉ

  • ๋ฌด๋ฃŒ


โญ๏ธ Chart.js๋ฅผ ์˜ˆ์‹œ๋กœ ๋” ์•Œ์•„๋ณผ๊นŒ?

  • chart library ์ค‘ ๊ฐ€์žฅ ๋งŽ์€ ๊ฐœ๋ฐœ์ž๋“ค์ด ์‚ฌ์šฉํ•˜๋Š” library ์ด๋‹ค.
  • ๋ฌด๋ฃŒ์ด๋‹ค.
  • ์šฉ๋Ÿ‰์ด 60kb ๋กœ ๊ฐ€๋ณ๋‹ค
  • ๋ชจ๋“  chart๊ฐ€ ์• ๋‹ˆ๋ฉ”์ด์…˜ ํ˜•์‹์œผ๋กœ ์ง€์›์ด๋˜์–ด์„œ ์ด์˜๊ฒŒ ๋…ธ์ถœ๋œ๋‹ค.

โœ…ย Chart.js - Introduction

๋ฐ์ดํ„ฐ ์‹œ๊ฐํ™”๋Š” ์ฐจํŠธ, ๊ทธ๋ž˜ํ”„ ๋“ฑ๊ณผ ๊ฐ™์€ ๊ทธ๋ž˜ํ”ฝ ์š”์†Œ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ •๋ณด์™€ ๋ฐ์ดํ„ฐ๋ฅผ ๊ทธ๋ž˜ํ”ฝ์œผ๋กœ ํ‘œํ˜„ํ•  ์ˆ˜ ์žˆ๋„๋ก ๋„์™€์ฃผ๋Š”๊ฒƒ, ์ƒ๋Œ€์ ์œผ๋กœ ์ ์€ ์ž‘์—…์œผ๋กœ ์•„๋ฆ„๋‹ค์šด ๊ฒฐ๊ณผ๋ฅผ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋„๋ก ๋„์™€์ค„ ์ˆ˜ ์žˆ๋Š” js ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๊ฐ€ Chart.js์ด๋‹ค.

Chart.js๋Š” ์ธ๊ธฐ ์žˆ๋Š” ์ปค๋ฎค๋‹ˆํ‹ฐ ์œ ์ง€ ์˜คํ”ˆ ์†Œ์Šค ๋ฐ์ดํ„ฐ ์‹œ๊ฐํ™” ํ”„๋ ˆ์ž„์›Œํฌ์ด๋‹ค. ๋ฐ˜์‘ํ˜• ๋ง‰๋Œ€ ์ฐจํŠธ, ์›ํ˜• ์ฐจํŠธ, ์„  ๊ทธ๋ฆผ, ๋„๋„› ์ฐจํŠธ, ์‚ฐ์ ๋„ ๋“ฑ์„ ์ƒ์„ฑํ•  ์ˆ˜ ์žˆ๋‹ค. ์šฐ๋ฆฌ๊ฐ€ ํ•ด์•ผ ํ•  ์ผ์€ ๋‹จ์ˆœํžˆ ๋‹น์‹ ์˜ ํŽ˜์ด์ง€์—์„œ ๊ทธ๋ž˜ํ”„๋ฅผ ํ‘œ์‹œํ•  ์œ„์น˜, ํ‘œ์‹œํ•  ๊ทธ๋ž˜ํ”„์˜ ์ข…๋ฅ˜๋ฅผ ํ‘œ์‹œํ•œ ๋‹ค์Œ Chart.js์— ๋ฐ์ดํ„ฐ, ๋ ˆ์ด๋ธ” ๋ฐ ๊ธฐํƒ€ ์„ค์ •์„ ์ œ๊ณตํ•œ๋‹ค.

โœ…ย ๊ทธ๋Ÿผ Chart.js ์‚ฌ์šฉํ•ด๋ณผ๊นŒ?

์šฐ์„  ๋ฐ์ดํ„ฐ๋ฅผ ์ค€๋น„ํ•ด๋ณด์ž.

ํ•˜๋‹จ์˜ ๋ฐ์ดํ„ฐ๋Š” ํ˜„์žฌ ์‚ฌ์šฉ๋˜๋Š” ๋‹ค์–‘ํ•œ Frameworks ์ค‘์—์„œ ๊ฐ ํ”„๋ ˆ์ž„์›Œํฌ๊ฐ€ ๋ฐ›์€ GitHub Stars ๊ฐฏ์ˆ˜ ์ด๋‹ค.

โœ…ย ์‚ฌ์šฉ๋ฐฉ๋ฒ•

1๏ธโƒฃย Chart.js ์„ค์น˜

Chart.js๋ฅผ ์‹œ์ž‘ํ•˜๋ ค๋ฉด, ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ด๋ฏ€๋กœ ๋จผ์ € ์„ค์น˜ํ•ด์•ผํ•œ๋‹ค.

Chart.js๋Š” npm, GitHub ๋ฆด๋ฆฌ์Šค ๋˜๋Š” ๊ฐ€์žฅ ๋น ๋ฅด๊ณ  ์‰ฌ์šด ๋ฐฉ๋ฒ•์ธ Chart.js CDN์„ ํ†ตํ•ด ์„ค์น˜ํ•  ์ˆ˜ ์žˆ๋‹ค.

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>

2๏ธโƒฃย HTML ์ž‘์„ฑ

๋‘ ๋ฒˆ์งธ ๋‹จ๊ณ„๋Š” ์ฐจํŠธ๋ฅผ ๋ Œ๋”๋งํ•  ์œ„์น˜๋ฅผ HTML๋กœ ์ž‘์„ฑ.

Chart.js๋Š” HTML5 Canvas ํƒœ๊ทธ(์„ , ์› ๋“ฑ์„ ๊ทธ๋ฆฌ๋Š” ๋ฐ ์‚ฌ์šฉ)์˜ ๊ฐ€์šฉ์„ฑ์— ์˜์กดํ•˜์—ฌ ์ฐจํŠธ๋ฅผ ์ƒ์„ฑํ•˜๊ณ  ๋ Œ๋”๋งํ•œ๋‹ค.

<canvas id="myChart" width="1000" height="600"></canvas>

3๏ธโƒฃย Chart.js ์ ์šฉํ•˜๊ธฐ

  • ์—ฌ๊ธฐ์—์„œ ์›ํ•˜๋Š” type ์ž‘์„ฑ, ๋ฐ์ดํ„ฐ์ž…๋ ฅ, ์›ํ•˜๋Š” chart์˜ ์ƒ‰์ƒ์„ ์กฐ์ •ํ•  ์ˆ˜ ์žˆ๋‹ค.
  • type : ์›ํ•˜๋Š” ์ฐจํŠธ์˜ ๋ชจ์–‘์„ ๊ฒฐ์ •
  • labels : ๊ฐ data์˜ ์ด๋ฆ„์„ ์ž‘์„ฑ
  • date : ๋ฐ์ดํ„ฐ๊ฐ’ ์ž…๋ ฅ
  • backgroundColor, borderColor : chart ์˜ ์ƒ‰์ƒ ๊ฒฐ์ •
  • option : chart์— ์˜ต์…˜์„ ์ค„ ์ˆ˜ ์žˆ๋‹ค.
    • ์˜ˆ๋ฅผ๋“ค์–ด์„œ , chart ์™ผ์ชฝ scale ๋ถ€๋ถ„์„ ์ž๋™์„ค์ •.
const ctx = document.getElementById('myChart');
    const myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['React', 'Vue', 'Angular', 'Svelte', 'Ember.js', 'Backbone.js'],
            datasets: [{
                label: 'Number of GitHub Stars',
                data: [185134, 195514, 80460, 57022, 22165, 27862],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                ],
                borderColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });

๐Ÿงฉย ๋ธŒ๋ผ์šฐ์ ธ์—์„œ ๋ณด์ด๋Š” ํ™”๋ฉด

<์ฐธ๊ณ ์ž๋ฃŒ>

https://www.atatus.com/blog/javascript-chart-libraries/#Chart.js

https://stackabuse.com/guide-to-creating-charts-in-javascript-with-chartjs/

https://www.chartjs.org/

profile
ร†rlighed i smรฅ ting er ikke nogen lille ting.

0๊ฐœ์˜ ๋Œ“๊ธ€