2009年11月11日

偏差値表示機能を作ってます

偏差値を表示する仕組みを考えたので作ってみました。
やっぱり、その場で見えるのが一番だと思ったのでこんな感じにしてみました。
(平均とか標準偏差はまだ出してないので、図の偏差値はランダムな数値を使ってます。)

偏差値表示

なめとんさんの偏差値表示を参考にしてカラーバーをオーバーレイ?で表示しています。
50点付近が黄色で、良くなると緑、悪くなると赤方向にグラデーションします。
マウスを数値の上にもっていけばツールチップで偏差値を表示します。

ほぼイメージ通りにできたので、ちょっとうれしいですね。
偏差値を出して実装するのが楽しみです。

ただ、ここにたどり着くまでにやたらと時間がかかりました。
重ね方を知らなかったので、ネットで調べていろんな方法を試してみたんですが
サンプルではうまくいっても自分でやるとうまくいかない…

なんか、すごく時間を無駄にした感じがして癪ですが、
まぁ、HTMLとかCSSとか慣れてない作業はこんなもんでしょう(泣
せっかくなので、試行錯誤の結果の一部を記録しておきます。


失敗1
うまくいかないのは承知でとりあえずやってみましたが、やっぱりダメですね。
<div style="width:60%; background:#00FF00;"><span title="偏差値 80">0.238</span></div>
失敗1


失敗2
divとspanは左右の位置指定をしただけでは重ならずに次の行へ押し出されてしまいました。
<div style="position:relative; width:80;"><div style="width:60%; background:#00FF00;"> </div><span style="position:absolute; right:0px;" title="偏差値 80">0.238</span></div>
失敗2

成功
上下の指定も指定したらうまくいきました。
バーが左寄せで数値が右寄せなのは思ったより見た目が良くない気がしたので、
ツールでは両方右寄せにします。
<div style="position:relative; width:80;"><div style="width:60%; background:#00FF00;"> </div><span style="position:absolute; right:0px; top:0px;" title="偏差値 80">0.238</span></div>
成功

別の重ね方
ちなみに、ネットで調べたサンプルではこんな感じで重ねてました。
単純に上にずらして重ねているだけ。
コンテナ用のdivに position:relative を指定する必要はなく、
サイズを指定しなくても自動的に内容の大きさに合わせてくれます。
シンプルでいいんですが、文字の高さ分のマイナス値を指定するのが気持ち悪いので却下。
<div style="margin-top:0pt;margin-left:0pt; width:80%; background:#00FF00;"> </div><div style="margin-top:-13pt;margin-left:0pt" title="偏差値 80">0.238</div>

posted by idaten! at 13:00| Comment(4) | TrackBack(0) | 開発日記
この記事へのコメント
偏差値実装wktk
Posted by 上卓民 at 2009年11月14日 12:32
偏差値というのは特上卓内でのものなのですか?
Posted by 特スラ at 2009年11月14日 22:19
偏差値は各レベルの卓内でのものですか?
Posted by 特スラ at 2009年11月14日 22:20
>上卓民さん
先に公開機能を作っちゃいました。もうちょっと待って下さいね。

>特スラさん
そうですよ〜
全体・上級・特上・鳳凰
の4つのグループで偏差値を出せるようにしたいと思ってます。

和了率と放銃率だけちょっと集計してみたんですがこんな感じです。
・東4切断0で100戦以上した人が集計対象です。
・一つの点がその卓での一人のデータです。
・放銃率は得点を逆転させてあります。


http://sion.mokuren.ne.jp/mjprog/image/WS000008.JPG
(ちなみに私は、左から5番目位だったりします)
Posted by idaten! at 2009年11月15日 10:05
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

この記事へのトラックバックURL
http://blog.sakura.ne.jp/tb/33568944
※ブログオーナーが承認したトラックバックのみ表示されます。

この記事へのトラックバック