๐Ÿ˜‚ React Native์—์„œ Plotly.js๋กœ ์ฐจํŠธ ๋งŒ๋“œ๋Š” ์ด์•ผ๊ธฐ

Solmiiยท2020๋…„ 8์›” 27์ผ
7

React

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

์–ผ๋งˆ ์ „, ์šฐ์—ฐํ•œ ๊ธฐํšŒ๋กœ ํ•œ ๊ธฐ์—… ๋Œ€ํ‘œ๋‹˜๊ณผ ํ‹ฐํƒ€์ž„์„ ๊ฐ€์ง€๊ฒŒ ๋˜์—ˆ๋‹ค.
์ฒ˜์Œ์—๋Š” ๋ณ„์ƒ๊ฐ ์—†์—ˆ๋‹ค๊ฐ€ ํ‹ฐํƒ€์ž„ ๊ฐ€์ง€๋ฉด์„œ ๊ธฐ์—…์˜ ์„ฑ๊ฒฉ๊ณผ ํ•˜๋Š”์ผ์— ํฅ๋ฏธ๋ฅผ ๋Š๊ปด ์ง€์›์„ ํ–ˆ๊ณ , ๊ธฐ์ˆ  ๋ฉด์ ‘์€ ์Šคํ‚ตํ•˜๊ณ  ๋ฐ”๋กœ ์ฝ”๋”ฉ๊ณผ์ œ๋ฅผ ๋ฐ›๊ฒŒ ๋˜์—ˆ๋‹ค.

๊ทผ๋ฐ ๊ณผ์ œ์˜ ๋‚œ์ด๋„๊ฐ€...? ....์•„?

์•„๋ฌดํŠผ ๊ทธ๋ž˜์„œ ์‹œ์ž‘ํ•ด๋ณด๋Š” React Native๋กœ radar chart ๋งŒ๋“œ๋Š” ์ด์•ผ๊ธฐ!
์œ„ ์ด๋ฏธ์ง€๊ฐ€ ๊ฒฐ๊ณผ๋ฌผ์ด๋‹ค!


์‹œ์ž‘! ํ•˜๊ธฐ ์ „์— ์ค€๋น„๋ฌผ

  • React Native cli ์„ค์น˜

    ๋ณดํ†ต ๊ณต๋ถ€ํ•˜๋Š” ์ž…์žฅ์—์„œ๋Š” Expo๋ฅผ ๋งŽ์ด ์‚ฌ์šฉํ•˜๋Š”๋ฐ (react native์˜ CRA) ๋‚˜๋Š” ๊ธฐ์™• ํ•˜๋Š”๊ฑฐ native cli๋กœ ๋„์ „!

    ์„ค์น˜ ๋ฐฉ๋ฒ•์€ ์ง„์งœ ๋งŽ์€ ๋ธ”๋กœ๊ทธ๋ฅผ ์„œ์น˜ํ•ด๋ดค๋Š”๋ฐ ์ด ๋ธ”๋กœ๊ทธ๊ฐ€ ์งฑ์ด๋‹ค.

  • ์•ˆ๋“œ๋กœ์ด๋“œ ์ŠคํŠœ๋””์˜ค ์„ค์น˜

    ios ๊ฐœ๋ฐœ์ด๋ผ๋ฉด Xcode, Cocoapods ๋“ฑ๋„ ์„ค์น˜ํ•ด์•ผ ํ•˜๋Š”๋ฐ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ ์œ„ ๋ธ”๋กœ๊ทธ์— ์ƒ์„ธํ•˜๊ฒŒ ๋‚˜์™€์žˆ๋‹ค.
    ๋‚˜๋Š” ์•ˆ๋“œ๋กœ์ด๋“œ์šฉ์œผ๋กœ ๊ฐœ๋ฐœํ• ๊ฑฐ๋ผ (๊ณผ์ œ ์กฐ๊ฑด์ด์—ˆ์Œใ…Ž...) ์•ˆ๋“œ๋กœ์ด๋“œ ์ŠคํŠœ๋””์˜ค ์„ค์น˜ ํ›„ ์•ˆ๋“œ๋กœ์ด๋“œ ์„ธํŒ…๋งŒ ํ–ˆ๋‹ค.


์‹œ์ž‘! ํ•˜๊ธฐ ์ „์— Plotly๋ž€?

๊ฐ์ข… ์—ฌ๋Ÿฌ ์–ธ์–ด๋ฅผ ์ง€์›ํ•˜๋Š” ์˜คํ”ˆ์†Œ์Šค ์ฐจํŠธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ!!

๊ทธ ์ค‘์—์„œ๋„ plotly.js ๋Š” JavaScript ๊ธฐ๋ฐ˜์˜ ์›น ์‹œ๊ฐํ™” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ด๋ฉฐ, ๊ฐ™์€ ์‹œ๊ฐํ™” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ธ d3.js ๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ๋งŒ๋“ค์–ด์ ธ ๋ณด๋‹ค ์‰ฝ๊ณ  ์ธํ„ฐ๋ ‰ํ‹ฐ๋ธŒํ•˜๊ฒŒ ๊ทธ๋ž˜ํ”„๋ฅผ ๋งŒ๋“ค์–ด์ค€๋‹ค.
(๋ผ๊ณ  ํ•œ๋‹ค. ์•„์ง ์ฒด๊ฐ ๋ชปํ•จ...)

์  ๊ทธ๋ž˜ํ”„๋‚˜ ๋ง‰๋Œ€ ๊ทธ๋ž˜ํ”„ ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ 3D ์ฐจํŠธ๋‚˜, map ์ฐจํŠธ๋„ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ๋‹ค.


๊ทผ๋ฐ ์ค‘์š”ํ•œ๊ฑด... plotly ๊ณต์‹๋ฌธ์„œ๊ฐ€ ์ง„์งœ ๐Ÿถ๋˜ฅ ์ด๋ผ๋Š”๊ฒƒใ… ใ… 
์นœ์ ˆํ•˜๊ณ  ์ƒ๋ƒฅํ•œ ๊ณต์‹๋ฌธ์„œ๋งŒ ๋ณด๋‹ค๊ฐ€ ๐Ÿถ๋˜ฅ๊ฐ™์€ plotly ๋งŒ๋‚˜๋‹ˆ๊นŒ ์˜ค๋žœ๋งŒ์— ์ง„์งœ ๋งฅ๋ถ ๋˜์งˆ๋ป”ํ–ˆ๋‹ค^^

๋ญ ์–ด๋–ป๊ฒŒ ์–ด๋–ป๊ฒŒ ๊ตฌํ˜„ํ•˜๊ธด ํ–ˆ๋Š”๋ฐ ์‚ฌ์‹ค ๋งž๊ฒŒ ํ•œ๊ฑด์ง€๋„ ๋ชจ๋ฅด๊ฒ ์Œ. ํ˜น์‹œ๋ผ๋„ ๋”ฐ๋ผํ•˜์‹ค ๋ถ„์ด ์žˆ๋‹ค๋ฉด ๊ฐ์•ˆํ•˜๊ณ  ์Ÿจ ์ €๋”ฐ๊ตฌ๋กœ ํ–ˆ๊ตฌ๋‚˜ ์ •๋„๋กœ ๋„˜์–ด๊ฐ€์ฃผ์„ธ์š”......

๋ญ ์–ผ๋งˆ๋‚˜ ๋ถˆ์นœ์ ˆํ•˜๊ธธ๋ž˜ ์ด๋ ‡๊ฒŒ ๋งํ•˜๋Š”์ง€๋Š” ์ด๋”ฐ๊ฐ€^^ ๋ณด์‹œ๊ณ , ๋Œ€์ถฉ plotly.js๋Š” ์ด๋Ÿฐ ๋ฐ์ดํ„ฐ ์‹œ๊ฐํ™” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๊ตฌ๋‚˜~ ์ฐจํŠธ๋ฅผ ๊ทธ๋ ค์ฃผ๋Š” ์นœ๊ตฌ๊ตฌ๋‚˜~ ํ•˜๊ณ  ๋„˜์–ด๊ฐ€๋ฉด ๋œ๋‹ค.


์ด์ œ ์ง„์งœ ์‹œ์ž‘!

์ผ๋‹จ plotly.js๋ฅผ ์„ค์น˜ํ•ด์ค€๋‹ค.

๊ทธ๋Ÿฐ๋ฐ plotly.js๋งŒ ์„ค์น˜ํ•˜๋ฉด native์—์„œ ์ •์ƒ์ ์œผ๋กœ ์ž‘๋™ํ•˜์ง€ ์•Š๋Š”๋‹ค.
native์—์„œ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” ์—ฌ๋Ÿฌ๊ฐ€์ง€ ๋ฐฉ๋ฒ•์ด ์žˆ์ง€๋งŒ ๋‚˜๋Š” ์ ค ๋ง˜ํŽธํ•˜๊ฒŒ ์–ด๋–ค ์šฉ์ž๊ฐ€ native์šฉ์œผ๋กœ ๊ณต๊ฐœํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์„ค์น˜ํ–ˆ๋‹ค.

npm i --save react-native-plotly

Basic Radar Chart ๋งŒ๋“ค๊ธฐ

๊ทธ๋ฆฌ๊ณ  chart๋ฅผ ๋งŒ๋“ค๊ณ  ์‹ถ์€ component์—์„œ import ํ•ด์ค€๋‹ค.

import Plotly from 'react-native-plotly';

๊ทธ๋ฆฌ๊ณ  ๋ฐ”๋กœ ์ฐจํŠธ๋ถ€ํ„ฐ ๋งŒ๋“ค์–ด์ค€๋‹ค!

const data = [ // ์ฐจํŠธ์— ๋“ค์–ด๊ฐˆ data๋ฅผ ๋จผ์ € ์ง€์ •ํ•ด์ฃผ๊ณ !
  {
  type: 'scatterpolar', // chart type
  r: [39, 28, 8, 7, 28, 39], // data
  theta: ['A','B','C', 'D', 'E', 'A'], // data category
  fill: 'toself', // fill option
  name: 'Group A' // data group name
  }
]

const layout = { // data๋ฅผ ๊พธ๋ฉฐ์ฃผ๋Š” layout์„ ์ง€์ •!
  polar: {
    radialaxis: { // ๋ฐฉ์‚ฌ์ถ•์ด๋ผ๋Š” ์˜๋ฏธ์ธ๋ฐ ์•„๋ž˜ ๊ทธ๋ฆผ์—์„œ ํŒŒ๋ž€์ƒ‰์œผ๋กœ ํ‘œ์‹œ๋œ ๋ถ€๋ถ„์„ ๋งํ•œ๋‹ค!
      visible: true, // ๋ฐฉ์‚ฌ์ถ• display
      range: [0, 50] // ๋ฐฉ์‚ฌ์ถ•์˜ ์‹œ์ž‘๊ฐ’, ๋ ๊ฐ’
    }
  }
}

์ด๋ ‡๊ฒŒ data ์™€ layout ์„ ๊ฐ๊ฐ ์„ ์–ธ ๋ฐ ์ž…๋ง›์— ๋งž๊ฒŒ ์„ค์ •ํ•ด์ฃผ๊ณ ,

๋ฐฉ์‚ฌ์ถ•(radialaxis)๊ณผ ๊ฐ์ถ•(angularaxis)?

chart์—์„œ radialaxis๋ž€,
์—ฌ๊ธฐ์„œ ํŒŒ๋ž€์ƒ‰ ๋ถ€๋ถ„์„ ๋งํ•œ๋‹ค.
๋ฐฉ์‚ฌ์ถ•์ด๋ž€ ๋ง ๊ทธ๋Œ€๋กœ, ์ค‘์•™์˜ ์ ์—์„œ ๋ถ€ํ„ฐ ๋ฐ”๊นฅ์œผ๋กœ ์ ์  ํผ์ ธ๋‚˜๊ฐ€๋Š”, ๋ฐฉ์‚ฌ๋˜๋Š” ๋„ˆ๋‚Œ์“ฐ


๋ฐ˜๋Œ€๋กœ angularaxis๋ž€,
์—ฌ๊ธฐ์„œ ๋นจ๊ฐ„์ƒ‰ ๋ถ€๋ถ„์„ ๋งํ•œ๋‹ค.
์—ญ์‹œ๋‚˜ ๊ฐ์ถ•์ด๋ผ๋Š” ์ด๋ฆ„๋‹ต๊ฒŒ ์ฐจํŠธ์˜ ์™ธ๊ณฝ์„ ๊ณผ, ๊ฐ ๋ฐ์ดํ„ฐ ๋ช…, ๊ทธ๋ฆฌ๊ณ  ๊ฐ๋„๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” ์ˆ˜์ง์„ ์„ ๋งํ•œ๋‹ค.

๊ทธ๋ฆฌ๊ณ  ๋‚˜์„œ return ์•„๋ž˜์— import ํ•ด์™”๋˜ Pliotly component๋ฅผ ์ž‘์„ฑํ•˜๊ณ  props๋กœ ๋„˜๊ฒจ์ฃผ๋ฉด ๋!!

<Plotly data={data} layout={layout} debug enableFullPlotly />

๐Ÿคท๐Ÿปโ€โ™€๏ธ props์ค‘์— data๋ž‘ layout ๋ง๊ณ ๋„ ๋‹ค๋ฅธ๊ฒŒ ์žˆ๋„ค??

debug : true์ผ๋•Œ webview์—์„œ ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ•˜๋ฉด ์ฐจํŠธ์— ํ‘œ์‹œํ•ด์ค€๋‹ค.
์ด๊ฒƒ ๋•Œ๋ฌธ์— ์—๋Ÿฌ๋‚˜์„œ ๋˜ ํ•œ 2์‹œ๊ฐ„ ๊ณ ์ƒํ–ˆ๋Š”๋ฐ...^^
react-native-webview ๋ผ๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์„ค์น˜ํ•ด์ค˜์•ผ ํ•œ๋‹ค.
๊ฑ debug ์•ˆ์“ฐ๋Š”๊ฑธ ์ถ”์ฒœ (๋‚œ ๊ณ ์ƒํ•˜๋ฉด์„œ webview๊นŒ์ง€ ๊น”์•˜๊ธฐ๋•Œ๋ฌธ์— ๊ฑ ์•ˆ์ง€์› ๋‹ค.)

enableFullPlotly : ์ด๊ฑธ ์ ์œผ๋ฉด ์ฐจํŠธ๊ฐ€ ๋ถˆ๋Ÿฌ์™€์งˆ๋•Œ ๊ธฐ๋ณธ ๋ฒˆ๋“ค ๋Œ€์‹  full plotly ๋ฒˆ๋“ค์ด ๋ถˆ๋Ÿฌ์™€์ง„๋‹ค๋Š”๋ฐ ์†”์งํžˆ ๋ฌด์Šจ๋ง์ธ์ง€ ๋ชจ๋ฅด๊ฒ ๊ณ , ์ด๊ฑธ ์•ˆ์“ฐ๋‹ˆ๊นŒ ์—‰๋šฑํ•œ ์ƒˆ๋กœ๊ณ ์นจํ• ๋•Œ๋งˆ๋‹ค ์ฐจํŠธ ํ˜•์‹์ด ๋žœ๋ค์ด ๋˜์„œ(ใ„ดใ…‡ใ„ฑ) ์ž‘์„ฑํ•ด์คฌ๋‹ค.
์ด props๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๋กœ๋”ฉ์ด ์˜ค๋ž˜ ๊ฑธ๋ฆฐ๋‹ค๊ณ  ํ•˜๋‹ˆ ์šฐ์„  ์•ˆ์จ๋ณด๊ณ  ๋‚˜์™€ ๊ฐ™์€ ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒ์‹œ ์“ฐ๋Š”๊ฑธ ์ถ”์ฒœ

์ด์ œ

react-native run-android

๋กœ ์‹คํ–‰ํ•ด๋ณด๋ฉด ์ด๋Ÿฐ ํ›„์ง„ ๋ฐฉ์‚ฌํ˜• ์ฐจํŠธ๊ฐ€ ์™„์„ฑ๋˜์—ˆ๋‹ค!!

์ฐธ๊ณ ๋กœ ์ด ์ฐจํŠธ ๋„์šฐ๋Š”๋ฐ๋งŒ ํ•˜๋ฃจ ๊ฑธ๋ ธ์Œ...^^..... ๊ทผ๋ฐ ๋ง‰์ƒ ๋„์šฐ๋ฉด ๊ทธ ๋‹ค์Œ ์›ํ•˜๋Š” ํ˜•ํƒœ๋กœ ๊ฐ€๊ณตํ•˜๋Š”๊ฑด ๊ปŒ์ž…๋‹ˆ๋‹ค๐ŸคŸ - ํ—ˆ์–ธ์ฆ ํ™˜์ž


Multiple Trace Radar Chart ๋งŒ๋“ค๊ธฐ

๋‚ด๊ฐ€ ๊ตฌํ˜„ํ•ด์•ผ ํ–ˆ๋˜ ์ฐจํŠธ๋Š” 1. ์œ ์ €๋“ค์˜ ํ‰๊ท  ์ ์ˆ˜์™€, 2. ํ˜„์žฌ ๋กœ๊ทธ์ธํ•œ(๋ฌผ๋ก  mock data๊ธฐ๋•Œ๋ฌธ์— ๋กœ๊ทธ์ธํ–ˆ๋‹ค๊ณ  ์น˜๊ณ ...) ์œ ์ €์˜ ์ ์ˆ˜๋ฅผ ๋น„๊ตํ•ด์„œ ๊ฐ ์นดํ…Œ๊ณ ๋ฆฌ ๋ณ„๋กœ ํ•œ๋ˆˆ์— ๋ณด์—ฌ์ค˜์•ผ ํ•˜๋Š” ๊ตฌ์กฐ์˜€๋‹ค.

์ฆ‰, 1๋ฒˆ๊ณผ 2๋ฒˆ ์ฐจํŠธ๊ฐ€ ๋™์‹œ์— ๋ณด์—ฌ์•ผ ํ•˜๋Š” ์ƒํ™ฉ!

์ด๋ฅผ Multiple Trace Radar Chart๋ผ๊ณ  ํ•œ๋‹ค.

Trace(์ถ”์ )์ด๋ผ๋Š” ๋‹จ์–ด๊ฐ€ ์Œฉ๋šฑ๋งž์€๋ฐ, ์ถ”์ธกํ•ด๋ณด์ž๋ฉด ๊ธฐ๋ณธ์ ์œผ๋กœ plotly๊ฐ€ ์ œ๊ณต๋œ ๋ฐ์ดํ„ฐ์— ์กด์žฌํ•˜๋Š” ์ˆœ์„œ๋ฅผ ์ง€์ •ํ•ด์„œ "์ถ”์ " (= ์—ฌ๋Ÿฌ๊ฐœ์˜ ์ฐจํŠธ์ค‘์— ๊ฐ ์ฐจํŠธ๋ฅผ ์‹๋ณ„ ๊ฐ€๋Šฅ) ํ•˜๊ธฐ ๋•Œ๋ฌธ์ด์ง€ ์•Š์„๊นŒ ์‹ถ๋‹ค? ์•„, ๋ฌผ๋ก  ๋‡Œ๐Ÿง ํ”ผ์…œ์ž„


Multiple Trace Radar Chart๋ฅผ ๋งŒ๋“œ๋Š” ๋ฐฉ๋ฒ•์€ ์‰ฝ๋‹ค. ๊ทธ๋ƒฅ data ํ•˜๋‚˜ ๋” ์ถ”๊ฐ€ํ•˜๋ฉด ๋จ!

const data = [
    { // ์ฒซ๋ฒˆ์งธ data
      type: 'scatterpolar',
      r: [39, 28, 8, 7, 28, 39],
      theta: ['A', 'B', 'C', 'D', 'E', 'A'],
      fill: 'toself',
      name: 'Group A',
    },
    { // ๋‘๋ฒˆ์งธ data
      type: 'scatterpolar',
      r: [47, 13, 38, 32, 3, 47],
      theta: ['A', 'B', 'C', 'D', 'E', 'A'],
      fill: 'toself',
      name: 'Group B',
    },
  ];

data์— ์œ„์™€ ๊ฐ™์ด ๋ฐ์ดํ„ฐ๋ฅผ ํ•˜๋‚˜ ๋” ์ถ”๊ฐ€ํ•ด์คฌ๋‹ค!
์—ฌ๊ธฐ์„œ ์žฌ๋ฐŒ๋Š” ์ ์ด ๋‘๊ฐ€์ง€ ์žˆ๋Š”๋ฐ,
์šฐ์„  ๋‹ค์ค‘ ์ฐจํŠธ์—์„œ ์ฐจํŠธ๊ฐ€ ๊ฒน์น˜๋Š” ๊ฒฝ์šฐ์—๋Š” data ๋ฐฐ์—ด์—์„œ ๋‚˜์ค‘์— ๋“ค์–ด์˜จ ๋ฐ์ดํ„ฐ๊ฐ€ ์ œ์ผ ์œ„์— ํ‘œ์‹œ๋œ๋‹ค๋Š” ๊ฒƒ!
stack ์ž๋ฃŒ ๊ตฌ์กฐ๋ฅผ ๋– ์˜ฌ๋ฆฌ๋ฉด ์‰ฝ๋‹ค. (ํ›„์ž…์„ ์ถœ!)

์ด๋ ‡๊ฒŒ, ๋‚˜์ค‘์— ๋„ฃ์€ Group B ๊ฐ€ ๋” ์œ„์— ์˜ฌ๋ผ์™€์žˆ๋Š” ๊ฑธ ๋ณผ ์ˆ˜ ์žˆ๋‹ค.

์—ฌ๊ธฐ์„œ ์˜ค๋ฅธ์ชฝ ๋ฅผ ๋ณด๋ฉด Group A ์™€ Group B ๊ฐ€ ๋‚˜์˜จ๋‹ค. ๊ฐ๊ฐ ๋ˆŒ๋Ÿฌ์„œ ๋„๊ณ  ์ผค์ˆ˜๋„ ์žˆ๋‹ค.
(์•„๋งˆ ์ด๋ ‡๊ฒŒ ์ˆœ์„œ๋ฅผ ์ง€์ •ํ•  ์ˆ˜ ์žˆ๊ณ , ๊ฐ ์ฐจํŠธ๋ฅผ ์‹๋ณ„ํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ์ ์—์„œ ์ถ”์  ๋ฐ์ดํ„ฐ๋ผ๊ณ  ๋ถ€๋ฅด๋Š”๊ฒŒ ์•„๋‹๊นŒ ์‹ถ๋‹ค.)


๋˜ ๋‚˜๋จธ์ง€ ์žฌ๋ฐŒ๋Š” ์ ์€, ์›ํ˜•์˜ ์ฐจํŠธ ์œ„์— 5๊ฐœ์˜ ๋ฐ์ดํ„ฐ๊ฐ€ ํ‘œ์‹œ๋˜๋Š” ๊ตฌ์กฐ์ธ๋ฐ, data์— ์ „๋‹ฌ๋˜๋Š” r ์†์„ฑ(๋ฐ์ดํ„ฐ์˜ ์‹ค์ œ ๊ฐ’), theta (๋ฐ์ดํ„ฐ์˜ ์ด๋ฆ„? ์นดํ…Œ๊ณ ๋ฆฌ?) ์„ ๋ณด๋ฉด ์ฒ˜์Œ ๊ฐ’์ด ์ œ์ผ ๋งˆ์ง€๋ง‰์—๋„ ๋“ค์–ด๊ฐ€์žˆ๋‹ค๋Š” ๊ฒƒ!
์ด๋Š” ์œ„์˜ ์ฐจํŠธ์—์„œ ๊ฐ๊ฐ€์˜ ๋ฐ์ดํ„ฐ ๊ฐ’๋“ค์„ ์„ ์œผ๋กœ ์ƒ๊ฐํ•˜์ง€ ๋ง๊ณ , ์ ์œผ๋กœ ์ƒ๊ฐํ•œ ๋‹ค์Œ์—, ๋ฐ์ดํ„ฐ๊ฐ€ ์ฐจ์ง€ํ•˜๋Š” ๋ฉด์ ์„ ๋ชจ๋‘ ๊ฐ์‹ธ์ค€๋‹ค๋Š” ๋Š๋‚Œ์œผ๋กœ ์ดํ•ดํ•˜๋ฉด ์‰ฝ๋‹ค.

์„ ์œผ๋กœ ์ƒ๊ฐํ–ˆ์„ ๋•Œ => 5๋ฒˆ๋งŒ์— ๋ฐ์ดํ„ฐ ๋ฉด์ ์„ ๋‹ค ๊ฐ์Œ€ ์ˆ˜ ์žˆ๋‹ค.
์ ์œผ๋กœ ์ƒ๊ฐํ–ˆ์„ ๋•Œ => 6๋ฒˆ๋งŒ์— ๋ฐ์ดํ„ฐ ๋ฉด์ ์„ ๋‹ค ๊ฐ์Œ€ ์ˆ˜ ์žˆ๋‹ค.
์ด๋•Œ ์ฒซ๋ฒˆ์งธ์™€ ๋งˆ์ง€๋ง‰ 6๋ฒˆ์งธ๋Š” ๊ฐ™์€ ์ ์„ ๊ฐ€๋ฆฌํ‚จ๋‹ค.

์ •๋ง ๋งž๋Š”์ง€ ํ™•์ธํ•ด๋ณด์ž!

 const data = [
    {
      type: 'scatterpolar',
      r: [39, 28, 8, 7, 28],
      theta: ['A', 'B', 'C', 'D', 'E'],
      fill: 'none', // ํ™•์‹คํžˆ ๊ตฌ๋ถ„ํ•˜๊ธฐ ์œ„ํ•ด fill ์˜ต์…˜์„ none์œผ๋กœ ํ•ด์คฌ๋‹ค.
      name: 'Group A',
    }
  ];

์Œ...! ๋„๋•๋„-๋•๐Ÿฅด


์‹ค์ œ ๋ฐ์ดํ„ฐ๋กœ ์ฐจํŠธ ๋งŒ๋“ค๊ธฐ

์ž, ์ด์ œ ์ฐจํŠธ๊ฐ€ ๊ทธ๋ ค์ง€๋Š” ์›๋ฆฌ๋ฅผ ์ดํ•ดํ–ˆ์œผ๋‹ˆ ์‹ค์ œ๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ๋ถˆ๋Ÿฌ์™€์„œ ๋„ฃ์–ด๋ณด์ž!

const ๋ฐ์ดํ„ฐ์ด๋ฆ„ = ['Score', 'KDA', 'Damage', 'Vision', 'Suvival', 'Growth'];
const ์œ ์ €๋ฐ์ดํ„ฐ = [30, 24, 50, 23, 50, 34];
const ํ‰๊ท ๋ฐ์ดํ„ฐ = [100, 100, 100, 100, 100, 100, 100];

๋Œ€์ถฉ ์ด๋Ÿฌํ•œ ๋ฐ์ดํ„ฐ๋ฅผ ๋ถˆ๋Ÿฌ์™”๋‹ค๊ณ  ๊ฐ€์ •ํ•ด๋ณด๊ฒ ๋‹ค.

์—ฌ๊ธฐ์„œ ๊ฐ ๋ฐ์ดํ„ฐ๋งˆ๋‹ค์˜ ํ‰๊ท ๊ฐ’์ด ๋„ˆ๋ฌด ๋‹ฌ๋ผ์„œ (KDA๋Š” ํ‰๊ท ์ด 3์ธ๋ฐ Suvival์€ ํ‰๊ท ์ด 3000์ธ ์ƒํ™ฉ)
์œ ์ €๋ฐ์ดํ„ฐ๋ฅผ ์›๋ž˜ ์œ ์ €๋ฐ์ดํ„ฐ/์›๋ž˜ ํ‰๊ท ๋ฐ์ดํ„ฐ * 100 ํ•ด์„œ ๋ฐฑ๋ถ„์œจ๋กœ ์ „ํ™˜ํ–ˆ๊ณ , ํ‰๊ท ๋ฐ์ดํ„ฐ๋Š” ๋”ฑ ํ‰๊ท ๊ฐ’์„ ๋‚˜ํƒ€๋‚ด๊ธฐ ์œ„ํ•ด ๋ชจ๋“  ์š”์†Œ์— 100์ด๋ผ๋Š” ๊ฐ’์„ ๋„ฃ์—ˆ๋‹ค.

const data = [
  {
    name: 'avgGroup',
    type: 'scatterpolar',
    r: ํ‰๊ท ๋ฐ์ดํ„ฐ,
    theta: [...๋ฐ์ดํ„ฐ์ด๋ฆ„, ๋ฐ์ดํ„ฐ์ด๋ฆ„[0]],
    fill: 'none',
    mode: 'lines', // ๊ฐ ๋ฐ์ดํ„ฐ ์œ„์— ์ ์ด ์•ˆ์ฐํžˆ๊ณ  ์„ ์œผ๋กœ๋งŒ ์ด๋ฃจ์–ด์ง€๊ฒŒ ํ•œ๋‹ค!
    line: {
      color: theme.mainGreen,
    },
  },
  {
    name: 'userGroup',
    type: 'scatterpolar',
    r: [...์œ ์ €๋ฐ์ดํ„ฐ, ์œ ์ €๋ฐ์ดํ„ฐ[0]],
    theta: [...๋ฐ์ดํ„ฐ์ด๋ฆ„, ๋ฐ์ดํ„ฐ์ด๋ฆ„[0]],
    fill: 'none',
    mode: 'lines',
    line: {
      color: theme.mainBlue,
    },
  },
];
  
const layout = {
  polar: {
    radialaxis: {
      visible: true,
      range: [0, 200], // 0๋ถ€ํ„ฐ ์‹œ์ž‘ํ•ด์„œ 200๊นŒ์ง€ ๋‚˜ํƒ€๋‚ด๊ฒŒ!
      color: '#777',
    },
    angularaxis: {
      rotation: 210,
      color: '#777',
    },
  },
};

์ด๋ ‡๊ฒŒ ์ž‘์„ฑํ•ด์ฃผ์—ˆ๋‹ค.

์œ„์—์„œ ๋ฐ์ดํ„ฐ์˜ ๋งจ ์ฒ˜์Œ๊ฐ’์ด ๋งˆ์ง€๋ง‰์—๋„ ๋“ค์–ด๊ฐ€์•ผ ํ•œ๋‹ค๋Š” ์ ์„ ์ง€ํ‚ค๊ธฐ ์œ„ํ•ด,
theta: [...๋ฐ์ดํ„ฐ์ด๋ฆ„, ๋ฐ์ดํ„ฐ์ด๋ฆ„[0]] ์ด๋Ÿฐ์‹์œผ๋กœ ๋„ฃ์–ด์ฃผ์—ˆ๋‹ค.

๋” ์ข‹์€ ๋ฐฉ๋ฒ•์ด ์žˆ๋‹ค๋ฉด ๋Œ“๊ธ€๋กœ ์•Œ๋ ค์ฃผ์„ธ์š”!!

์šฐ์™•~~~ ์™„์ „ ์ด๋ฟŒ๋‹น!!!!


์˜ˆ์œ ์ฐจํŠธ ๋งŒ๋“ค๊ธฐ

์†”์งํžˆ ์—ฌ๊ธฐ๊นŒ์ง€๋งŒ ํ•ด๋„ ๋‚ด๋ˆˆ์—” ์ถฉ๋ถ„ํžˆ ์˜ˆ์˜์ง€๋งŒ, (ํ•˜๋ฃจ๋ฅผ ํƒœ์› ๋Š”๋ฐ ๋ญ”๋“ค ์•ˆ์˜ˆ์˜๋ฆฌ.......) ์‹ค์ œ ์‚ฌ์šฉ์ž์—๊ฒŒ ๋ฐ”๋กœ ๋ณด์—ฌ์ง€๋Š” ์ปจํ…์ธ ๋‹ค ๋ณด๋‹ˆ ๋”๋”๋” ์ด์˜๊ฒŒ ๊พธ๋ฏธ๋ฉด ์ข‹๊ฒ ์ง€!!!

๋‹คํ–‰ํžˆ Plotly์—๋Š” ์ฐจํŠธ์˜ ๊ฐ ์š”์†Œ๋ฅผ ๊พธ๋ฐ€ ์ˆ˜ ์žˆ๋Š” ๋งŽ~~์€ ์˜ต์…˜์ด ์žˆ๋‹ค. ๋ถˆ์นœ์ ˆํ•  ๋ฟ์ด๋‹ค.


data ๋Š” ์œ„์™€ ๊ฐ™๊ณ 

 const layout = {
    height: 320, // ์›ํ•˜๋Š” ํฌ๊ธฐ๋กœ height๋ฅผ ์ง€์ •ํ•ด์ฃผ์—ˆ๋‹ค!
    margin: { // chart์—๋Š” ๊ธฐ๋ณธ๊ฐ’์œผ๋กœ margin์ด ์ ์šฉ๋˜์–ด ์žˆ๋Š”๋ฐ, ์šฐ๋ฆฌ๊ฐ€ ํ”ํžˆ ์•„๋Š” top, bottom, left์™€๋Š” ์ข€ ๋‹ค๋ฅด๋‹ค. 0์œผ๋กœ ๋ชจ๋‘ ์ดˆ๊ธฐํ™” ํ•ด์ฃผ์—ˆ๋‹ค.
      l: 0,
      r: 0,
      t: 20,
      d: 0,
    },
    polar: {
      radialaxis: { // ๋ฐฉ์‚ฌ์ถ• ๊พธ๋ฏธ๊ธฐ ์‹œ์ž‘!
        visible: true,
        range: [0, 200],
        color: theme.mediumGray, // ๋ฐฉ์‚ฌ์ถ•์˜ ์„  ์ƒ‰๊น”
        showticklabels: false, // @1-1
        showline: false, // @1-2
        ticklen: 0, // @1-3
      },
      angularaxis: { // ๊ฐ์ถ• ๊พธ๋ฏธ๊ธฐ ์‹œ์ž‘!
        rotation: 210, // ์ฐจํŠธ ํšŒ์ „์œจ! (KDA๊ฐ€ ์ œ์ผ ์œ„๋กœ ์˜ฌ ์ˆ˜ ์žˆ๋„๋ก ๋Œ๋ ค์ฃผ์—ˆ๋‹น)
        color: '#eee', // ๊ฐ์ถ•์˜ ์„  ์ƒ‰๊น”
        ticklen: 0, // @2-1
        tickfont: { // @2-2
          color: '#888',
          size: 13,
        },
      },
      gridshape: 'linear', // @3
    },
    showlegend: false, // @4
  };

ํ•˜๋‚˜์”ฉ ์‚ดํŽด๋ณด์ž!!

ย ย  @1-1 ย ย 
showticklabels: false
๋ฐฉ์‚ฌ์ถ•์˜ ๊ฐ ๋‹จ์œ„๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” text๋ฅผ ๊ด€๋ฆฌํ•ด์ค€๋‹ค! true/false ๊ฐ’์„ ๋ฐ›๋Š”๋‹ค.

showticklabels: true ๋ฅผ ํ•˜๋ฉด?

ย ย  @1-2 ย ย 
showline: false
์œ„์˜ showticklabels์˜ ๊ธฐ์ค€์ ์„ ๋‚˜ํƒ€๋‚ด๋Š” ๊ธฐ์ค€์„ ! ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ true/false๊ฐ’์„ ๋ฐ›๋Š”๋‹ค.

showline: true ๋ฅผ ํ•˜๋ฉด?

ย ย  @1-3 ย ย 
ticklen: 0
๋ฐฉ์‚ฌ์ถ•์˜ ๊ฐ ๋‹จ์œ„๋ฅผ ๋ช…ํ™•ํ•˜๊ฒŒ ๋‚˜ํƒ€๋‚ด๋Š” ์•ˆ๋‚ด์„ .
0 ์ด์ƒ์˜ ์ˆซ์ž๋ฅผ ๋ฐ›๋Š”๋ฐ, ์ด ์ˆซ์ž๊ฐ€ ์•ˆ๋‚ด์„ ์˜ width px์ด ๋œ๋‹ค.

ticklen: 10 ์„ ํ•˜๋ฉด?


ย ย  @2-1 ย ย 
ticklen: 0
๋ฐฉ์‚ฌ์ถ•์—์„œ๋„ ๋‚˜์™”๋˜ ์•ˆ๋‚ด์„ !!

ticklen: 10 ์„ ํ•˜๋ฉด?
์„ ์ด ๋ฐ์€ ํšŒ์ƒ‰์ด๋ผ ์ž˜ ์•ˆ๋ณด์ด๋Š”๋ฐ ์ž์„ธํžˆ ๋ณด๋ฉด ๋ญ”๊ฐ€ ์‚์ฃฝ์‚์ฃฝ ํŠ€์–ด๋‚˜์™”๋‹ค.

ย ย  @2-2 ย ย 
tickfont
์ด๋ถ€๋ถ„ ํฐํŠธ๋ฅผ ๊พธ๋ฉฐ์ค€๋‹ค!


ย ย  @3 ย ย 
gridshape: 'linear'
์ฐจํŠธ์˜ ๋ชจ์–‘์„ ๊ฒฐ์ •ํ•œ๋‹ค!!
๋™๊ทธ๋žฌ๋˜ ์ฐจํŠธ๊ฐ€ ์œก๊ฐ์œก๊ฐํ•˜๊ฒŒ ๋ฐ”๋€๊ฒŒ ์ด ๋…€์„ ๋•๋ถ„!

๊ธฐ๋ณธ๊ฐ’(๋™๊ธ€๋™๊ธ€)์€ gridshape: 'circular'


ย ย  @4 ย ย 
showlegend: false
์ฐจํŠธ ๋ฒ”๋ก€๋ฅผ ๊ทธ๋ ค์ค€๋‹ค! ๊ฐ ์ฐจํŠธ๋ฅผ ๋ˆŒ๋Ÿฌ์„œ ์ฐจํŠธ๋ฅผ ๋„๊ณ  ์ผค ์ˆ˜ ์žˆ๋‹ค.
ํ•œ๋ฒˆ์— ๋งŽ์€ ๋ฐ์ดํ„ฐ๋ฅผ ๋ณด์—ฌ์ค˜์•ผ ํ•œ๋‹ค๋ฉด ์œ ์šฉํ•œ ์˜ต์…˜์ด๋‚˜ ๋น„์ฃผ์–ผ์ ์œผ๋กœ ๋ณด๊ธฐ ์‹ซ์–ด์„œ ๋บ๋‹ค.


์ฐจํŠธ ์šฐ์ธก ์ƒ๋‹จ์— ์ด๋ถ€๋ถ„์„ ๋งํ•˜๋Š”๊ฑฐ์ž„


์ด๋ ‡๊ฒŒ ํ•ด์„œ ์šฐ๋‹นํƒ•ํƒ• native๋กœ ์ฐจํŠธ ๋งŒ๋“ค๊ธฐ ๋!!!!!!!!!!!!!!
์ „์ฒด ์†Œ์Šค์ฝ”๋“œ๋Š” ์—ฌ๊ธฐ์„œ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.


๋ฐ๋ชจ ์˜์ƒ๋„ ๊ฐ™์ด ์˜ฌ๋ ค๋ณด์ž๋ฉด, ์ด๋Ÿฐ ๋Š๋‚Œ!!


ํ›„๊ธฐ1 : expo ์“ฐ์„ธ์š”.....
๋„์ €ํžˆ ์žก์„ ์ˆ˜ ์—†๋Š” ์—๋Ÿฌ๋•Œ๋ฌธ์— ๊ฑ ํ๊ธฐํ•˜๊ณ  ์ƒˆ๋กœ ํ”„๋กœ์ ํŠธ ๋งŒ๋“ค๊ณ ...๋˜ ์—๋Ÿฌ๋‚˜์„œ ๋˜ ํ๊ธฐํ•˜๊ณ ...๋ฅผ ๋ฐ˜๋ณตํ•œ ๊ฒฐ๊ณผ.....๐Ÿ˜ฑ
์ข…์†์„ฑ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋Š” ๋ญ๊ฐ€ ๊ทธ๋ ‡๊ฒŒ ๋งŽ๊ณ  ๊ทธ๊ฒƒ๋“ค์€ ์™œ ์ฝ”์–ด ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๊ฐ€ ์•„๋‹Œ ๊ฒƒ์ด๋ฉฐ ์ด๋†ˆ์˜ ์„œ๋ฒ„๋Š” ์•”๊ฒƒ๋„ ์•ˆ๊ฑด๋“ค์ด๊ณ  ํ™”์žฅ์‹ค๋งŒ ๊ฐ”๋‹ค์™”๋Š”๋ฐ 500๋– ์žˆ๊ณ  ๋ชจ๋“ˆ ์ด๋ฆ„์ข€ ๋˜‘๋ฐ”๋กœ ๋งํ•ด์ฃผ๋˜๊ฐ€ ๋งจ๋‚  "9" ๋‚˜ "527" ๋”ฐ์œ„ ์ด๋ฆ„์˜ ๋ชจ๋“ˆ์ด ํ•„์š”ํ•˜๋‹ค๋Š”๊ฒƒ์ธ์ง€.....
ํ›„๊ธฐ2 : ํ•˜.์ง€.๋งŒ... react native๋ฅผ expo๋กœ ์ž ๊น ๋งŒ์ ธ๋ณธ๊ฑฐ ๋นผ๊ณ  ์ฒ˜์Œ ๋‹ค๋ค„๋ณด๋Š”๊ฑด๋ฐ ๊ทธ๋ž˜๋„ ์ด๋งŒํผ์ด๋‚˜ ํ–ˆ๋‹น...!
์†”์งํžˆ..... ๋‚˜ ์ •๋ง.... ์ฒœ์žฌ์ผ์ง€๋„...?

profile
ํ•˜๋ฃจ๋Š” ์น˜์—ดํ•˜๊ฒŒ ์ธ์ƒ์€ ์—ฌ์œ ๋กญ๊ฒŒ

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

comment-user-thumbnail
2020๋…„ 8์›” 27์ผ

๋ง‰์ค„ ใ…‹ใ…‹ใ…‹ใ…‹ใ…‹ใ…‹

1๊ฐœ์˜ ๋‹ต๊ธ€

๋Œ€๋ฐ•... ์ง„์งœ ์ฒœ์žฌ์ผ์ง€๋„...

2๊ฐœ์˜ ๋‹ต๊ธ€
comment-user-thumbnail
2020๋…„ 8์›” 29์ผ

์ด๊ฑธ ์–ด๋–ป๊ฒŒ ์ดํ‹€๋งŒ์— ํ–ˆ์ง€ ใ…‹ใ…‹ใ…‹ใ…‹ใ…‹ใ…‹ใ…‹ใ…‹ ์ฒœ์žฌ ๋งž๋Š”๋“ฏ

๋‹ต๊ธ€ ๋‹ฌ๊ธฐ