{"id":11064,"date":"2021-04-23T06:15:05","date_gmt":"2021-04-22T21:15:05","guid":{"rendered":"http:\/\/www.gisdeveloper.co.kr\/?p=11064"},"modified":"2021-04-23T12:11:35","modified_gmt":"2021-04-23T03:11:35","slug":"chart-js-%ec%bd%94%eb%93%9c-%ec%a0%95%eb%a6%ac","status":"publish","type":"post","link":"http:\/\/www.gisdeveloper.co.kr\/?p=11064","title":{"rendered":"chart.js \ucf54\ub4dc \uc815\ub9ac"},"content":{"rendered":"

MIT \ub77c\uc774\uc120\uc2a4\uc778 chart.js<\/a>\ub97c \uc608\uc81c\ub97c \ud1b5\ud574 \uac04\ub2e8\ud558\uac8c \uc815\ub9ac\ud574 \ubd05\ub2c8\ub2e4. \uad6c\ud604\ud558\uace0\uc790 \ud558\ub294 \ubaa8\uc2b5\uc740 \uc544\ub798\uc758 \uc601\uc0c1\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n

\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\r\n<div>\r\n    <canvas id=\"chart\"><\/canvas>\r\n<\/div>\r\n<\/pre>\n
CSS\ub294 \ub2e4\uc74c\uacfc \uac19\uad6c\uc694.<\/p>\n
\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');\r\n\r\nbody {\r\n    margin: 0;\r\n    padding: 0;\r\n}\r\n\r\ndiv {\r\n    width: 600px;\r\n    height: 400px;\r\n    padding: 20px;\r\n}\r\n<\/pre>\n
\uc774\uc81c JS \ucf54\ub4dc\uc5d0 \ub300\ud55c \ub0b4\uc6a9\uc778\ub370, \uba3c\uc800 \ucc28\ud2b8\ub97c \uc704\ud55c \uae30\ubcf8 \uace8\uaca9\uc740 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n
\r\nChart.defaults.font.family = 'Noto Sans KR';\r\n\r\nconst ctx = document.getElementById('chart');\r\n\r\nconst config = {\r\n    \/\/ CORE PART !!\r\n};\r\n\r\nconst chart = new Chart(ctx, config);\r\n<\/pre>\n
\uc704\uc758 config\uc5d0 \uc18d\uc131\uac12\uc744 \uc9c0\uc815\ud568\uc73c\ub85c\uc368 \ucc28\ud2b8\ub97c \uc815\uc758\ud558\ub294 \uc138\uc138\ud55c \ub0b4\uc6a9\uc744 \uacb0\uc815\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. config\uc5d0 \ub300\ud55c \uc18d\uc131\uac12\uc740 \ub2e4\uc74c\uacfc \uac19\uc774 \uc815\uc758\ud588\uc2b5\ub2c8\ub2e4.<\/p>\n
\r\nconst config = {\r\n    type: 'line',\r\n    data: {\r\n        labels: ['\ube68\uac15', 'Blue', 'Yellow', '\ucd08\ub85d', 'Purple', '\uc624\ub80c\uc9c0'],\r\n        datasets: [\r\n            {\r\n                label: '\ubcc0\uace1\uc8101',\r\n                data: [12, 19, 3, 5, 2, 3],\r\n                backgroundColor: 'yellow',\r\n                borderColor: 'black',\r\n                borderWidth: 1\r\n            },\r\n            {\r\n                label: '\ubcc0\uace1\uc8102',\r\n                data: [10, 16, 7, 6, 4, 2],\r\n                backgroundColor: 'white',\r\n                borderColor: 'gray',\r\n                borderWidth: 1\r\n            }\r\n        ]\r\n    },\r\n    options: {\r\n        maintainAspectRatio: false,\r\n        plugins: {\r\n            title: {\r\n                display: true,\r\n                text: '\ucc28\ud2b8, \uadf8\uac83\uc774 \uc54c\uace0 \uc2f6\ub2e4.'\r\n            }\r\n        },\r\n        scales: {\r\n            x: {\r\n                title: {\r\n                    display: true,\r\n                    text: '\uc0c9\uc0c1'\r\n                }\r\n            },\r\n            y: {\r\n                title: {\r\n                    display: true,\r\n                    text: '\ubcc0\uace1\ub7c9'\r\n                }\r\n            }\r\n        },\r\n\r\n    }\r\n}\r\n<\/pre>\n
\uc55e\uc11c \uc2e4\ud589 \ud654\uba74\uc744 \ubcf4\uba74 1\ucd08\ub9c8\ub2e4 \ucc28\ud2b8\uc758 \uac12\uc774 \ubcc0\uacbd\ub418\ub294 \uac83\uc744 \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774\uc5d0 \ub300\ud55c \ucf54\ub4dc\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n
\r\nsetInterval(() => {\r\n    const datasets = config.data.datasets;\r\n\r\n    for (let iDataset = 0; iDataset < datasets.length; iDataset++) {\r\n        const data = datasets[iDataset].data;\r\n        for (let iValue = 0; iValue < data.length; iValue++) {\r\n            data[iValue] += Math.random() * 2.0 - 1.0;\r\n        }\r\n    }\r\n\r\n    chart.update();\r\n}, 1000);\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
MIT \ub77c\uc774\uc120\uc2a4\uc778 chart.js\ub97c \uc608\uc81c\ub97c \ud1b5\ud574 \uac04\ub2e8\ud558\uac8c \uc815\ub9ac\ud574 \ubd05\ub2c8\ub2e4. \uad6c\ud604\ud558\uace0\uc790 \ud558\ub294 \ubaa8\uc2b5\uc740 \uc544\ub798\uc758 \uc601\uc0c1\uacfc \uac19\uc2b5\ub2c8\ub2e4. \ube44\ub514\uc624\ub97c \uc9c0\uc6d0\ud558\uc9c0 \uc54a\ub294 \uc6f9\ube0c\ub77c\uc6b0\uc838\uc785\ub2c8\ub2e4. \uaebd\uc740\uc120 \ucc28\ud2b8\uc774\uba70, 2\uac1c\uc758 \ub370\uc774\ud130 \ucd95\uc744 \uac00\uc9c0\uace0 1\ucd08\ub9c8\ub2e4 \ub370\uc774\ud130\uac00 \ubcc0\uacbd\ub429\ub2c8\ub2e4. \uba3c\uc800 DOM \uad6c\uc870\uc785\ub2c8\ub2e4. <script src=”https:\/\/cdn.jsdelivr.net\/npm\/chart.js”><\/script> <div> <canvas id=”chart”><\/canvas> <\/div> CSS\ub294 \ub2e4\uc74c\uacfc \uac19\uad6c\uc694. @import url(‘https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap’); body { margin: 0; padding: 0; } div { width: 600px; height: 400px; padding: … <\/p>\n
\ub354 \ubcf4\uae30 “chart.js \ucf54\ub4dc \uc815\ub9ac”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[88,12,1],"tags":[],"class_list":["post-11064","post","type-post","status-publish","format-standard","hentry","category-javascript","category-opensource","category-uncategorized"],"_links":{"self":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/11064","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=11064"}],"version-history":[{"count":6,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/11064\/revisions"}],"predecessor-version":[{"id":11072,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/11064\/revisions\/11072"}],"wp:attachment":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=11064"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=11064"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=11064"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}