{"id":4705,"date":"2017-04-13T16:32:35","date_gmt":"2017-04-13T07:32:35","guid":{"rendered":"http:\/\/www.gisdeveloper.co.kr\/?p=4705"},"modified":"2020-05-28T15:39:06","modified_gmt":"2020-05-28T06:39:06","slug":"javascript-svg%eb%a1%9c-piechart%eb%a5%bc-%ec%9c%84%ed%95%9c-%eb%8f%84%ed%98%95-%ea%b7%b8%eb%a6%ac%ea%b8%b0","status":"publish","type":"post","link":"http:\/\/www.gisdeveloper.co.kr\/?p=4705","title":{"rendered":"[JavaScript] SVG\ub85c PieChart\ub97c \uc704\ud55c \ub3c4\ud615 \uadf8\ub9ac\uae30"},"content":{"rendered":"<p>JavaScript \uc5b8\uc5b4\ub97c \uc774\uc6a9\ud574 SVG\uc5d0 PieChart\ub97c \uc704\ud55c \ub3c4\ud615\uc744 \uc0dd\uc131\ud558\uae30 \uc704\ud55c \ucf54\ub4dc\ub97c \ud568\uc218\ub85c \uc815\ub9ac\ud574 \ub461\ub2c8\ub2e4. \ucd5c\uc885 \uacb0\uacfc\ub294 \uc544\ub798\ucc98\ub7fc 4\uac1c\uc758 \ud56d\ubaa9\uc73c\ub85c \uad6c\uc131\ub41c \uac00\uc6b4\ub370 \uad6c\uba4d\uc774 \ub6ab\ub9b0 \ubaa8\uc591\uc785\ub2c8\ub2e4.<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/www.gisdeveloper.co.kr\/wp-content\/uploads\/2017\/04\/piechart.png\" alt=\"\" width=\"500\" class=\"aligncenter size-full wp-image-4707\" \/><\/p>\n<p>\uba3c\uc800 \uc544\ub798\ucc98\ub7fc svg\uc640 PieChart\ub97c \uad6c\uc131\ud558\ub294 4\uac1c\uc758 \ud56d\ubaa9\uc744 path\ub85c \uc9c0\uc815\ud574 \ub461\ub2c8\ub2e4. (\uc2e4\uc81c \ud65c\uc6a9\uc2dc\uc5d0\ub294 \uc774 \ubd80\ubd84\uc744 \ubaa8\ub450 JavaScript \ucf54\ub4dc\ub85c \ub3d9\uc801 \uc0dd\uc131\ud558\ub3c4\ub85d \ud574\uc57c \ud569\ub2c8\ub2e4)<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">\r\n<svg id=\"svg\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"500\" height=\"500\">\r\n    <path id=\"arc1\" fill=\"#90caf9\"><\/path>\r\n    <path id=\"arc2\" fill=\"#a5d6a7\"><\/path>\r\n    <path id=\"arc3\" fill=\"#ffe082\"><\/path>\r\n    <path id=\"arc4\" fill=\"#a1887f\"><\/path>\r\n<\/svg>\r\n<\/pre>\n<p>\uc704\uc758 4\uac1c\uc758 path\uc5d0 \ub300\ud574 \uac01\uac01 \ud30c\uc774\ucc28\ud2b8\uc758 \uad6c\uc131 \uc694\uc18c\ub85c \ub9cc\ub4e4\uc5b4 \uc8fc\ub294 \ud568\uc218\ub294 \uc544\ub798\uc640 \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\r\nfunction toPieChartItemPath(x, y, radiusIn, radiusOut, startAngle, endAngle) {\r\n    function _toXY(cX, cY, r, degrees) {\r\n        var rad = (degrees) * Math.PI \/ 180.0;\r\n\r\n        return {\r\n            x: cX + (r * Math.cos(rad)),\r\n            y: cY + (r * Math.sin(rad))\r\n        };\r\n    }\r\n\r\n    var startIn = _toXY(x, y, radiusIn, endAngle);\r\n    var endIn = _toXY(x, y, radiusIn, startAngle);\r\n\r\n    var startOut = _toXY(x, y, radiusOut, endAngle);\r\n    var endOut = _toXY(x, y, radiusOut, startAngle);\r\n\r\n    var arcSweep = (endAngle - startAngle) <= 180 ? \"0\" : \"1\";\r\n\r\n    var d = [\r\n        \"M\", startIn.x, startIn.y,\r\n        \"L\", startOut.x, startOut.y,\r\n        \"A\", radiusOut, radiusOut, 0, arcSweep, 0, endOut.x, endOut.y,\r\n        \"L\", endIn.x, endIn.y,\r\n        \"A\", radiusIn, radiusIn, 0, arcSweep, 1, startIn.x, startIn.y,\r\n        \"z\"\r\n    ].join(\" \");\r\n\r\n    return d;\r\n}\r\n<\/pre>\n<p>\uc774 \ud568\uc218\uc758 \uc778\uc790\ub97c \uc124\uba85\ud558\uba74, x\uc640 y\ub294 \ud30c\uc774 \ucc28\ud2b8\uc758 \uc911\uc2ec\uc810\uc774\uace0 radiusIn\uacfc radiusOut\uc740 \ud30c\uc774\ucc28\ud2b8\uc758 \ub0b4\ubd80 \ubc18\uc9c0\ub984\uacfc \uc678\ubd80 \ubc18\uc9c0\ub984 \uac12\uc785\ub2c8\ub2e4. \uadf8\ub9ac\uace0 startAngle\uc640 endAngle\ub294 \uc2dc\uc791\uac01\ub3c4(3\uc2dc \ubc29\ud5a5\uc774 0\ub3c4)\uc640 \uc885\ub8cc\uac01\ub3c4(\uc2dc\uacc4\ubc29\ud5a5)\uc785\ub2c8\ub2e4. \uc774 \ud568\uc218\ub97c \ud1b5\ud574 \uc55e\uc11c \uad6c\uc131\ud55c svg\uc640 path \uc694\uc18c\ub97c \ud30c\uc774\ucc28\ud2b8\ub85c \uad6c\uc131\ud558\ub294 \ucf54\ub4dc\ub294 \uc544\ub798\uc640 \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\r\ndocument.getElementById(\"arc1\").setAttribute(\"d\", toPieChartItemPath(250, 250, 100, 240, 0, 45));\r\ndocument.getElementById(\"arc2\").setAttribute(\"d\", toPieChartItemPath(250, 250, 100, 240, 45, 90));\r\ndocument.getElementById(\"arc3\").setAttribute(\"d\", toPieChartItemPath(250, 250, 100, 240, 90, 180));\r\ndocument.getElementById(\"arc4\").setAttribute(\"d\", toPieChartItemPath(250, 250, 100, 240, 180, 360));\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>JavaScript \uc5b8\uc5b4\ub97c \uc774\uc6a9\ud574 SVG\uc5d0 PieChart\ub97c \uc704\ud55c \ub3c4\ud615\uc744 \uc0dd\uc131\ud558\uae30 \uc704\ud55c \ucf54\ub4dc\ub97c \ud568\uc218\ub85c \uc815\ub9ac\ud574 \ub461\ub2c8\ub2e4. \ucd5c\uc885 \uacb0\uacfc\ub294 \uc544\ub798\ucc98\ub7fc 4\uac1c\uc758 \ud56d\ubaa9\uc73c\ub85c \uad6c\uc131\ub41c \uac00\uc6b4\ub370 \uad6c\uba4d\uc774 \ub6ab\ub9b0 \ubaa8\uc591\uc785\ub2c8\ub2e4. \uba3c\uc800 \uc544\ub798\ucc98\ub7fc svg\uc640 PieChart\ub97c \uad6c\uc131\ud558\ub294 4\uac1c\uc758 \ud56d\ubaa9\uc744 path\ub85c \uc9c0\uc815\ud574 \ub461\ub2c8\ub2e4. (\uc2e4\uc81c \ud65c\uc6a9\uc2dc\uc5d0\ub294 \uc774 \ubd80\ubd84\uc744 \ubaa8\ub450 JavaScript \ucf54\ub4dc\ub85c \ub3d9\uc801 \uc0dd\uc131\ud558\ub3c4\ub85d \ud574\uc57c \ud569\ub2c8\ub2e4) \uc704\uc758 4\uac1c\uc758 path\uc5d0 \ub300\ud574 \uac01\uac01 \ud30c\uc774\ucc28\ud2b8\uc758 \uad6c\uc131 \uc694\uc18c\ub85c \ub9cc\ub4e4\uc5b4 \uc8fc\ub294 \ud568\uc218\ub294 &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/www.gisdeveloper.co.kr\/?p=4705\" class=\"more-link\">\ub354 \ubcf4\uae30<span class=\"screen-reader-text\"> &#8220;[JavaScript] SVG\ub85c PieChart\ub97c \uc704\ud55c \ub3c4\ud615 \uadf8\ub9ac\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":[88],"tags":[],"class_list":["post-4705","post","type-post","status-publish","format-standard","hentry","category-javascript"],"_links":{"self":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/4705","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=4705"}],"version-history":[{"count":7,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/4705\/revisions"}],"predecessor-version":[{"id":4711,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/4705\/revisions\/4711"}],"wp:attachment":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4705"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4705"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4705"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}