- PR -

Javascriptで、円グラフの作成

«前のページへ 1|2|3 次のページへ»
投稿者投稿内容
納豆
会議室デビュー日: 2006/12/14
投稿数: 11
投稿日時: 2006-12-21 15:30
ありがとうございます(＾ω＾)

参考させていただきます

[ メッセージ編集済み 編集者: 納豆 編集日時 2006-12-21 15:32 ]
冬寂
ぬし
会議室デビュー日: 2002/09/17
投稿数: 449
投稿日時: 2006-12-21 15:40
引用:

納豆さんの書き込み (2006-12-21 15:30) より:
ありがとうございます(＾ω＾)

参考させていただきます

[ メッセージ編集済み 編集者: 納豆 編集日時 2006-12-21 15:32 ]

えーと・・・興味があるので
引用:

[javascript 円グラフ]と検索して円グラフのページを見つけましたが、知識が足りないせいか、ソース使用する際に、データの流れがよくわかりません

で見つけたページを紹介して欲しいのですが。と書いたのですが。

# 自分の事しか考えていないのでしょうか？
mio
ぬし
会議室デビュー日: 2005/08/25
投稿数: 734
お住まい・勤務地: 神奈川県
投稿日時: 2006-12-21 15:53
SVGとか使わず無理やり作ってみた。線がはみ出るとかの中途半端なのは気にしないでください(ぉ
線だけで色はつきません。
コード:
<style>
img{
	position:absolute;
	width:1px;
	height:1px;
}
</style>
<script>
var canvas = null;
var imgs = [];
var RADIUS = 100;
var PI2 = 3.14159265358979323846 * 2;
function make() {
	clr();
	var vals = [
		parseInt(document.getElementById("t1").value),
		parseInt(document.getElementById("t2").value),
		parseInt(document.getElementById("t3").value)
	];
	var total = 0;
	var n = vals.length;
	for (var i = 0; i < n; i++) total += vals[i];
	if (!total) return;
	var rates = [];
	for (var i = 0; i < n; i++) rates[i] = vals[i] / total;
	drawLine(150, 50, 150, 150);
	for (var i = 0, x, y, t = 0; i < n; i++) {
		x = parseInt(150 + RADIUS * Math.sin(PI2 * t));
		y = parseInt(150 - RADIUS * Math.cos(PI2 * t));
		drawLine(150, 150, x, y);
		t += rates[i];
	}
}
function drawLine(x1, y1, x2, y2) {
	var xd = x2 - x1;
	var yd = y2 - y1;
	if (xd < yd) {
		for (var s = xd / yd; y1 < y2; x1 += s, y1++) setPixel(x1, y1);
	} else {
		for (var s = yd / xd; x1 < x2; x1++, y1 += s) setPixel(x1, y1);
	}
}
function setPixel(x, y) {
	y += canvas.offsetTop;
	var img = document.createElement("img");
	img.src = "dot.png";
	var st = img.style;
	st.left = Math.floor(x) + "px";
	st.top = Math.floor(y) + "px";
	canvas.appendChild(img);
	imgs[imgs.length] = img;
}
function clr() {
	for (var i = 0, img; (img = imgs[i]); i++) canvas.removeChild(img);
	imgs = [];
}
window.onload = function() {
	window.onload = null;
	canvas = document.getElementById("c");
}
</script>
<body style="margin:0">
<input id="t1" style="width:100px"/>
<input id="t2" style="width:100px"/>
<input id="t3" style="width:100px"/>
<br/>
<input type="button" value="make" onclick="make()"/>
<input type="button" value="clear" onclick="clr()"/>
<div id="c" style="width:300px;height:300px;background:url(circle.png)"></div>
</body>

img.png…1ピクセルx1ピクセルの画像
circle.png…300ピクセルx300ピクセルで中心に100ピクセル半径の円
Java人
ベテラン
会議室デビュー日: 2005/06/24
投稿数: 94
投稿日時: 2006-12-21 17:34
＞結局具体性にかけるなー。いみねー。

まったく関係がありませんが、
気になったので書かせて頂きました。

近頃思うんですが、なぜこのような心ないコメントを書かれるのでしょうか？
書いた本人はすごく悩んだ上で投稿してきたんだと思います。
また、返信された方も親切心で返信されたんだと思います。
このようなことを書かれるのであればご自分も関連する情報を
提供されるべきではないでしょうか？
ぶさいくろう
ぬし
会議室デビュー日: 2005/11/22
投稿数: 1232
お住まい・勤務地: 川崎市（は俺も含めてロクな人間が住んでないよｗ）
投稿日時: 2006-12-21 18:47
引用:

Java人さんの書き込み (2006-12-21 17:34) より:
＞結局具体性にかけるなー。いみねー。

まったく関係がありませんが、
気になったので書かせて頂きました。

近頃思うんですが、なぜこのような心ないコメントを書かれるのでしょうか？
書いた本人はすごく悩んだ上で投稿してきたんだと思います。
また、返信された方も親切心で返信されたんだと思います。
このようなことを書かれるのであればご自分も関連する情報を
提供されるべきではないでしょうか？

ああ。面倒くさい。

> なぜこのような心ないコメントを書かれるのでしょうか？
「結局具体性にかけるなー。」ってのは結局具体的に何がわからんのかがわからないって意味だ。
「いみねー。」ってのは俺よりも前に具体的な要求をした人がいたからだ。
それくらいわかるだろ。

はい。で。勝手に「心ない」と決め付けた根拠を教えてくれ。
俺に対しては「心ない」そうやって決め付けておきながら

> 書いた本人はすごく悩んだ上で投稿してきたんだと思います。
って？ハァ？？そりゃどうみても偏りすぎだろって！！ｗｗｗｗｗｗｗｗ
どうしてそういう結論に至ったのか根拠を教えてくれ。

ああ。そうそう。こっちもおいておくよ。
http://www.atmarkit.co.jp/bbs/phpBB/viewtopic.php?topic=35545&forum=7

> 書いた本人はすごく悩んだ上で投稿してきたんだと思います
かぁー。

> このようなことを書かれるのであればご自分も関連する情報を提供されるべき
そういうことはお前が情報提供してから言ってくれ。（正論）
そもそも情報提供する気がないって勝手に判断しないでくれるかな？

俺は君とは違ってまともな質問者には質問に答えているし。
質問者が俺に答えてくれれば答えている。（そのあと謝ることもあるし）

今回だって「具体的に」って言われているのに具体性がないから、再度「具体的に」と書いただけ。
それに対してまだ質問者が答えていない。その段階なのに、何が

> このようなことを書かれるのであればご自分も関連する情報を提供されるべきではないでしょうか？

だ。順番が違うだろって！！！ｗｗｗｗ

そうそう。「心ない」っていうくらいなら、他のスレッドのみんなにも注意しとけよ。
http://www.atmarkit.co.jp/bbs/phpBB/viewtopic.php?topic=35545&forum=7
ここのトップバッターの方なんて答える気がない旨のレスを返している。
誰がどう考えても俺より心ないと思うが。当然注意してくれるんだよな？

あとな。こういうことはPMで送ればいいと思わなかったのかね？
俺に注意していることと何も変わらないだろ。これじゃ。
俺は君と違って情報提供する気はあるので一緒にしないでもらえるかね。
うわん
ベテラン
会議室デビュー日: 2006/09/04
投稿数: 67
投稿日時: 2006-12-21 18:59
引用:
近頃思うんですが、なぜこのような心ないコメントを書かれるのでしょうか？
書いた本人はすごく悩んだ上で投稿してきたんだと思います。
また、返信された方も親切心で返信されたんだと思います。
このようなことを書かれるのであればご自分も関連する情報を
提供されるべきではないでしょうか？


ぶさいくろう氏の書き込みを、ただの心ない揶揄と捉えるのはどうでしょうか。
スレ主の投稿は何がわからないかがわからないので、
インギ氏が、
引用:
どういうキーワードで検索して、どういうページをみて、何がわからなかったのでしょうか？

こう聞いています。
それに対して、スレ主は
引用:
[javascript 円グラフ]と検索して円グラフのページを見つけましたが、知識が足りないせいか、ソース使用する際に、データの流れがよくわかりません

詳しく説明のあるページを知っているのなら、教えていただけないでしょうか？

インギ氏の問いに対して答えになっていない回答をしています。

これではどのページをスレ主が見たかわからないので、
適切なアドバイスはできません。
ぶさいくろう氏はそれを指摘していると取ることもできると思います。

そういった指摘は二度手間や、間違ったアドバイスをしないためにも、
重要なことではないでしょうか？

表現に関してのみを指摘されているのであれば構いませんが。
（表現に関しては自由だと思っていますけど）

#本人に先を越されてしまうと、恥ずかしいですねorz


[ メッセージ編集済み 編集者: うわん 編集日時 2006-12-21 19:01 ]
ださいくろう
常連さん
会議室デビュー日: 2006/10/17
投稿数: 46
お住まい・勤務地: 豊田市
投稿日時: 2006-12-21 19:08
引用:

うわんさんの書き込み (2006-12-21 18:59) より:
ぶさいくろう氏の書き込みを、ただの心ない揶揄と捉えるのはどうでしょうか。

私も同意見です。
なぜ「心ない」なんていわれるんでしょうね。

心ないって意味では

引用:

冬寂さんの書き込み (2006-12-21 15:40) より:
# 自分の事しか考えていないのでしょうか？

の方が、人格否定の投げかけですから心ないと普通の人は思うでしょうに。
なぜ、ぶさいくろう氏に対してだけそういうことを言うんでしょうね。
私怨だったりしないでしょうか？

ちなみに、冬寂さんを引き合いに出しましたが、冬寂さんが悪いとは私は思っていません。
冬寂さん、勝手に引き合いに出してごめんなさい。
どちらかといえばという話をしたかっただけなのです。

この冬寂さんの発言も、原因は、

引用:

納豆さんの書き込み (2006-12-21 15:30) より:
ありがとうございます(＾ω＾)
参考させていただきます

だけで終えた質問者にあります。
ですから、

引用:

書いた本人はすごく悩んだ上で投稿してきたんだと思います

というのはどのあたりからご判断されたのか、私も気になります。
人を非難したのであれば、当然根拠あってのことですよね。

言葉が丁寧だったら何をいっても許されると勘違いしていませんか？
言葉が汚かったらどんな好意も許されないと勘違いしていませんか？
未記入
大ベテラン
会議室デビュー日: 2005/03/12
投稿数: 148
投稿日時: 2006-12-21 23:09
こういう書き込みになってしまう気持ちが
まったくわからないわけではないけどさ、
質問者は簡単な1行程度の書き込みで説明を終え
詳しく教えてくださいといわれても、
回答する側は途方にくれるんですよ。

引用:

納豆さんの書き込み (2006-12-21 14:04) より:
[javascript 円グラフ]と検索して円グラフのページを見つけましたが、知識が足りないせいか、ソース使用する際に、データの流れがよくわかりません

詳しく説明のあるページを知っているのなら、教えていただけないでしょうか？

逆にこっちが聞きたいよ。
どんな円グラフなの？
いきなりデータの流れといわれても知らんがな。

というか意地悪してんのか？

よくわからない質問に詳しく説明するなんて無理。
回答者に余計な手間をとらせるためにやっていると感じるくらいむかつく。
宿題の答えを教えてもらおうとしているやつよりたちわるいな。
«前のページへ 1|2|3 次のページへ»

スキルアップ／キャリアアップ（JOB@IT）