{"id":399,"date":"2015-10-28T14:00:11","date_gmt":"2015-10-28T05:00:11","guid":{"rendered":"http:\/\/www.takaya-com.jp\/archives\/?p=399"},"modified":"2016-03-10T10:11:46","modified_gmt":"2016-03-10T01:11:46","slug":"svg_bar_graph","status":"publish","type":"post","link":"https:\/\/takaya-com.jp\/archives\/2015\/10\/svg_bar_graph\/","title":{"rendered":"JavaScript\u3067SVG\u306erect\u3092\u4e26\u3079\u3066\u6a2a\u68d2\u30b0\u30e9\u30d5\u3092\u63cf\u753b\u3059\u308b"},"content":{"rendered":"<p><!-- \u672c\u6587 --><\/p>\n<p>\u30ab\u30f3\u30de\u533a\u5207\u308a\u306e\u6570\u5024\u306e\u5217\uff081\u5217\u306e\u307f\uff09\u3068\u5bfe\u5fdc\u3059\u308b\u8272\u3092\u6307\u5b9a\u3059\u308b\u3060\u3051\u3067\u3001\u7c21\u5358\u306b\u6a2a\u68d2\u30b0\u30e9\u30d5\u304c\u63cf\u3051\u307e\u3059\u3002<\/p>\n<p>  <!--more--><\/p>\n<p>\n\u3053\u306e\u30b3\u30fc\u30c9\u3067\u30011\u30da\u30fc\u30b8\u4e2d\u306b\u8907\u6570\u306e\u6a2a\u5411\u304d\u30d0\u30fc\u30b0\u30e9\u30d5\u3092\u8868\u793a\u3055\u305b\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\n<\/p>\n<p>\u4e0e\u3048\u3089\u308c\u305f\u8907\u6570\u306e\u6570\u5024\u306b\u3064\u3044\u3066\u5168\u4f53\u304b\u3089\u307f\u305f\u5272\u5408\u3092\u8a08\u7b97\u3057\u3001svg\u306eviewPort\u306e\u6a2a\u5e45\u3092100%\u3068\u3057\u3066\u3001\u6570\u5024\u306b\u5fdc\u3058\u305f\u5e45\u3067\u5857\u308a\u5206\u3051\u3066\u3044\u307e\u3059\u3002<br \/>\n\uff08\u30e1\u30ea\u30c3\u30c8\u304c\u3042\u307e\u308a\u306a\u3044\u3067\u3059\u304c\u3001\u7e26\u7dda\u3060\u3051\u3067\u69cb\u6210\u3055\u308c\u3066\u3044\u308b\u56fd\u65d7\u306a\u3069\u306e\u63cf\u753b\u306b\u3082\u5229\u7528\u3067\u304d\u307e\u3059\uff09\n<\/p>\n<p>\u2193\u4ee5\u4e0b\u304c\u5b9f\u969b\u306e\u30bd\u30fc\u30b9\u30b5\u30f3\u30d7\u30eb\u3067\u3059\u3002<\/p>\n<p>\u25bcJavaScript<\/p>\n<pre class=\"lang:js decode:true \" title=\"JavaScript\" >\r\n<script>\r\nwindow.onload = function () {\r\nvar data;\r\nvar graphWidth=0;\r\nvar graphHeight=0;\r\nvar root=\"\";\r\nvar color=\"\";\r\ndefo_color=[\"yellow\",\"blue\",\"pink\",\"lime\",\"red\"];\r\n\r\ngraph(\"30,20,40,60,100\",280,40,\"graph1\");\r\ngraph(\"500,10,41,3,30\",280,10,\"graph2\");\r\ngraph(\"10,10,10\",280,150,\"graph3\",\"rgba(255,0,0,0.6)_rgba(0,255,0,0.6)_rgba(0,0,255,0.6)\");\r\n\r\nfunction graph(data,graphWidth,graphHeight,root,color){\r\nconsole.log(color);\r\n\t\/\/\u6587\u5b57\u5217\u3067\u5165\u529b\u3055\u308c\u305f\u30c7\u30fc\u30bf\u3092split\u3057\u3066\u914d\u5217\u306b\u3001\u305d\u306e\u914d\u5217\u3092\u6570\u5b57\u306b\u5909\u63db\r\n\tvar dataArray = data.split(\",\");\r\n\tvar len=dataArray.length;\r\n\tvar dataArray_x = new Array;\r\n\tdataArray_x.push(0);\r\n\r\n\t\/\/\tcolor\u306e\u6307\u5b9a\u304c\u306a\u3051\u308c\u3070\u30c7\u30d5\u30a9\u30eb\u30c8\u5024\u3092\u308f\u305f\u3059\u3002\r\n\t\/\/\t\u6587\u5b57\u5217\u304c\u3042\u308b\u5834\u5408\u3001\u8272\u5024\u3068\u3057\u3066\u6b63\u5e38\u304b\u306e\u5224\u5b9a\u306f\u884c\u3063\u3066\u3044\u306a\u3044\r\n\t\/\/\t\u6587\u5b57\u5217\u3067\u5165\u529b\u3055\u308c\u305f\u30c7\u30fc\u30bf\u3092split\u3057\u3066\u914d\u5217\u306b\r\n\tif(color==null)graphColor=defo_color;\r\n\telse var graphColor = color.split(\"_\");\r\n\tvar viewBox=\"0 0 \"+graphWidth+\" \"+graphHeight;\r\n\tvar dataTotal=0;\r\n\tfor(i=0 ; i<len ; i++){\r\n\t\tdataArray[i]=Number(dataArray[i]);\r\n\t\tdataTotal += dataArray[i];\r\n\t};\r\n\t\/\/\tgraphWidth\u3092100%\u3068\u3057\u3066\u5404\u30c7\u30fc\u30bf\u306e\u6a2a\u5e45\u3092\u6c42\u3081\u308b\r\n\tfor(i=0 ; i<len ; i++){\r\n\t\tdA=dataArray[i]*graphWidth\/dataTotal;\r\n\t\tdataArray[i]=Math.round(dA*100)\/100;\r\n\t};\r\n\t\/\/\t\u5404\u30c7\u30fc\u30bf\u306e\u5e45\u3092\u7d2f\u7a4d\u3059\u308b\u3053\u3068\u3067\u3001i\u756a\u76ee\u306e\u30c7\u30fc\u30bf\u306erect\u306e\u63cf\u304d\u3060\u3057\u4f4d\u7f6e\u3092\u6c42\u3081\u308b\r\n\tfor(i=0 ; i<len-1 ; i++){\r\n\t\tdataArray_x.push(dataArray_x[i]+dataArray[i]);\r\n\t};\r\n\r\n\tvar root_div=document.getElementById(root);\r\n\tvar SVG = \"http:\/\/www.w3.org\/2000\/svg\";\r\n\tvar svg = document.createElementNS(SVG,\"svg\");\r\n\r\n\tsvg_create();\r\n\tgraph_bar();\r\n\tsvg_append();\r\n\r\n\tfunction svg_create(){\r\n\t\t\tsvg.setAttribute(\"viewBox\",viewBox);\r\n\t\t}\r\n\tfunction svg_append(){\r\n\t\t\troot_div.appendChild(svg);\r\n\t\t}\r\n\tfunction graph_bar(){\r\n\t\tfor(i=0 ; i<len ; i++){\r\n\t\t\tvar rt = document.createElementNS(SVG, \"rect\");\r\n\t\t\trt.setAttribute(\"x\",dataArray_x[i]);\r\n\t\t\trt.setAttribute(\"y\",0);\r\n\t\t\trt.setAttribute(\"height\",graphHeight);\r\n\t\t\trt.setAttribute(\"width\",dataArray[i]);\r\n\t\t\trt.setAttribute(\"fill\",graphColor[i]);\r\n\t\t\trt.setAttribute(\"stroke\",\"none\");\r\n\t\t\trt.setAttribute(\"stroke-width\",\"none\");\r\n\t\t\tsvg.appendChild(rt);\r\n\t\t}\r\n\t}\r\n}\r\n}\r\n<\/script>\r\n<\/pre>\n<p>\u25bcCSS<\/p>\n<pre class=\"lang:css decode:true \" title=\"CSS\" >\r\n<style>\r\ndiv{\r\n\tborder:3px solid #666;\r\n\tpadding:15px 40px;\r\n\tmargin:20px;\r\n}\r\ndiv#graph1{width:400px;}\r\ndiv#graph2{width:200px;}\r\ndiv#graph3{width:300px;}\r\n<\/style>\r\n<\/pre>\n<p>\u25bcHTML<\/p>\n<pre class=\"lang:xhtml decode:true \" title=\"XHTML\" >\r\n<div id=\"graph1\">\r\n<\/div>\r\n<div id=\"graph2\">\r\n<\/div>\r\n<div id=\"graph3\">\r\n<\/div>\r\n<\/pre>\n<p><a href=\"http:\/\/www.takaya-com.jp\/archives\/demo\/svg_bar_glaph\/\" target=\"_blank\">\u30c7\u30e2\u30da\u30fc\u30b8\u306f\u3001\u3053\u3061\u3089<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u30ab\u30f3\u30de\u533a\u5207\u308a\u306e\u6570\u5024\u306e\u5217\uff081\u5217\u306e\u307f\uff09\u3068\u5bfe\u5fdc\u3059\u308b\u8272\u3092\u6307\u5b9a\u3059\u308b\u3060\u3051\u3067\u3001\u7c21\u5358\u306b\u6a2a\u68d2\u30b0\u30e9\u30d5\u304c\u63cf\u3051\u307e\u3059\u3002<\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1,3],"tags":[],"_links":{"self":[{"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/posts\/399"}],"collection":[{"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/comments?post=399"}],"version-history":[{"count":4,"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/posts\/399\/revisions"}],"predecessor-version":[{"id":411,"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/posts\/399\/revisions\/411"}],"wp:attachment":[{"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/media?parent=399"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/categories?post=399"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/tags?post=399"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}