{"id":5128,"date":"2018-03-19T19:21:30","date_gmt":"2018-03-19T10:21:30","guid":{"rendered":"http:\/\/www.gisdeveloper.co.kr\/?p=5128"},"modified":"2020-05-28T14:02:09","modified_gmt":"2020-05-28T05:02:09","slug":"fingereyes-xr%ec%97%90%ec%84%9c-%ed%8c%8c%ec%9d%b4-%ec%b0%a8%ed%8a%b8pie-chart-%ed%91%9c%ed%98%84%ed%95%98%ea%b8%b0","status":"publish","type":"post","link":"http:\/\/www.gisdeveloper.co.kr\/?p=5128","title":{"rendered":"FingerEyes-Xr\uc5d0\uc11c \ud30c\uc774 \ucc28\ud2b8(Pie Chart) \ud45c\ud604\ud558\uae30"},"content":{"rendered":"<p>\uc9c0\ub3c4 \uc0c1\uc5d0 \ud1b5\uacc4 \ub370\uc774\ud130\ub97c \ucc28\ud2b8\ub97c \ud1b5\ud574 \ud45c\ud604\ud558\ub294 \ucf54\ub4dc\ub97c \uc815\ub9ac\ud574 \ubd05\ub2c8\ub2e4. \ucc28\ud2b8\uc758 \uc885\ub958\ub294 \ub9ce\uc9c0\ub9cc \uc774\uc911 \uc9c0\ub3c4\uc640 \uac00\uc7a5 \uc798\ub9de\ub294 \ucc28\ud2b8\ub294 \ud30c\uc774 \ucc28\ud2b8\uc778\ub370\uc694. \uc774 \ud30c\uc774 \ucc28\ud2b8\ub97c \ud45c\uc2dc\ud574 \ubcf4\ub3c4\ub85d \ud558\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n<p>\uba3c\uc800 \ucc28\ud2b8\ub97c \ud45c\uc2dc\ud560 \uc218\uce58\uc9c0\ub3c4 \ub808\uc774\uc5b4\ub97c \ucd94\uac00\ud569\ub2c8\ub2e4. \ucc28\ud2b8 \ud45c\uc2dc\ub97c \uc704\ud574 \ubc18\ub4dc\uc2dc \uc218\uce58\uc9c0\ub3c4\uac00 \ud544\uc694\ud55c \uac83\uc740 \uc544\ub2c8\uc9c0\ub9cc.. \uc218\uce58\uc9c0\ub3c4\ub294 \ucc28\ud2b8\ub97c \ud45c\uc2dc\ud560 \uc704\uce58\uc640 \ud1b5\uacc4 \ub370\uc774\ud130\ub97c \uc18d\uc131 \uac12\uc73c\ub85c \uac00\uc9c8 \uc218 \uc788\uc73c\ubbc0\ub85c \ucc28\ud2b8\uc5d0 \ub300\ud55c \uc608\uc81c\ub85c \uc0ac\uc6a9\ud558\uae30\uc5d0 \uc88b\uc2b5\ub2c8\ub2e4. \uc544\ub798\uc758 \ucf54\ub4dc\ub294 \uc218\uce58\uc9c0\ub3c4\ub97c \ud45c\uc2dc\ud558\ub294 \ucf54\ub4dc\uc785\ub2c8\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">\r\n&lt;!DOCTYPE html>\r\n&lt;html>\r\n&lt;head>\r\n    &lt;meta charset=\"utf-8\" \/>\r\n\r\n    &lt;style>\r\n        body {\r\n            margin: 0px;\r\n            padding: 0px;\r\n        }\r\n\r\n        #map {\r\n            top: 0px;\r\n            left: 0px;\r\n            position: absolute;\r\n            width: 100%;\r\n            height: 100%;\r\n            border: none;\r\n            outline: none;\r\n        }\r\n    &lt;\/style>\r\n\r\n    &lt;script src=\"..\/..\/scripts\/fingereyes-xr\/Xr.js\"><\/script>\r\n\r\n    &lt;script>\r\n        var map = null;\r\n\r\n        function onLoad() {\r\n            map = new Xr.Map(\"map\", {});\r\n\r\n            var lyr = new Xr.layers.ShapeMapLayer(\"lyr\",\r\n                {\r\n                    url: \"http:\/\/168.192.76.10:8080\/Xr?layerName=li_a@test\"\r\n                }\r\n            );\r\n            \r\n            var theme = lyr.theme();\r\n            theme.penSymbol().color(\"black\");\r\n            theme.brushSymbol().color(\"lightgray\");\r\n            lyr.needAttribute(true);\r\n\r\n            var lm = map.layers();\r\n            lm.add(lyr);\r\n\r\n            map.onLayersAllReady(onLayersReady);\r\n\r\n            window.addEventListener(\"resize\", onResize);\r\n        }\r\n\r\n        var bFinishResizing = true;\r\n\r\n        function onResize() {\r\n            if (bFinishResizing) {\r\n                bFinishResizing = false;\r\n\r\n                setTimeout(function () {\r\n                    var newWidth = window.innerWidth;\r\n                    var newHeight = window.innerHeight;\r\n\r\n                    map.resize(newWidth, newHeight);\r\n                    map.update();\r\n\r\n                    bFinishResizing = true;\r\n                }, 500);                \r\n            }\r\n        }\r\n\r\n        function onLayersReady() {\r\n            var cm = map.coordMapper();\r\n            var lyr = map.layers(\"lyr\");\r\n            var mbr = lyr.MBR();\r\n\r\n            cm.zoomByMBR(mbr);\r\n\r\n            map.update();\r\n        }\r\n    &lt;\/script>\r\n\r\n    &lt;title>&lt;\/title>\r\n&lt;\/head>\r\n\r\n&lt;body onload=\"onLoad()\">\r\n    &lt;div id=\"map\" \/>\r\n&lt;\/body>\r\n&lt;\/html>\r\n<\/pre>\n<p>\uc704\uc758 \ucf54\ub4dc\uc5d0\uc11c \uc911\uc694\ud55c \ubd80\ubd84\uc740 40\ubc88\uc9f8 \ucf54\ub4dc\uc5d0\uc11c \uc218\uce58\uc9c0\ub3c4 \ub808\uc774\uc5b4\uc5d0 \ub300\ud55c \uc18d\uc131\uac12\uc774 \ud544\uc694\ud558\ub2e4\uace0 \uba85\uc2dc\ud558\uace0 \uc788\ub2e4\ub294 \uc810\uc785\ub2c8\ub2e4. \ucc28\ud2b8 \ud45c\uc2dc\ub97c \uc704\ud55c \ud1b5\uacc4\uac12\uc73c\ub85c\uc368 \uc218\uce58\uc9c0\ub3c4\uc758 \uc18d\uc131\uac12\uc774 \ud544\uc694\ud558\ubbc0\ub85c \uc774 \ucf54\ub4dc\uac00 \ud544\uc694\ud569\ub2c8\ub2e4. \ub9cc\uc57d \uc218\uce58\uc9c0\ub3c4 \ub808\uc774\uc5b4\uac00 \ub77c\ubca8 \ud45c\uc2dc\ub97c \uc0ac\uc6a9\ud55c\ub2e4\uba74 \uc790\ub3d9\uc73c\ub85c \uc18d\uc131\uac12\uc744 \ud638\ucd9c\ud558\ubbc0\ub85c \uad73\uc774 \uc774 \ucf54\ub4dc\uac00 \ud544\uc694\ud558\uc9c0\ub294 \uc54a\uc2b5\ub2c8\ub2e4. \uc774\uc81c \ubc84\ud2bc\uc744 \uc62c\ub824\ub450\uace0 \uc774 \ubc84\ud2bc\uc744 \ud074\ub9ad\ud588\uc744\ub54c \ucc28\ud2b8\ub97c \uc9c0\ub3c4 \uc0c1\uc5d0 \ud45c\uc2dc\ud558\ub294 \ucf54\ub4dc\ub97c \uc791\uc131\ud574 \ubcf4\ub3c4\ub85d \ud558\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n<p>\uc774\uc81c \uc774 \uc218\uce58\uc9c0\ub3c4\uc5d0 \ucc28\ud2b8\ub97c \uad6c\uc131\ud558\ub294 \ucf54\ub4dc\ub97c \uc791\uc131\ud560 \uac83\uc778\ub370\uc694. \uc544\ub798\uc758 doCharting \ud568\uc218\uac00 \ucc28\ud2b8\ub97c \uad6c\uc131\ud569\ub2c8\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\r\n function doCharting() {\r\n    var gl = new Xr.layers.GraphicLayer(\"chart\");\r\n    map.layers().add(gl);\r\n\r\n    var graphicRows = gl.rowSet();\r\n    var lyr = map.layers(\"lyr\");\r\n    var rows = lyr.shapeRowSet().rows();\r\n    var ars = lyr.attributeRowSet();\r\n    var fieldSet = lyr.fieldSet();\r\n    var idx_sum_po_u65 = fieldSet.fieldIndex(\"sum_po_u65\");\r\n    var idx_sum_po_u75 = fieldSet.fieldIndex(\"sum_po_u75\");\r\n    var minValue = Number.MAX_VALUE;\r\n    var maxValue = -Number.MAX_VALUE;\r\n            \r\n    for (var fid in rows) {\r\n        var aRow = ars.row(fid);\r\n        var val_sum_po_u65 = aRow.valueAsFloat(idx_sum_po_u65);\r\n        var val_sum_po_u75 = aRow.valueAsFloat(idx_sum_po_u75);\r\n        var total = val_sum_po_u65 + val_sum_po_u75;\r\n\r\n        if (minValue > total) minValue = total;\r\n        if (maxValue < total) maxValue = total;\r\n    }\r\n\r\n    var graphMaxSize = 80;\r\n    var graphMinSize = 30;\r\n\r\n    for (var fid in rows) {\r\n        var aRow = ars.row(fid);\r\n        var sRow = rows[fid];\r\n        var pt = sRow.shapeData().representativePoint();\r\n        var val_sum_po_u65 = aRow.valueAsFloat(idx_sum_po_u65);\r\n        var val_sum_po_u75 = aRow.valueAsFloat(idx_sum_po_u75);\r\n        var totalValue = val_sum_po_u65 + val_sum_po_u75;\r\n        var radiusOut = (((graphMaxSize - graphMinSize) * totalValue \/ (maxValue - minValue)) + graphMinSize) \/ 2;\r\n        var pcisd = new Xr.data.PieChartItemShapeData({\r\n            x: pt.x, y: pt.y,\r\n            values: [val_sum_po_u65, val_sum_po_u75],\r\n            radiusOut: radiusOut, radiusIn: radiusOut * 0.4\r\n        });\r\n\r\n        var pcigr = new Xr.data.PieChartItemGraphicRow(fid, pcisd);\r\n        graphicRows.add(pcigr);\r\n\r\n        pcigr.penSymbol().color(\"#ffffff\").width(1);\r\n        pcigr.brushSymbol(0).opacity(1).color('#1abc9c');\r\n        pcigr.brushSymbol(1).opacity(1).color('#34495e');\r\n    }\r\n\r\n    gl.refresh();\r\n}\r\n<\/pre>\n<p>\uc704\uc758 \ucf54\ub4dc\ub97c \ud558\ub098\uc529 \uc0b4\ud3b4\ubcf4\uba74... \uba3c\uc800 1-2\ubc88 \ucf54\ub4dc\ub294 chart\ub77c\ub294 \uc774\ub984\uc758 \uadf8\ub798\ud53d \ub808\uc774\uc5b4\ub97c \ucd94\uac00\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4. \ubc14\ub85c \uc774 \uadf8\ub798\ud53d \ub808\uc774\uc5b4\uc5d0 \ucc28\ud2b8\uac00 \ud45c\ud604\ub429\ub2c8\ub2e4. \uadf8\ub9ac\uace0 10\ubc88-11\ubc88\uc5d0\uc11c\ub294 2\uac1c\uc758 \ud544\ub4dc\uc5d0 \ub300\ud55c \uc778\ub371\uc2a4\uac12\uc744 \uc800\uc7a5\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4. doCharting \ud568\uc218\ub294 2\uac1c\uc758 \uc18d\uc131\uac12\uc744 \uc774\uc6a9\ud574 \ud30c\uc774\ucc28\ud2b8\ub97c \uad6c\uc131\ud558\uace0 \uc788\ub294\ub370, \uc774\ub54c \uc0ac\uc6a9\ud558\ub294 \ud544\ub4dc\ub294 sum_po_u65\uc640 sum_po_u7 \uc774\uace0 \uadf8 \uac12\uc744 \uc5bb\uae30 \uc704\ud574 \ud544\ub4dc \uc778\ub371\uc2a4\uac12\uc774 \ud544\uc694\ud569\ub2c8\ub2e4. 15\ubc88-23\ubc88 \ucf54\ub4dc\ub294 \ucc28\ud2b8\ub97c \uad6c\uc131\ud558\ub294 \uac12\uc758 \ucd5c\ub300\uac12\uacfc \ucd5c\uc18c\uac12\uc744 \uacc4\uc0b0\ud569\ub2c8\ub2e4. 25-26\ubc88\uc740 \ud30c\uc774 \ucc28\ud2b8\ub97c \uadf8\ub9b4\ub54c \ucd5c\ub300\uac12\uc5d0\uc11c\uc758 \ucc28\ud2b8 \ud06c\uae30\uc640 \ucd5c\uc18c\uac12\uc5d0\uc11c\uc758 \ucc28\ud2b8 \ud06c\uae30\ub97c \ub098\ud0c0\ub0c5\ub2c8\ub2e4. \ucc28\ud2b8 \ud06c\uae30\uc758 \ub2e8\uc704\ub294 px\uc785\ub2c8\ub2e4. 28\ubc88-48\ubc88\uc774 \uadf8\ub798\ud53d \ub808\uc774\uc5b4\uc5d0 \ucc28\ud2b8 \uadf8\ub798\ud53d \uc694\uc18c\ub97c \ucd94\uac00\ud558\ub294 \ud568\uc218\uc778\ub370\uc694. \ucc28\ud2b8 \uadf8\ub798\ud53d \uc694\uc18c\ub97c \uad6c\uc131\ud558\ub294 \uac12\ub4e4\ub85c\uc368 \ucc28\ud2b8\uac00 \ud45c\uc2dc\ub420 \uc704\uce58, \uac12\uc5d0 \ub300\ud55c \ubc30\uc5f4, \ucc28\ud2b8\uc758 \ud06c\uae30\uac00 \uc788\uc2b5\ub2c8\ub2e4. \uc774 \ud568\uc218\ub97c \uc2e4\ud589\ud558\uba74 \ub2e4\uc74c\uacfc \uac19\uc740 \uacb0\uacfc \ud654\uba74\uc744 \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<p\/>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.gisdeveloper.co.kr\/wp-content\/uploads\/2018\/03\/chart_map-1.png\" alt=\"\" width=\"1770\" height=\"1919\" class=\"aligncenter size-full wp-image-5135\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\uc9c0\ub3c4 \uc0c1\uc5d0 \ud1b5\uacc4 \ub370\uc774\ud130\ub97c \ucc28\ud2b8\ub97c \ud1b5\ud574 \ud45c\ud604\ud558\ub294 \ucf54\ub4dc\ub97c \uc815\ub9ac\ud574 \ubd05\ub2c8\ub2e4. \ucc28\ud2b8\uc758 \uc885\ub958\ub294 \ub9ce\uc9c0\ub9cc \uc774\uc911 \uc9c0\ub3c4\uc640 \uac00\uc7a5 \uc798\ub9de\ub294 \ucc28\ud2b8\ub294 \ud30c\uc774 \ucc28\ud2b8\uc778\ub370\uc694. \uc774 \ud30c\uc774 \ucc28\ud2b8\ub97c \ud45c\uc2dc\ud574 \ubcf4\ub3c4\ub85d \ud558\uaca0\uc2b5\ub2c8\ub2e4. \uba3c\uc800 \ucc28\ud2b8\ub97c \ud45c\uc2dc\ud560 \uc218\uce58\uc9c0\ub3c4 \ub808\uc774\uc5b4\ub97c \ucd94\uac00\ud569\ub2c8\ub2e4. \ucc28\ud2b8 \ud45c\uc2dc\ub97c \uc704\ud574 \ubc18\ub4dc\uc2dc \uc218\uce58\uc9c0\ub3c4\uac00 \ud544\uc694\ud55c \uac83\uc740 \uc544\ub2c8\uc9c0\ub9cc.. \uc218\uce58\uc9c0\ub3c4\ub294 \ucc28\ud2b8\ub97c \ud45c\uc2dc\ud560 \uc704\uce58\uc640 \ud1b5\uacc4 \ub370\uc774\ud130\ub97c \uc18d\uc131 \uac12\uc73c\ub85c \uac00\uc9c8 \uc218 \uc788\uc73c\ubbc0\ub85c \ucc28\ud2b8\uc5d0 \ub300\ud55c \uc608\uc81c\ub85c \uc0ac\uc6a9\ud558\uae30\uc5d0 &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/www.gisdeveloper.co.kr\/?p=5128\" class=\"more-link\">\ub354 \ubcf4\uae30<span class=\"screen-reader-text\"> &#8220;FingerEyes-Xr\uc5d0\uc11c \ud30c\uc774 \ucc28\ud2b8(Pie Chart) \ud45c\ud604\ud558\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-5128","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\/5128","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=5128"}],"version-history":[{"count":8,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/5128\/revisions"}],"predecessor-version":[{"id":9617,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/5128\/revisions\/9617"}],"wp:attachment":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=5128"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=5128"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=5128"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}