{"id":12358,"date":"2022-07-06T14:57:26","date_gmt":"2022-07-06T05:57:26","guid":{"rendered":"http:\/\/www.gisdeveloper.co.kr\/?p=12358"},"modified":"2022-07-06T15:02:19","modified_gmt":"2022-07-06T06:02:19","slug":"gwcconfirm-gwcmessage%ec%97%90-%ec%b0%a8%ed%8a%b8chart-js-%eb%84%a3%ea%b8%b0","status":"publish","type":"post","link":"http:\/\/www.gisdeveloper.co.kr\/?p=12358","title":{"rendered":"gwcConfirm, gwcMessage\uc5d0 \uc678\ubd80 UI(\ucc28\ud2b8 \uc608\uc2dc) \ub123\uae30"},"content":{"rendered":"<p>\uc0ac\uc6a9\uc790\uc5d0\uac8c \uc815\ubcf4\ub97c \uc804\ub2ec\ud558\uac70\ub098 \uc758\uc0ac\ub97c \ubb3b\ub294 gwcMessage\uc640 gwcConfirm API\uc5d0 \uc5b4\ub5a4 \uba54\uc138\uc9c0\ub97c \ub123\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ud14d\uc2a4\ud2b8 \uba54\uc138\uc9c0 \ubfd0\ub9cc \uc544\ub2c8\ub77c \ub2e4\uc591\ud55c \uc694\uc18c\ub97c \ub2f4\uc744 \uc218 \uc788\ub294\ub370.. \uadf8 \uc911 \ucc28\ud2b8\ub97c \ub123\uae30 \uc704\ud55c \ucf54\ub4dc\ub97c \uc815\ub9ac\ud569\ub2c8\ub2e4. \ucc38\uace0\ub85c \ucc28\ud2b8\ub294 gwc \ub77c\uc774\ube0c\ub7ec\ub9ac \uc694\uc18c\uac00 \uc544\ub2cc chart.js\ub77c\ub294 \ubcc4\ub3c4\uc758 \uc678\ubd80 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4.<\/p>\n<p>\uba3c\uc800 \ub9cc\ub4e4\uace0\uc790 \ud558\ub294 UI\ub294 \ub2e4\uc74c \uc601\uc0c1\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n<p><center><video controls=\"controls\" ><source src=\"http:\/\/www.gisdeveloper.co.kr\/wp-content\/uploads\/2022\/07\/gwc-confirm-chart.js.mp4\" \/>\ube44\ub514\uc624\ub97c \uc9c0\uc6d0\ud558\uc9c0 \uc54a\ub294 \uc6f9\ube0c\ub77c\uc6b0\uc838\uc785\ub2c8\ub2e4.<\/video><\/center><\/p>\n<p>\uba3c\uc800 DOM \uad6c\uc131\uc740 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\r\n<div class=\"center\">\r\n    <gwc-button id=\"button\" title=\"gwcConfirm \ud568\uc218\"><\/gwc-button>\r\n<\/div>\r\n<\/pre>\n<p>JS \ucf54\ub4dc\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\r\nwindow.onload = () => {\r\n    button.onclick = event => { \r\n        const html = `\r\n            <div class=\"chart-layout\">\r\n                <canvas><\/canvas>\r\n            <\/div>\r\n        `;\r\n\r\n        const dlg = gwcConfirm(html, \r\n            () => { gwcMessage(\"'\uc608'\ub77c\uace0 \ub2f5\ud558\ub2e4.\") }, \r\n            () => { gwcMessage(\"'\uc544\ub2c8\uc624'\ub77c\uace0 \ub2f5\ud558\ub2e4.\", true) }, \r\n            () => { gwcMessage(\"'\ucde8\uc18c'\ub77c\uace0 \ub2f5\ud558\ub2e4.\")} \r\n        );\r\n\r\n        const ctx = dlg.querySelector(\"canvas\");\r\n        \r\n        const 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: '\uc0c9\uc0c1',\r\n                        data: [7, 8, 5, 3, 2, 6],\r\n                        backgroundColor: 'yellow',\r\n                        borderColor: 'yellow',\r\n                        borderWidth: 2\r\n                    },\r\n                    {\r\n                        label: 'Color',\r\n                        data: [6, 7, 6, 4, 3, 5],\r\n                        backgroundColor: 'red',\r\n                        borderColor: 'red',\r\n                        borderWidth: 2\r\n                    }\r\n                ]\r\n            },\r\n            options: {\r\n                maintainAspectRatio: false,\r\n            }\r\n        }\r\n\r\n        const chart = new Chart(ctx, config);\r\n\r\n        setInterval(() => {\r\n            const datasets = config.data.datasets;\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() * 0.4 - 0.2;\r\n                }\r\n            }\r\n            chart.update();\r\n        }, 10);\r\n\r\n    };\r\n};\r\n<\/pre>\n<p>\ucf54\ub4dc\uac00 \uc0c1\ub2f9\ud788 \uae34\ub370... 3~15 \ub77c\uc778\ub9cc gwc\uc5d0 \ub300\ud55c \ucf54\ub4dc\uc774\uace0 \ub098\uba38\uc9c0 \uc804\ubd80\ub294 \ucc28\ud2b8 \uad6c\uc131\uc744 \uc704\ud55c \ucf54\ub4dc\uc785\ub2c8\ub2e4.<\/p>\n<p>CSS \ucf54\ub4dc\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\r\n.center {\r\n    display: flex;\r\n    width: 100%;\r\n    height: 100%;\r\n    justify-content: center;\r\n    align-items: center;\r\n    gap: 3em;\r\n}\r\n\r\n.chart-layout {\r\n    width: 600px;\r\n    height: 400px;\r\n}\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>\uc0ac\uc6a9\uc790\uc5d0\uac8c \uc815\ubcf4\ub97c \uc804\ub2ec\ud558\uac70\ub098 \uc758\uc0ac\ub97c \ubb3b\ub294 gwcMessage\uc640 gwcConfirm API\uc5d0 \uc5b4\ub5a4 \uba54\uc138\uc9c0\ub97c \ub123\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ud14d\uc2a4\ud2b8 \uba54\uc138\uc9c0 \ubfd0\ub9cc \uc544\ub2c8\ub77c \ub2e4\uc591\ud55c \uc694\uc18c\ub97c \ub2f4\uc744 \uc218 \uc788\ub294\ub370.. \uadf8 \uc911 \ucc28\ud2b8\ub97c \ub123\uae30 \uc704\ud55c \ucf54\ub4dc\ub97c \uc815\ub9ac\ud569\ub2c8\ub2e4. \ucc38\uace0\ub85c \ucc28\ud2b8\ub294 gwc \ub77c\uc774\ube0c\ub7ec\ub9ac \uc694\uc18c\uac00 \uc544\ub2cc chart.js\ub77c\ub294 \ubcc4\ub3c4\uc758 \uc678\ubd80 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4. \uba3c\uc800 \ub9cc\ub4e4\uace0\uc790 \ud558\ub294 UI\ub294 \ub2e4\uc74c \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. \uba3c\uc800 DOM \uad6c\uc131\uc740 \ub2e4\uc74c\uacfc &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/www.gisdeveloper.co.kr\/?p=12358\" class=\"more-link\">\ub354 \ubcf4\uae30<span class=\"screen-reader-text\"> &#8220;gwcConfirm, gwcMessage\uc5d0 \uc678\ubd80 UI(\ucc28\ud2b8 \uc608\uc2dc) \ub123\uae30&#8221;<\/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":[1],"tags":[],"class_list":["post-12358","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/12358","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=12358"}],"version-history":[{"count":11,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/12358\/revisions"}],"predecessor-version":[{"id":12370,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/12358\/revisions\/12370"}],"wp:attachment":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=12358"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=12358"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=12358"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}