今回はcssを使ったお話。チャート画面を作りたいときにとっても便利なのがchart.jsです。chart.jsを使えば、とっても簡単にグラフやドーナッツチャートを生成することができます。
でもchart.jsでは作れないものもあります。そのうちの一つがピラミッドチャート（勝手に名付けた）。
ピラミッドチャートとは下のような全体の順位の割合や自分の位置が視覚的に見えるような図形のこと。
今回はこれをcssを使って描写する方法を解説します。
ピラミッドチャートは台形を組み合わせる
上のようなピラミッドをcssで描くには、色分けされているので単に３角形を書けばいいというわけにもいきません。jsのcanvas要素を使えば書くこともできそうですが、今回はcssで台形を描写し、それを組み合わせて三角形にしていきます。
・html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ピラミッドチャート</title>
</head>
<body>
<div class="pyramid"></div>
<div class="pyramid">
<div class="pyramid_percent_num">
</div>
</div>
<div class="pyramid">
<div class="pyramid_percent_num">
</div>
</div>
<div class="pyramid">
<div class="pyramid_percent_num">
</div>
</div>
<div class="pyramid">
<div class="pyramid_percent_num">
</div>
</div>
<div class="pyramid">
<div class="pyramid_percent_num">
</div>
</div>
<div class="pyramid">
<div class="pyramid_percent_num">
</div>
</div>
</body>
</html>
・css
.pyramid{
margin: auto;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
text-align: center;
}
.pyramid_percent_num{
margin: auto;
margin-top: -17px;
border-bottom: 1px solid #777;
text-align: right;
color: #777;
}
・javascript(jQueryも使ってます)
window.onload = function(){
//ピラミッドの数値反映
var pyramid_percent=[3,10,20,40,80,100];//階層のパーセンテージ
var pyramid_width=new Array(6);//width
var pyramid_height=new Array(6);//border-bottom
var pyramid_side_border=new Array(6);//right,left-border
var pyramid_class=document.getElementsByClassName("pyramid");
var pyramid_percent_num=document.getElementsByClassName("pyramid_percent_num");
pyramid_class[6].style.width=280+"px";//一番下の幅
for(var i=0;i<=5;i++){ if(i>0){
pyramid_height[i]=Math.round((pyramid_percent[i]-pyramid_percent[i-1])*3);
pyramid_width[i]=pyramid_width[i-1]+(2*pyramid_side_border[i-1]);
}else{
pyramid_width[i]=0;
pyramid_height[i]=pyramid_percent[i]*3;
}
pyramid_side_border[i]=Math.round(pyramid_height[i]*Math.atan(0.5));
}
for(var j=0;j<=5;j++){
pyramid_class[j].style.width=pyramid_width[j]+"px";
switch (j) {
case 0:
pyramid_class[j].style.borderBottom=pyramid_height[j]+"px solid red";
break;
case 1:
pyramid_class[j].style.borderBottom=pyramid_height[j]+"px solid green";
break;
case 2:
pyramid_class[j].style.borderBottom=pyramid_height[j]+"px solid orange";
break;
case 3:
pyramid_class[j].style.borderBottom=pyramid_height[j]+"px solid purple";
break;
case 4:
pyramid_class[j].style.borderBottom=pyramid_height[j]+"px solid blue";
break;
case 5:
pyramid_class[j].style.borderBottom=pyramid_height[j]+"px solid black";
break;
}
pyramid_class[j].style.borderLeft=pyramid_side_border[j]+"px solid transparent";
pyramid_class[j].style.borderRight=pyramid_side_border[j]+"px solid transparent";
$('.pyramid_percent_num').eq(j).prepend(pyramid_percent[j]+"%");//ピラミッドのパーセントを表示
$('.pyramid_percent_num').eq(j).width(pyramid_width[j]+(2*pyramid_side_border[j])+100);//ピラミッドのパーセントの下の線を表示
}
}
jsの中身の数値を変化させることで、ピラミッドの階層のパーセンテージも変化します。ピラミッドチャートを作りたいときに是非利用してみてください。
台形はcssのborderを使って描写しています。横幅などはすべてjsで動的に変化させていますので汎用性が高いように設計してあります。