- ベストアンサー
html5で複雑な円グラフを描画
質問失礼致します。 html5を使って複雑な円グラフを描画したいのですが、できなくて困っています。 Raphael.jsを使って円グラフを書いていますが、添付した画像のような円グラフはどうつくれば良いかわかりません。 どなたか知識をご教授頂けると幸いでございます。
- mizunoke88
- お礼率63% (23/36)
- JavaScript
- 回答数13
- ありがとう数13
- みんなの回答 （13）
- 専門家の回答
質問者が選んだベストアンサー
html5ならcanvasが使えるのでは？ 扇形を作るものを用意しておけば、それで事足りそう。 html5もcanvasも使ったことはありませんが、お勉強のためにサンプルを。 参考にしたサイト https://developer.mozilla.org/ja/Canvas_tutorial fx6.0でしか確認していません。 数値の意味が不明でしたので、角度などは適当です。 （全角空白は半角に） <!DOCTYPE html> <html lang="ja"> <head> <title>sample</title> </head> <body> <canvas id="graph" width="400" height="400"></canvas> <script type="text/javascript"> (function(){ var fanShape = (function(rad){ return function(ctx, r, ang1, ang2, col, frame){ ctx.fillStyle = col; ctx.beginPath(); ctx.moveTo(0, 0); ctx.arc(0, 0, r, rad(ang1), rad(ang2)); ctx.fill(); if(frame){ ctx.closePath(); ctx.stroke(); } } })(function(a){ return Math.PI*(a-90)/180; }); var context, graph = document.getElementById("graph"); if(graph.getContext && (context = graph.getContext("2d"))){ context.translate(200, 200); fanShape(context, 180, 0, 360, "#ddd"); fanShape(context, 160, 0, 10, "#0c0", true); fanShape(context, 90, 10, 240, "#c00", true); fanShape(context, 60, 240, 360, "#00c", true); } })(); </script> </body> </html>
その他の回答 (12)
- babu_baboo
- ベストアンサー率51% (268/525)
うごくだろうか？ <!DOCTYPE html> <html lang="ja"> <title>Test</title> <meta charset="utf-8"> <body> <canvas id="HOGE" width="800" height="400"> canvas による描画 </canvas> <script> var dt = [ { value: 512, radius: 90, color: '#080', caption: 'A' }, { value: 6534, radius: 30, color: '#f00', caption: 'B' }, { value: 3056, radius: 20, color: '#008', caption: 'C' } ]; var canvas = document.getElementById ('HOGE'); var op = { ctrx: canvas.getContext ('2d'), x: canvas.offsetWidth / 2 |0, y: canvas.offsetHeight / 2 |0, r: 180 }; var total = dt.reduce (function (rst, obj) { return rst + obj.value; }, 0); var drawArc = function () { var square = -90; var sin = Math.sin; var cos = Math.cos; var deg = Math.PI / 180; return function (obj) { var ctrx = this.ctrx; var square2 = square + (360 / 100) * obj.rate * 100; ctrx.fillStyle = obj.color; ctrx.strokeStyle = 'black'; ctrx.beginPath (); ctrx.moveTo (this.x, this.y); ctrx.arc (this.x, this.y, obj.radius * this.r / 100 |0, square * deg, square2 * deg, false); ctrx.lineTo (this.x, this.y); ctrx.closePath (); ctrx.fill (); ctrx.stroke (); square = square2; }; } (); var drawCaption = function () { var offsetX = 10; var offsetY = 8; var color = 'white'; var font = "18px 'ＭＳ Ｐゴシック'"; return function (obj) { var y = this.y - this.r * obj.radius / 100; this.ctrx.fillStyle = color; this.ctrx.font = font; this.ctrx.fillText (obj.caption, this.x + offsetX, y + offsetY); }; } (); op.ctrx.arc (op.x, op.y, op.r, 0, 360, false); op.ctrx.fillStyle = 'silver'; op.ctrx.fill (); dt.forEach (function (obj) { obj.rate = obj.value / this; }, total); dt.forEach (drawArc, op); dt.forEach (drawCaption, op); </script>
お礼
babu_babooさん、以前もご回答頂きありがとうございます。 動作の方確認しまして、正常に動きました。どうもご丁寧にありがとうございます。 ちなみに http://elycharts.com/examples#example_p1 こうしたサンプルのように、ひとつひとつの扇形に対してアニメーションもつけたいんです。。 また、ひとつひとつの扇形をオフジェクトとして取り出して、クリックしたらajaxを使って該当データを引っ張ってきて、ツールチップに表示、こうしたことをやっていきたいとおもっているんです。 知識をご教授頂けないでしょうか？
- dscripty
- ベストアンサー率51% (166/325)
HTML5 だから SVG 前提で書くけど、 質問の添付の円グラフは、『円弧と終始点から中心への直線で囲まれた図形』の組み合わせだから、path 要素の円弧を描くためのコマンド A(絶対座標)/a(相対座標)を使えばいいとおもうよ。 Raphaël Reference Paper.path([pathString]) http://raphaeljs.com/reference.html#Paper.path SVG 1.1 勧告 日本語版 8.3.8 楕円弧曲線命令 http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/paths.html#PathDataEllipticalArcCommands path の記述のポイントとしては、 1) 中心から弧の始点へ直線を引いて 2) A か a コマンドで弧を描いて 3) z コマンドでパスを閉じる 中心を (0,0) に固定しちゃえば、必要な座標は、弧の始点と終点だけだから、数学の教科書引っぱり出して計算方法を確認してみて！
お礼
ご回答ありがとうございます。 そもそもjsが得意ではなかったので、教えて頂いたリファレンスをしっかり読んでみます。
- 1
- 2
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_3_thumbnail_img_sm.png)
お礼
ご回答ありがとうございます。正常に動きました！ コードも非常に簡潔でしたので、取り入れてみたいと思ってます！ちなみにNo2さんのほうにも記載させて頂きましたが、 http://elycharts.com/examples#example_p1 こうしたサンプルのように、ひとつひとつの扇形に対してアニメーションもつけたいんです。。 また、ひとつひとつの扇形をオフジェクトとして取り出して、クリックしたらajaxを使って該当データを引っ張ってきて、ツールチップに表示、こうしたことをやっていきたいとおもっているんですね。 どうかfujillin様からも知識をご教授頂けないでしょうか？