{"id":40123,"date":"2024-11-03T04:11:38","date_gmt":"2024-11-03T04:11:38","guid":{"rendered":"https:\/\/atmokpo.com\/w\/?p=40123"},"modified":"2024-11-26T06:40:02","modified_gmt":"2024-11-26T06:40:02","slug":"61-%eb%8d%b0%ec%9d%b4%ed%84%b0-%ec%8b%9c%ea%b0%81%ed%99%94-%eb%b0%8f-%eb%b3%b4%ea%b3%a0%ec%84%9c-%eb%8d%b0%ec%9d%b4%ed%84%b0-%ec%8b%9c%ea%b0%81%ed%99%94-%ed%94%8c%eb%9f%ac%ea%b7%b8%ec%9d%b8","status":"publish","type":"post","link":"https:\/\/atmokpo.com\/w\/40123\/","title":{"rendered":"61. \ub370\uc774\ud130 \uc2dc\uac01\ud654 \ubc0f \ubcf4\uace0\uc11c, \ub370\uc774\ud130 \uc2dc\uac01\ud654 \ud50c\ub7ec\uadf8\uc778(\uc608 Chart.js) \uc0ac\uc6a9\ubc95"},"content":{"rendered":"

<\/p>\n

\ub370\uc774\ud130 \uc2dc\uac01\ud654\ub294 \ubcf5\uc7a1\ud55c \ub370\uc774\ud130\ub97c \uc774\ud574\ud558\uae30 \uc27d\uac8c \ud574\uc8fc\ub294 \uc911\uc694\ud55c \uacfc\uc815\uc785\ub2c8\ub2e4. \ud6a8\uacfc\uc801\uc778 \ub370\uc774\ud130 \uc2dc\uac01\ud654\ub294 \uc815\ubcf4\ub97c \uba85\ud655\ud558\uac8c \uc804\ub2ec\ud558\uace0, \ub370\uc774\ud130\ub97c \uae30\ubc18\uc73c\ub85c \ud55c \uacb0\uc815\uc744 \ub0b4\ub9ac\ub294\ub370 \ub3c4\uc6c0\uc744 \uc90d\ub2c8\ub2e4. \uc774 \uae00\uc5d0\uc11c\ub294 \uc6cc\ub4dc\ud504\ub808\uc2a4\uc5d0\uc11c \ub370\uc774\ud130 \uc2dc\uac01\ud654\ub97c \uc2e4\ud604\ud558\uae30 \uc704\ud574 Chart.js<\/strong> \ud50c\ub7ec\uadf8\uc778\uc744 \uc0ac\uc6a9\ud558\ub294 \ubc29\ubc95\uc744 \uc124\uba85\ud569\ub2c8\ub2e4.<\/p>\n

1. \ub370\uc774\ud130 \uc2dc\uac01\ud654\uc758 \uc911\uc694\uc131<\/h2>\n
\ub370\uc774\ud130 \uc2dc\uac01\ud654\ub294 \ub2e4\uc74c\uacfc \uac19\uc740 \uc5ec\ub7ec \uc7a5\uc810\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4:<\/p>\n
\n
\uc815\ubcf4\uc758 \uba85\ud655\uc131:<\/strong> \ubcf5\uc7a1\ud55c \ub370\uc774\ud130\ub97c \uc2dc\uac01\uc801\uc73c\ub85c \ud45c\ud604\ud568\uc73c\ub85c\uc368 \uc0ac\uc6a9\uc790\uac00 \uc190\uc27d\uac8c \uc774\ud574\ud560 \uc218 \uc788\uac8c \ud569\ub2c8\ub2e4.<\/li>\n
\ud328\ud134 \ubc0f \ud2b8\ub80c\ub4dc \ubc1c\uacac:<\/strong> \uc2dc\uac01\uc801 \uc694\uc18c\ub97c \ud1b5\ud574 \ub370\uc774\ud130\uc758 \ud328\ud134\uc774\ub098 \ud2b8\ub80c\ub4dc\ub97c \uc27d\uac8c \uc2dd\ubcc4\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li>\n
\uacb0\uc815 \uc9c0\uc6d0:<\/strong> \uc2dc\uac01\ud654\ub41c \ub370\uc774\ud130\ub294 \ud1b5\uacc4\uc801\uc778 \uacb0\uc815\uc744 \ub0b4\ub9ac\uae30 \uc704\ud55c \uc720\uc6a9\ud55c \uc815\ubcf4\ub97c \uc81c\uacf5\ud569\ub2c8\ub2e4.<\/li>\n<\/ul>\n
2. Chart.js \uc18c\uac1c<\/h2>\n
Chart.js\ub294 \uac04\ub2e8\ud558\uace0 \uc720\uc5f0\ud55c JavaScript \ucc28\ud2b8 \ub77c\uc774\ube0c\ub7ec\ub9ac\uc785\ub2c8\ub2e4. HTML5 \uce94\ubc84\uc2a4\ub97c \uc0ac\uc6a9\ud558\uc5ec \ub2e4\uc591\ud55c \ucc28\ud2b8 \uc720\ud615\uc744 \uadf8\ub9b4 \uc218 \uc788\uc2b5\ub2c8\ub2e4. Chart.js\ub294 \uc544\ub798\uc758 \uc5ec\ub7ec \uac00\uc9c0 \ucc28\ud2b8 \ud0c0\uc785\uc744 \uc9c0\uc6d0\ud569\ub2c8\ub2e4:<\/p>\n
\n
\ub9c9\ub300 \ucc28\ud2b8 (Bar Chart)<\/li>\n
\uc120 \ucc28\ud2b8 (Line Chart)<\/li>\n
\ud30c\uc774 \ucc28\ud2b8 (Pie Chart)<\/li>\n
\ub3c4\ub11b \ucc28\ud2b8 (Doughnut Chart)<\/li>\n
\uc0b0\uc810\ub3c4 \ucc28\ud2b8 (Scatter Chart)<\/li>\n
\ub808\uc774\ub354 \ucc28\ud2b8 (Radar Chart)<\/li>\n
\ubc84\ube14 \ucc28\ud2b8 (Bubble Chart)<\/li>\n<\/ul>\n
3. Chart.js \uc124\uce58\ud558\uae30<\/h2>\n
\uc6cc\ub4dc\ud504\ub808\uc2a4\uc5d0\uc11c Chart.js\ub97c \uc0ac\uc6a9\ud558\uae30 \uc704\ud574\uc11c\ub294 \uba3c\uc800 Chart.js \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \uc124\uce58\ud574\uc57c \ud569\ub2c8\ub2e4. \ub2e4\uc74c \ub2e8\uacc4\uc5d0 \ub530\ub77c \uc124\uce58\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
3.1. Chart.js \ucd94\uac00\ud558\uae30<\/h3>\n
Chart.js\ub97c \uc9c1\uc811 \ucd94\uac00\ud560 \uc218 \uc788\uc73c\uba70, \uc774\ub97c \uc704\ud574 \uc6cc\ub4dc\ud504\ub808\uc2a4\uc758 \ud14c\ub9c8 \ud30c\uc77c\uc774\ub098 \ud50c\ub7ec\uadf8\uc778 \ud30c\uc77c\uc5d0 \uc544\ub798 \ucf54\ub4dc\ub97c \ucd94\uac00\ud569\ub2c8\ub2e4. \uc774 \uc608\uc81c\uc5d0\uc11c\ub294 \ud14c\ub9c8\uc758 functions.php<\/code> \ud30c\uc77c\uc5d0 \ucd94\uac00\ud569\ub2c8\ub2e4:<\/p>\n
\nfunction enqueue_chartjs() {\n wp_enqueue_script('chart-js', 'https:\/\/cdn.jsdelivr.net\/npm\/chart.js', array(), null, true);\n}\nadd_action('wp_enqueue_scripts', 'enqueue_chartjs');\n <\/code><\/pre>\n4. \ub370\uc774\ud130 \uc2dc\uac01\ud654\ud558\ub294 \ubc29\ubc95<\/h2>\n\uc774\uc81c Chart.js\ub97c \uc0ac\uc6a9\ud558\uc5ec \ub370\uc774\ud130\ub97c \uc2dc\uac01\ud654\ud558\ub294 \ubc29\ubc95\uc744 \uc54c\uc544\ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \uac04\ub2e8\ud55c \ub9c9\ub300 \ucc28\ud2b8\ub97c \uc608\ub85c \ub4e4\uc5b4 \uc124\uba85\ud558\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n 4.1. HTML \uc900\ube44\ud558\uae30<\/h3>\n\ucc28\ud2b8\ub97c \ud45c\uc2dc\ud560 HTML \uc694\uc18c\ub97c \uc0dd\uc131\ud574\uc57c \ud569\ub2c8\ub2e4. \uc544\ub798 \ucf54\ub4dc\ub97c \uc6d0\ud558\ub294 \uc704\uce58\uc5d0 \ucd94\uac00\ud569\ub2c8\ub2e4:<\/p>\n \n\n