質問: html5で複雑な円グラフを描画 質問失礼致します。 html5を使って複雑な円グラフを描画したいのですが、できなくて困っています。 raphael.jsを使って円グラフを書いていますが、添付した画像のような円グラフはどうつくれば良いかわかりません。 どなたか知識をご教授頂けると幸いでございます。
回答: ちょっと時間できたから書いてみた。 180)? 1: 0; var sweep_flag = 1; var rad = math.pi * deg / 360.0; //角度を半分で計算 var y = -(r * math.cos(rad)); //座標系が svg は特殊なので var x = (r * math.sin(rad)); //座標系が svg は特殊なので attrs["d"] = "m0,0 l" + (-x).tofixed(3) + "," + y.tofixed(3) + "a" + r + "," + r + " 0 " + large_arc_flag + "," + sweep_flag + " " + x.tofixed(3) + "," + y.tofixed(3) + " z"; var pie = createsvgelement("path", attrs); var g = document.createelementns("http://www.w3.org/2000/svg","g"); g.appendchild(pie); g.setattribute("transform", "rotate(" + (deg/2+start) + ")"); return g; } function pie_mouseover(evt) { // 親要素の g を rotate してるから // y 座標を -20 だけ移動すれば、 // 自動で移動して欲しい方向に移動する。 var pie = evt.target; var fill = pie.setattribute("transform", "translate(0,-20)"); } function pie_mouseout(evt) { var pie = evt.target; pie.removeattribute("transform"); } ]]>