このページの本文へ

動くインフォグラフィックでサイトを楽しくするアイデア (3/3)

2014年06月25日 11時00分更新

文●利倉健太/Stronghold

  • この記事をはてなブックマークに追加
本文印刷

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>

DEMO > http://zxcvbnmnbvcxz.com/demonstration/as/004/6.html

著者:利倉健太(としくら・けんた)

著者写真

1985年生まれ。株式会社レターズのデザイナー。2010年からWebデザイナーとして働き始める。Webに関する活動拠点「Stronghold」というサイトでブログを書いたり、デザインの実験をしている。

前へ 1 2 3 次へ

この連載の記事

一覧へ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く