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

解決済

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

質問失礼致します。

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

通報する

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

質問の本文を隠す

回答 (13件中11～13件)

ベストアンサー優先
最新から表示
回答順に表示

No.4

回答者： taloo
回答日時：2011/11/16 05:22

No.1と同じですが。

http://raphaeljs.com/pie.html
こちらのサンプルでは、
pie.jsより

paper.path(["M", cx, cy, "L", x1, y1, "A", r, r, 0, +(endAngle - startAngle > 180), 0, x2, y2, "z"]).attr(params);

としていますね。
paramsは色情報が入っているようです。

http://raphaeljs.com/growing-pie.html
こちらのサンプルではRaphaelを拡張していますが

return {
path: [["M", x, y], ["l", r * Math.cos(a1), r * Math.sin(a1)], ["A", r, r, 0, +flag, 1, x + r * Math.cos(a2), y + r * Math.sin(a2)], ["z"]],
fill: "hsb(" + clr + ", .75, .8)"
};

となっていますので、円グラフの基本はpathを使うようです。

一番外側の、灰色の円はPaper.circle()でいいと思います。

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございます。
jsは得意ではないので、時間をかけてリファレンスの方参考にして勉強してみます！！
まさにこうしたアニメーションをグラフにつけたいんですよね！みなさんのご意見を参考に考えてみます。

通報する

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

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) に固定しちゃえば、必要な座標は、弧の始点と終点だけだから、数学の教科書引っぱり出して計算方法を確認してみて！