STEP 5：さまざまなグラフ
今回の記事では円グラフを扱ったが、さまざまな種類のグラフを手軽に実装するなら「chart.js」というライブラリーがオススメだ。このプラグインを使えば折れ線グラフ、棒グラフ、レーダーチャート、円グラフを簡単に実装でき、optionの指定でアニメーションの制御もある程度可能だ。
円グラフでの例
たとえば、シンプルな円グラフを描写するには、chart.jsを読み込み、割合と配色を指定して、canvas内に描写する、3つの手順で円グラフが完成する。
■ソースコード（HTML）
<script src="js/Chart.min.js"></script>
<canvas id="canvas" height="300" width="300"></canvas>
<script>
var pieData = [
{
value: 100,
color:'#34495E'
},
{
value : 20,
color : '#1ABC9C'
},
{
value : 20,
color : '#FF4071'
}
];
var myPie = new Chart(document.getElementById('canvas').getContext('2d')).Pie(pieData);
</script>
円グラフのオプション
chart.jsでは、アニメーションの設定や完了後の処理も指定できる。円グラフの場合は選択できるアニメーションは回転と拡大縮小のみだが、イージングやアニメーションのステップ数（スピード）は細かく変更できる。
| オプション名 | 概要 | 値 |
|---|---|---|
| segmentShowStroke | 枠線の有無 | true / false |
| segmentStrokeColor | 枠線の色 | カラーコード / rgba() |
| segmentStrokeWidth | 線幅 | number |
| animation | アニメーションの有無 | true / false |
| animationSteps | アニメーションのステップ数 | number |
| animationEasing | イージング | イージング名 |
| animateRotate | 回転アニメーション | true / false |
| animateScale | スケールアニメーション | true / false |
| onAnimationComplete | 完了後の処理 | function(){} |
■ソースコード（HTML）
<script src="js/Chart.min.js"></script>
<canvas id="canvas" height="300" width="300"></canvas>
<script>
var pieData = [
{
value: 100,
color:'#34495E'
},
{
value : 20,
color : '#1ABC9C'
},
{
value : 20,
color : '#FF4071'
}
];
var options ={
segmentShowStroke : false,
segmentStrokeColor : '#fff',
segmentStrokeWidth : 2,
animation : true,
animationSteps : 50,
animationEasing : 'easeOutCubic',
animateRotate : true,
animateScale : true,
onAnimationComplete : function(){console.log('complete');}
}
var myPie = new Chart(document.getElementById('canvas').getContext('2d')).Pie(pieData,options);
</script>
折れ線グラフでの例
折れ線グラフの場合は、各項目の名称とそれに対応した値が必要だ。線、点、点の枠線、塗りなどの色も指定できるので、バラエティに富んだグラフが描ける。
折れ線グラフのオプション
折れ線グラフのオプションには、グラフの曲線 / 直線や塗りの有無、イージングの種類など、細かい設定ができる。
| オプション名 | 概要 | 値 |
|---|---|---|
| scaleOverlay | 軸をグラフ上に被せる | true / false |
| scaleOverride | 数値の開始やステップ数を指定するかどうか | true / false |
| scaleSteps | scaleOverrideがtrueの場合、Y軸数値の表示数 | null / number |
| scaleStepWidth | scaleOverrideがtrueの場合、Y軸数値のステップする数 | null / number |
| scaleStartValue | scaleOverrideがtrueの場合、Y軸数値が開始する値 | null / number |
| scaleLineColor | 軸線の色 | カラーコード / rgba() |
| scaleLineWidth | 軸線の幅 | number |
| scaleShowLabels | 数値の表示 | true / false |
| scaleLabel | 数値の表示形式 | <%=value%> |
| scaleFontFamily | 数値のフォント | 'Arial' |
| scaleFontSize | フォントサイズ | number |
| scaleFontStyle | フォントスタイル | normal / bold 等 |
| scaleFontColor | 文字色 | カラーコード / rgba() |
| scaleShowGridLines | グリッドの表示 | true / false |
| scaleGridLineColor | グリッドの線色 | カラーコード / rgba() |
| scaleGridLineWidth | グリッドの線幅 | number |
| bezierCurve | グラフを曲線形式にするか直線形式にするか | true / false |
| pointDot | ポイントの表示 | true / false |
| pointDotRadius | ポイントの大きさ | number |
| pointDotStrokeWidth | ポイントの枠線の幅 | number |
| datasetStroke | データセットの線表示 | true / false |
| datasetStrokeWidth | データセットの線幅 | number |
| datasetFill | データセットの線の塗り | true / false |
| animation | アニメーションの有無 | true / false |
| animationSteps | アニメーションのステップ数 | number |
| animationEasing | イージング | イージング名 |
| onAnimationComplete | 完了後の処理 | function(){} |
■ソースコード（HTML）
<script src="js/Chart.min.js"></script>
<canvas id="canvas" height="300" width="400"></canvas>
<script>
var data = {
labels : ['A','B','C','D','E','F'],
datasets : [
{
fillColor :'rgba(77, 197, 235, 0.5)',
strokeColor :'rgba(54,8,63,1)',
pointColor :'rgba(54,8,63,0.5',
pointStrokeColor :'rgba(54,8,63,1)',
data : [20,40,50,60,50,80]
},
{
fillColor :'rgba(77, 197, 235, 0.5)',
strokeColor :'rgba(54,8,63,1)',
pointColor :'rgba(54,8,63,0.5',
pointStrokeColor :'rgba(54,8,63,1)',
data : [50,60,40,50,30,20]
}
]
}
var options = {
scaleOverlay : true,
scaleOverride : true,
scaleSteps : 10,
scaleStepWidth : 10,
scaleStartValue : 10,
scaleLineColor : "rgba(0,0,0,.1)",
scaleLineWidth : 1,
scaleShowLabels : true,
scaleLabel : "<%=value%> point",
scaleFontFamily : "'Arial'",
scaleFontSize : 12,
scaleFontStyle : "normal",
scaleFontColor : "#666",
scaleShowGridLines : true,
scaleGridLineColor : "rgba(0,0,0,.05)",
scaleGridLineWidth : 1,
bezierCurve : false,
pointDot : true,
pointDotRadius : 2,
pointDotStrokeWidth : 1,
datasetStroke : true,
datasetStrokeWidth : 10,
datasetFill : true,
animation : true,
animationSteps : 60,
animationEasing : "easeOutQuart",
onAnimationComplete : function(){console.log('complete');}
}
var myLine = new Chart(document.getElementById('canvas').getContext('2d')).Line(data,options);
</script>
DEMO > http://zxcvbnmnbvcxz.com/demonstration/as/004/5-3.html
対応ブラウザー：Firefox, Chrome, Safari, Opera, IE9~
他の項目に関してはChart.jsの公式ドキュメントを参照するとわかりやすいだろう。
バリエーション＆アレンジのヒント
任意のアクションを基点にグラフをアニメーションさせる方法もある。以下の例では、棒グラフの位置まで画面をスクロールすると、グラフがアニメーションしながら表示される。
<script src="js/jquery-1.10.2.min.js"></script>
<div id="header">header</div>
<script>
$(function(){
//初期設定
var barT = $('.bar').offset().top;
var winH = $(window).height();
var winT = $(window).scrollTop() + winH;
//一定以上スクロールでavtiveクラスを付与
$(window).on('scroll',function(){
var winT = $(window).scrollTop() + winH;
if(barT < winT){
$('html').addClass('avtive');
}else{
$('html').removeClass('avtive');
}
});
});
</script>
<ul class="bar">
<li><div class="bar1"><span>A</span></div></li>
<li><div class="bar2"><span>B</span></div></li>
<li><div class="bar3"><span>C</span></div></li>
<li><div class="bar4"><span>D</span></div></li>
<li><div class="bar5"><span>E</span></div></li>
</ul>
<div id="footer">footer</div>
<style>
*{margin: 0; padding: 0;}
.bar{
margin: 200px auto 240px auto;
width: 320px;
height: 400px;
border-bottom: 1px solid #eee;
}
.bar li{
list-style: none;
position: relative;
display: inline-block;
margin-right:40px;
width: 10px;
height: 100%;
}
.bar li:first-child{
margin-left:40px;
}
.bar li div{
transition:all .5s;
position: absolute;
bottom: 0;
height: 0;
width: 100%;
background: #29dbd5;
background: -moz-linear-gradient(top, #29dbd5 1%, #49315b 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#29dbd5), color-stop(100%,#49315b));
background: -webkit-linear-gradient(top, #29dbd5 1%,#49315b 100%);
background: -o-linear-gradient(top, #29dbd5 1%,#49315b 100%);
background: -ms-linear-gradient(top, #29dbd5 1%,#49315b 100%);
background: linear-gradient(to bottom, #29dbd5 1%,#49315b 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#29dbd5', endColorstr='#49315b',GradientType=0 );
}
.avtive .bar li div.bar1{height:100%;transition-delay:.1s;}
.avtive .bar li div.bar2{height:85%;transition-delay:.2s;}
.avtive .bar li div.bar3{height:90%;transition-delay:.3s;}
.avtive .bar li div.bar4{height:95%;transition-delay:.4s;}
.avtive .bar li div.bar5{height:100%;transition-delay:.5s;}
.bar li span{
font-size: 12px;
display: block;
position: absolute;
bottom: -30px;
left: 50%;
text-align: center;
width: 6em;
margin-left: -3em;
}
#header{height: 900px; line-height: 900px; background: #29CCC5; text-align: center; color: #fff; }
#footer{height: 300px; line-height: 300px; background: #27093B; text-align: center; color: #fff; }
</style>
著者：利倉健太（としくら・けんた）
1985年生まれ。株式会社レターズのデザイナー。2010年からWebデザイナーとして働き始める。Webに関する活動拠点「Stronghold」というサイトでブログを書いたり、デザインの実験をしている。
