CSSを使ってグラフを描く方法に付いて教えてください。


http://www.aoni.waseda.jp/abek/document/regression-1.html

こちらのサイトの一番下の方に、赤い点と青い点をプロットしたグラフが2つあります。
このようなグラフをCSSのみで描きたいのですが、うまいやり方をご存じの方は教えていただけないでしょうか?
一応クリアしたい要件は次のような物です。

1.(1,1),(2,3)などのXY座標を持つ点を正しい位置にプロットしたい。
2.X軸Y軸などのラベル・細かい数値などは必要なく、大まかな相関が目視できればよい

相関が目視出来るグラフをCSSで手頃に作りたいというのがやりたいことなのですが、棒グラフと違ってなかなかうまいやり方を思いつきません。

アドバイスをいただけると嬉しいです、よろしくお願いします。

回答の条件
  • 1人10回まで
  • 登録:2009/04/14 15:08:16
  • 終了:2009/04/14 16:41:07

ベストアンサー

id:y-kawaz No.1

y-kawaz回答回数1420ベストアンサー獲得回数2252009/04/14 16:08:10

ポイント100pt

こんな感じでしょうか?

<html>
<head>
<style type="text/css">
div.plotarea {
	position:relative;
	width:200px;
	height:200px;
	background-color: lightgray;
	border-left: black 1px solid;
	border-bottom: black 1px solid;
}
div.point {
	position:absolute;
	width:5px;
	height:5px;
	background-color:blue;
	font-size:1px;
}
</style>
</head>
<body>

<div class="plotarea">
<div class="point" style="top:110px;left:5px;"></div>
<div class="point" style="top:115px;left:15px;"></div>
<div class="point" style="top:130px;left:25px;"></div>
<div class="point" style="top:35px;left:35px;"></div>
<div class="point" style="top:40px;left:45px;"></div>
<div class="point" style="top:55px;left:155px;"></div>
<div class="point" style="top:70px;left:165px;"></div>
<div class="point" style="top:75px;left:175px;"></div>
<div class="point" style="top:90px;left:85px;"></div>
<div class="point" style="top:95px;left:95px;"></div>
<div class="point" style="top:150px;left:55px;"></div>
</div>

</body>
</html>

f:id:y-kawaz:20090414160512p:image

id:southgate_01

コメントありがとうございます、大いに参考になります。

早速使わせていただきたいと思います。

2009/04/14 16:40:46

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません