html5で複雑な円グラフを描画

解決済

質問者：mizunoke88
質問日時：2011/11/15 13:14
回答数：13件

質問失礼致します。

html5を使って複雑な円グラフを描画したいのですが、できなくて困っています。
Raphael.jsを使って円グラフを書いていますが、添付した画像のような円グラフはどうつくれば良いかわかりません。
どなたか知識をご教授頂けると幸いでございます。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (13件中11～13件)

No.3ベストアンサー

回答者： fujillin
回答日時：2011/11/15 21:14

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>

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございます。正常に動きました！
コードも非常に簡潔でしたので、取り入れてみたいと思ってます！ちなみにNo2さんのほうにも記載させて頂きましたが、
http://elycharts.com/examples#example_p1
こうしたサンプルのように、ひとつひとつの扇形に対してアニメーションもつけたいんです。。
また、ひとつひとつの扇形をオフジェクトとして取り出して、クリックしたらajaxを使って該当データを引っ張ってきて、ツールチップに表示、こうしたことをやっていきたいとおもっているんですね。
どうかfujillin様からも知識をご教授頂けないでしょうか？

通報する

お礼日時：2011/11/16 10:47

No.2

回答者： babu_baboo
回答日時：2011/11/15 20:26

うごくだろうか？

<!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>

- 0
- 件

通報する

この回答へのお礼

babu_babooさん、以前もご回答頂きありがとうございます。
動作の方確認しまして、正常に動きました。どうもご丁寧にありがとうございます。
ちなみに
http://elycharts.com/examples#example_p1
こうしたサンプルのように、ひとつひとつの扇形に対してアニメーションもつけたいんです。。
また、ひとつひとつの扇形をオフジェクトとして取り出して、クリックしたらajaxを使って該当データを引っ張ってきて、ツールチップに表示、こうしたことをやっていきたいとおもっているんです。
知識をご教授頂けないでしょうか？

通報する

お礼日時：2011/11/16 10:44

No.1

回答者： dscripty
回答日時：2011/11/15 16:11

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/ …

path の記述のポイントとしては、

1) 中心から弧の始点へ直線を引いて
2) A か a コマンドで弧を描いて
3) z コマンドでパスを閉じる

中心を (0,0) に固定しちゃえば、必要な座標は、弧の始点と終点だけだから、数学の教科書引っぱり出して計算方法を確認してみて！