{"id":39006,"date":"2024-11-02T02:36:17","date_gmt":"2024-11-02T02:36:17","guid":{"rendered":"http:\/\/atmokpo.com\/w\/?p=39006"},"modified":"2024-11-26T06:42:40","modified_gmt":"2024-11-26T06:42:40","slug":"%ec%b0%a8%ed%8a%b8%ec%99%80-%ea%b7%b8%eb%9e%98%ed%94%84-%ea%b5%ac%ed%98%84%ed%95%98%ea%b8%b0-chart-js%ec%99%80-react-chartjs%eb%a1%9c-%eb%8d%b0%ec%9d%b4%ed%84%b0-%ec%8b%9c%ea%b0%81%ed%99%94","status":"publish","type":"post","link":"https:\/\/atmokpo.com\/w\/39006\/","title":{"rendered":"\ucc28\ud2b8\uc640 \uadf8\ub798\ud504 \uad6c\ud604\ud558\uae30, Chart.js\uc640 React ChartJS\ub85c \ub370\uc774\ud130 \uc2dc\uac01\ud654"},"content":{"rendered":"

<\/p>\n

\n
\n<\/header>\n
\n

\uc18c\uac1c<\/h2>\n

\n \ub370\uc774\ud130 \uc2dc\uac01\ud654\ub294 \ud604\ub300 \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c \uc911\uc694\ud55c \uc694\uc18c\uc785\ub2c8\ub2e4. \ud2b9\ud788, \uc0ac\uc6a9\uc790\uc5d0\uac8c \uc815\ubcf4\ub97c \ud6a8\uacfc\uc801\uc73c\ub85c \uc804\ub2ec\ud558\uace0, \ub370\uc774\ud130\uc758 \ud328\ud134\uc744 \uc27d\uac8c \ud30c\uc545\ud560 \uc218 \uc788\uac8c \ud569\ub2c8\ub2e4. \uc774 \uae00\uc5d0\uc11c\ub294 React \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c Chart.js<\/strong>\uc640 React ChartJS 2<\/strong>\ub97c \uc0ac\uc6a9\ud558\uc5ec \ucc28\ud2b8\uc640 \uadf8\ub798\ud504\ub97c \uad6c\ud604\ud558\ub294 \ubc29\ubc95\uc744 \ub2e8\uacc4\ubcc4\ub85c \uc124\uba85\ud569\ub2c8\ub2e4.\n <\/p>\n

\n Chart.js\ub294 \uac04\ub2e8\ud55c API\uc640 \ub2e4\uc591\ud55c \ucc28\ud2b8 \uc720\ud615\uc744 \uc81c\uacf5\ud558\uc5ec \uac1c\ubc1c\uc790\ub4e4\uc774 \uc9c1\uad00\uc801\uc73c\ub85c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub3c4\ub85d \ub9cc\ub4e4\uc5b4\uc9c4 \uc624\ud508 \uc18c\uc2a4 \ub77c\uc774\ube0c\ub7ec\ub9ac\uc785\ub2c8\ub2e4. React ChartJS 2\ub294 Chart.js\ub97c React\uc5d0 \ud1b5\ud569\ud558\uae30 \uc704\ud574 \ub9cc\ub4e4\uc5b4\uc9c4 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub85c, React \ucef4\ud3ec\ub10c\ud2b8 \ud615\ud0dc\ub85c \ucc28\ud2b8\ub97c \uc0dd\uc131\ud558\ub294 \ub370 \ucd5c\uc801\ud654\ub418\uc5b4 \uc788\uc2b5\ub2c8\ub2e4.\n <\/p>\n<\/section>\n

\n

1. Chart.js\ub780?<\/h2>\n

\n Chart.js\ub294 HTML5 \uce94\ubc84\uc2a4\ub97c \uc774\uc6a9\ud558\uc5ec \ub2e4\uc591\ud55c \uc885\ub958\uc758 \ucc28\ud2b8\ub97c \uadf8\ub9b4 \uc218 \uc788\ub294 \ub77c\uc774\ube0c\ub7ec\ub9ac\uc785\ub2c8\ub2e4. \ubc14 \ucc28\ud2b8, \uc120 \ucc28\ud2b8, \uc6d0\ud615 \ucc28\ud2b8 \ub4f1 \ub2e4\uc591\ud55c \uc635\uc158\uc774 \uc81c\uacf5\ub418\uc5b4 \ub370\uc774\ud130\uc758 \ud2b9\uc131\uc5d0 \ub9de\ub294 \ucc28\ud2b8\ub97c \uc120\ud0dd\ud574 \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ub610\ud55c, \ubc18\uc751\ud615 \uc6f9 \ub514\uc790\uc778\uc744 \uc9c0\uc6d0\ud558\uc5ec \ubaa8\ubc14\uc77c\uc5d0\uc11c\ub3c4 \ud6a8\uacfc\uc801\uc73c\ub85c \ud45c\ud604\ub429\ub2c8\ub2e4.\n <\/p>\n

\n \ub2e4\uc591\ud55c \ucc28\ud2b8 \uc720\ud615\uacfc \ucee4\uc2a4\ud130\ub9c8\uc774\uc9d5 \uae30\ub2a5 \ub355\ubd84\uc5d0 \ub370\uc774\ud130 \ubd84\uc11d, \ud1b5\uacc4, \ube44\uc988\ub2c8\uc2a4 \uc778\uc0ac\uc774\ud2b8\ub97c \uc2dc\uac01\uc801\uc73c\ub85c \ud45c\ud604\ud558\ub294 \ub370 \ub9ce\uc740 \uc0ac\ub791\uc744 \ubc1b\uace0 \uc788\uc2b5\ub2c8\ub2e4.\n <\/p>\n<\/section>\n

\n

2. React ChartJS 2\ub780?<\/h2>\n

\n React ChartJS 2\ub294 Chart.js\ub97c React\uc5d0 \uc27d\uac8c \ud1b5\ud569\ud558\uae30 \uc704\ud55c \ub77c\uc774\ube0c\ub7ec\ub9ac\uc785\ub2c8\ub2e4. \uc774 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \uc0ac\uc6a9\ud558\uba74 React \ucef4\ud3ec\ub10c\ud2b8\ucc98\ub7fc \ucc28\ud2b8\ub97c \uad00\ub9ac\ud560 \uc218 \uc788\uc5b4, \uc0c1\ud0dc \uad00\ub9ac \ubc0f \uc0dd\uba85 \uc8fc\uae30 \uba54\uc11c\ub4dc\ub97c \ud65c\uc6a9\ud558\uc5ec \ucc28\ud2b8\ub97c \uc27d\uac8c \uc5c5\ub370\uc774\ud2b8\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.\n <\/p>\n<\/section>\n

\n

3. \uc124\uce58 \ubc0f \uae30\ubcf8 \uc124\uc815<\/h2>\n

\n \uba3c\uc800, Chart.js\uc640 React ChartJS 2\ub97c \uc124\uce58\ud569\ub2c8\ub2e4. \uc544\ub798\uc758 \uba85\ub839\uc5b4\ub97c \uc0ac\uc6a9\ud558\uc5ec npm\uc744 \ud1b5\ud574 \uc124\uce58\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4:\n <\/p>\n

\n                npm install chart.js react-chartjs-2<\/code>\n            <\/pre>\n
3.1. \ud504\ub85c\uc81d\ud2b8 \uc0dd\uc131<\/h3>\n
\n                React \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uc0dd\uc131\ud558\uae30 \uc704\ud574 create-react-app\uc744 \uc0ac\uc6a9\ud569\ub2c8\ub2e4. \uc544\ub798 \uba85\ub839\uc5b4\ub85c \uc0c8 \ud504\ub85c\uc81d\ud2b8\ub97c \uc0dd\uc131\ud569\ub2c8\ub2e4:\n            <\/p>\n
\n                npx create-react-app my-chart-app<\/code>\n            <\/pre>\n
\n                \uc0dd\uc131\ub41c \ub514\ub809\ud1a0\ub9ac\ub85c \uc774\ub3d9\ud55c \ud6c4, Chart.js\uc640 React ChartJS 2\ub97c \uc124\uce58\ud569\ub2c8\ub2e4.\n            <\/p>\n
\n                cd my-chart-app\n                npm install chart.js react-chartjs-2<\/code>\n            <\/pre>\n<\/section>\n
\n
4. \uae30\ubcf8\uc801\uc778 \ucc28\ud2b8 \uad6c\ud604\ud558\uae30<\/h2>\n
\n                \uc774\uc81c \uac04\ub2e8\ud55c \uc120 \ucc28\ud2b8\ub97c \uad6c\ud604\ud574\ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \uba3c\uc800, src\/App.js<\/code> \ud30c\uc77c\uc744 \uc5f4\uace0 \uc544\ub798\uc758 \ucf54\ub4dc\ub97c \ucd94\uac00\ud569\ub2c8\ub2e4.\n            <\/p>\n
\n                \nimport React from 'react';\nimport { Line } from 'react-chartjs-2';\n\nfunction App() {\n    const data = {\n        labels: ['1\uc6d4', '2\uc6d4', '3\uc6d4', '4\uc6d4', '5\uc6d4', '6\uc6d4'],\n        datasets: [\n            {\n                label: '\ud310\ub9e4\ub7c9',\n                data: [65, 59, 80, 81, 56, 55],\n                backgroundColor: 'rgba(75,192,192,0.4)',\n                borderColor: 'rgba(75,192,192,1)',\n                borderWidth: 2,\n            },\n        ],\n    };\n\n    return (\n        
\n            
\ud310\ub9e4\ub7c9 \uc120 \ucc28\ud2b8<\/h2>\n            <\/line>\n        <\/div>\n    );\n}\n\nexport default App;\n                <\/code>\n            <\/pre>\n
\n                \uc704\uc758 \ucf54\ub4dc\uc5d0\uc11c\ub294 \uac04\ub2e8\ud55c \uc120 \ucc28\ud2b8\ub97c \uc0dd\uc131\ud588\uc2b5\ub2c8\ub2e4. labels<\/code>\uc5d0\ub294 \ucc28\ud2b8\uc758 x\ucd95 \ub808\uc774\ube14(\uc5ec\uae30\uc11c\ub294 \uc6d4), datasets<\/code>\uc5d0\ub294 \uc2e4\uc81c \ub370\uc774\ud130\uc640 \ucc28\ud2b8\uc758 \uc18d\uc131\ub4e4\uc744 \uc815\uc758\ud569\ub2c8\ub2e4. \uc774\uc81c \uc774 \ud504\ub85c\uadf8\ub7a8\uc744 \uc2e4\ud589\ud574 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4.\n            <\/p>\n
\n                npm start<\/code>\n            <\/pre>\n
\n                \uc6f9 \ube0c\ub77c\uc6b0\uc800\ub97c \uc5f4\uace0 http:\/\/localhost:3000<\/code>\uc73c\ub85c \uc774\ub3d9\ud558\uba74 \uc120 \ucc28\ud2b8\ub97c \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4.\n            <\/p>\n<\/section>\n
\n
5. \ub2e4\uc591\ud55c \ucc28\ud2b8 \uc720\ud615\uacfc \ub370\uc774\ud130<\/h2>\n
\n                Chart.js\ub294 \ub2e4\uc591\ud55c \ucc28\ud2b8 \uc720\ud615\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. \uc544\ub798\ub294 \uc6d0\ud615 \ucc28\ud2b8\ub97c \ucd94\uac00\ud558\ub294 \ubc29\ubc95\uc785\ub2c8\ub2e4.\n            <\/p>\n
\n                \nimport React from 'react';\nimport { Doughnut } from 'react-chartjs-2';\n\nfunction App() {\n    const data = {\n        labels: ['\uc2a4\ud3ec\uce20', '\uc74c\uc545', '\uac8c\uc784', '\uc5ec\ud589'],\n        datasets: [\n            {\n                label: '\ucde8\ubbf8 \ube44\uc728',\n                data: [25, 35, 25, 15],\n                backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56', '#FF5733'],\n                borderWidth: 1,\n            },\n        ],\n    };\n\n    return (\n        
\n            
\ucde8\ubbf8 \ube44\uc728 \uc6d0\ud615 \ucc28\ud2b8<\/h2>\n            <\/doughnut>\n        <\/div>\n    );\n}\n\nexport default App;\n                <\/code>\n            <\/pre>\n
\n                \uc6d0\ud615 \ucc28\ud2b8\uc5d0\uc11c\ub294 data<\/code> \uac1d\uccb4\uc5d0 \uc0c9\uc0c1 \ubc30\uc5f4(backgroundColor<\/code>)\uc744 \ucd94\uac00\ud558\uc5ec \uac01 \uc870\uac01\uc758 \uc0c9\uc0c1\uc744 \uc124\uc815\ud569\ub2c8\ub2e4. \uc774\uc640 \uac19\uc740 \ubc29\uc2dd\uc73c\ub85c \ub2e4\ub978 \ucc28\ud2b8 \uc720\ud615\ub3c4 \uc27d\uac8c \ucd94\uac00\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.\n            <\/p>\n<\/section>\n
\n
6. \ucc28\ud2b8\uc758 \uc2a4\ud0c0\uc77c \uc870\uc815\ud558\uae30<\/h2>\n
\n                \ucc28\ud2b8\uc758 \ubaa8\uc591\uacfc \uc2a4\ud0c0\uc77c\ub3c4 \uc870\uc815\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc544\ub798\ub294 \ucc28\ud2b8\uc758 \ud14c\ub450\ub9ac \ub450\uaed8\uc640 \ubc14\ub451\ud310 \ubc30\uacbd\uc744 \uc124\uc815\ud558\ub294 \ubc29\ubc95\uc785\ub2c8\ub2e4.\n            <\/p>\n
\n                \nconst options = {\n    maintainAspectRatio: false,\n    scales: {\n        y: {\n            beginAtZero: true,\n            grid: {\n                color: '#e0e0e0',\n            },\n        },\n    },\n};\n\nfunction App() {\n    return (\n        
\n            
\uc635\uc158\uc774 \uc801\uc6a9\ub41c \uc120 \ucc28\ud2b8<\/h2>\n            <\/line>\n        <\/div>\n    );\n}\n                <\/code>\n            <\/pre>\n
\noptions<\/code> \uac1d\uccb4\ub97c \ud1b5\ud574 \ucc28\ud2b8\uc758 \ub2e4\uc591\ud55c \uc2a4\ud0c0\uc77c\uc744 \uc870\uc815\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. maintainAspectRatio<\/code> \uc18d\uc131\uc744 false\ub85c \uc124\uc815\ud558\uba74 \ucc28\ud2b8\uac00 \uc9c0\uc815\ub41c \ub192\uc774\uc5d0 \ub9de\uac8c \ube44\uc728\uc5d0 \uad6c\uc560\ubc1b\uc9c0 \uc54a\uace0 \uc870\uc815\ub429\ub2c8\ub2e4.\n            <\/p>\n<\/section>\n
\n
7. \uc0c1\ud0dc\uc5d0 \ub530\ub978 \ub370\uc774\ud130 \uc5c5\ub370\uc774\ud2b8<\/h2>\n
\n                \ucc28\ud2b8\uc758 \ub370\uc774\ud130\ub97c \ub3d9\uc801\uc73c\ub85c \uc5c5\ub370\uc774\ud2b8\ud558\ub294 \ubc29\ubc95\ub3c4 \uc54c\uc544\ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \uc0c1\ud0dc\ub97c \uc774\uc6a9\ud558\uc5ec \ubc84\ud2bc \ud074\ub9ad \uc2dc \ub370\uc774\ud130\ub97c \ubcc0\uacbd\ud574 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4.\n            <\/p>\n
\n                \nimport React, { useState } from 'react';\nimport { Line } from 'react-chartjs-2';\n\nfunction App() {\n    const [data, setData] = useState({\n        labels: ['1\uc6d4', '2\uc6d4', '3\uc6d4', '4\uc6d4', '5\uc6d4', '6\uc6d4'],\n        datasets: [{\n            label: '\ud310\ub9e4\ub7c9',\n            data: [65, 59, 80, 81, 56, 55],\n            backgroundColor: 'rgba(75,192,192,0.4)',\n            borderColor: 'rgba(75,192,192,1)',\n            borderWidth: 2,\n        }],\n    });\n\n    const updateData = () => {\n        setData({\n            labels: ['7\uc6d4', '8\uc6d4', '9\uc6d4', '10\uc6d4', '11\uc6d4', '12\uc6d4'],\n            datasets: [{\n                label: '\ud310\ub9e4\ub7c9',\n                data: [70, 50, 90, 60, 40, 80],\n                backgroundColor: 'rgba(75,192,192,0.4)',\n                borderColor: 'rgba(75,192,192,1)',\n                borderWidth: 2,\n            }],\n        });\n    };\n\n    return (\n        
\n            
\ud310\ub9e4\ub7c9 \uc120 \ucc28\ud2b8<\/h2>\n            <\/line>\n