λ°˜μ‘ν˜•

react apexcharts 2

[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

[React] apexcharts yaxis (yμΆ•) labels float μ†Œμˆ˜μ  μ²˜λ¦¬ν•˜λŠ” 방법, toFixed() λ©”μ„œλ“œ μ‚¬μš©

Intro μ•ˆλ…•ν•˜μ„Έμš”. 이번 μ‹œκ°„μ—λŠ” apexcharts μ—μ„œ yaxis label 의 μ†Œμˆ˜μ  μ²˜λ¦¬λ°©λ²•μ— λŒ€ν•΄ μ•Œμ•„λ³΄κ² μŠ΅λ‹ˆλ‹€. How to solve the problem μ•„λž˜μ™€ 같이 yaxis > labels > formatter λ₯Ό μ μš©ν•˜κ³ , toFixed() λ©”μ†Œλ“œλ₯Ό μ΄μš©ν•˜μ—¬ 값을 μ²˜λ¦¬ν•  수 μžˆμŠ΅λ‹ˆλ‹€. yaxis: { labels: { formatter(value) { return value.toFixed(0); }, }, },

Framework/React 2023.02.16
λ°˜μ‘ν˜•