๋ฐ˜์‘ํ˜•

apexcharts x์ถ• 1

[React] ๋ฆฌ์•กํŠธ apexcharts x์ถ•(xaxis) ํŠน์ • ๊ฐ’์œผ๋กœ ์‹œ์ž‘ํ•˜๋„๋ก ์„ค์ •ํ•˜๋Š” ๋ฐฉ๋ฒ•

Intro ์•ˆ๋…•ํ•˜์„ธ์š”. ์ด๋ฒˆ ์‹œ๊ฐ„์—๋Š” ๋ฆฌ์•กํŠธ apexcharts x์ถ• ๊ฐ’์„ ํŠน์ • ๊ฐ’์œผ๋กœ ์‹œ์ž‘ํ•˜๋„๋ก ์„ค์ •ํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. How to solve the problem ์ œ ๊ฒฝ์šฐ์—๋Š” ์ƒˆ๋ฒฝ 5์‹œ๋ผ๋Š” ํŠน์ • ๊ฐ’์œผ๋กœ x์ถ•์„ ์‹œ์ž‘ํ•˜๊ณ  ์‹ถ์—ˆ์Šต๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ์ €๋Š” apxechart xaxis์˜ min ์†์„ฑ์„ ์‚ฌ์šฉํ•ด ์ œ๊ฐ€ ์›ํ•˜๋Š” ์‹œ๊ฐ„์„ ์•„๋ž˜์™€ ๊ฐ™์ด ์„ค์ •ํ•ด์ฃผ์—ˆ์Šต๋‹ˆ๋‹ค. x์ถ• ๊ฐ’์€ ์ƒํ™ฉ์— ๋”ฐ๋ผ ๋‹ค๋ฅผํ…Œ๋‹ˆ ๋…„๋„/๋‹ฌ/์ผ ๋“ฑ์ด ํ•„์š”ํ•˜๋‹ค๋ฉด ์ปค์Šคํ…€ํ•˜์—ฌ ์‚ฌ์šฉํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค. xaxis: { min: new Date(new Date().setHours(5, 0, 0, 0)).getTime(), } ์•„๋ž˜๋Š” ์ „์ฒด ์ฝ”๋“œ์ž…๋‹ˆ๋‹ค. var options = { chart: { type: 'line' }, series: [{ name: ..

Framework/React 2023.03.28
๋ฐ˜์‘ํ˜•