星の度数グラフ：スターチャート　★★★　寝太郎の江戸風呂。ね！

2025
12
05

[PR]

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

2025/12/05 (Fri.)

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'))
 }
});

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

Comments