忍者ブログ

2018
05
21

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

2018/05/21 (Mon.)

2011
01
05

星の度数グラフ:スターチャート ★★★

評価ポイントを表現するのに、星マーク「★」の数で表示することがあります。これをJavaScriptで実現しましょう。スターチャート(star chart)とでも呼べばいいのでしょうか。Google Visualization でいえば、Stuff Chart に似たものですが、WEB検索で簡単に見つからなかったので、自作することにしました。

仕組みは簡単です。引数で受け取った数字の数だけ、「★」を生成して、指定された要素に追加するというものです。

小数点部分については、「★」の大きさを縮小させて表現することにしました。

インプットボックスに数字を入れて、ボタンを押すと、そのだけ星マーク「★」が表示されます。



Rank:★★★


ソースコード



neta.starchart=function(r,c){
 c.innerHTML='';
 var n=Math.floor(r);
 var m=Math.floor(Math.sqrt((r-n)*10000))
 for(var i=0;i<n;i++){
  var s=document.createElement('span');
  s.innerHTML='★';
  c.appendChild(s);
 }
 if(m){
  var s=document.createElement('span');
  s.innerHTML='★';
  s.style.fontSize=m+'%';
  c.appendChild(s);
 }
}
neta.addListener(function(){
 document.getElementById('btn110105').onclick=function(){
  var v=document.getElementById('inp110105').value-0;
  neta.starchart(v,document.getElementById('c110105'))
 }
});

PR

2011/01/05 (Wed.) Trackback(0) Comment(0) JavaScript

Comments

名前
メールアドレス
URL
コメント
PASS  Vodafone絵文字 i-mode絵文字 Ezweb絵文字

Trackback

Trackback for this entry:

Links

ご注意

当サイトのスクリプトは、ブラウザが FireFox 3.0 であることを前提に作成されています。IE などでは正常に動作しないものがあります。

カテゴリー

ブログ内検索

最新記事

カレンダー

04 2018/05 06
S M T W T F S
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31

アーカイブ

RSS

最新CM

[04/15 jTemplate]
[05/22 寝太郎]

プロフィール

HN:
寝太郎
性別:
非公開

バーコード

P R

アクセス解析

リンク

NSM

コガネモチ

フリーエリア