人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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

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

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

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

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

●質問者: southgate_01
●カテゴリ:インターネット ウェブ制作
✍キーワード:CSS うまい アドバイス クリア グラフ
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● y-kawaz
●100ポイント ベストアンサー

こんな感じでしょうか?

<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

◎質問者からの返答

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

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ