chart.jsとinview.jsを使ったグラフの作り方

inview.jsとchart.jsの組み合わせで、セクションが画面に表示された時にアニメーション効果付きでグラフが表示されます。

動作のサンプル

比較的軽めなので、文字ばっかりのページになりがちなIRページやリクルートサイトの会社情報ページなどのちょっとした装飾に使えるので便利。

取りあえずはよく使うパイチャート(円グラフ)と棒グラフを作る場合は下記のスクリプトをコピペして下さい。

chart.jsとinview.jsを使った円グラフの作り方

準備 jqueryを読み込みます

お好みのjqueryを読み込んで下さい。(バージョンは1系が安定している気がします)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" ></script>

ステップ1 inview.jsをダウンロードして読み込みます

<script src="inview.js" ></script>

ステップ2 次にこちらのchart.jsをダウンロードして同じ様に読み込みます

<script src="chart.js" ></script>

ステップ3 円グラフを表示させたい箇所に<canvas>を記述します。IDを忘れずに。

<canvas id="chart_doughnut"></canvas>

ステップ4 円グラフを描写させるjavascriptを記述します

<script>
//円グラフ
$(function() {
$('#chart_doughnut').on('inview', function(event, isInView, visiblePartX, visiblePartY) {
if (isInView) {
var ctx = document.getElementById("chart_doughnut");
var myChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ['東北 11%','北関東 16%','東京 14%','中部 12%','近畿 15%','四国 6%','中国 11%','九州 15%'],
datasets: [{
label: '年齢分布',
data: [11, 16, 14, 12, 15, 6, 11, 15 ],
backgroundColor: [
'#000057',
'#191967',
'#333379',
'#4c4c89',
'#66669a',
'#7f7fab',
'#9999bc',
'#b2b2cc'
],
}]
},
options: {
tooltips:{
enabled: true
}
}
});
}
});
});
</script>

上記のスクリプトの中の「labels」「data」「backgroundColor」をそれぞれ変更して終わりです。

「labels」「data」「backgroundColor」は、それぞれ数があっていないとうまく動かないので注意。

「data」も総数を100にする必要があるので注意して下さいね。

因みに「tooltips」をfalseにすると、円グラフの上にマウスオーバーしてもテキストが表示されなくなります。

inview.jsを使った棒グラフの作り方

こちらはchart.jsは必要なし。下記のスクリプトをコピペして使って下さい。

準備 jqueryを読み込みます

お好みのjqueryを読み込んで下さい。(バージョンは1系が安定している気がします)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" ></script>

ステップ1 棒グラフを表示させたい箇所に下記のhtmlを記述します。クラス名・IDを忘れずに。

「bograph1」の「data-width」の数字が右側の長さになります

<div class="bograph">
<div class="lefttext" id="lefttext1"></div>
<div id="bograph1" class="bograph_inner" data-width="47">
<div class="righttext" id="righttext1"></div>
</div>

ステップ2 cssを記述します

<style>
.bograph { width: 100%; height: 60px; background-color: #000057; position: relative; }
.lefttext, .righttext { position: absolute; bottom: -26px; font-size: 12px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }
#bograph1 { background-color: #d03d42; }
.bograph_inner { height: 60px; position: absolute; right: 0; text-align: left; top: 0; width: 100%; }
.righttext { right: 0; }
</style>

ステップ3 アニメーション用のjqueryを記述します

<script>
//棒グラフ
$(function () {
$('#bograph1').on('inview', function(event, isInView, visiblePartX, visiblePartY) {
if (isInView) {
var w = $('#bograph1').attr('data-width') + '%';
$('#bograph1').animate({
width: w
},1000,function(){
var r_txt = $('#bograph1').attr('data-width');
var l_txt = 100 - r_txt;
$("#lefttext1").html("男性:" + l_txt + "%");
$("#righttext1").html("女性:" + r_txt + "%");
});
}else{
$('#bograph1').css("width","100%");
$("#lefttext1").html("");
$("#righttext1").html("");
}
});
});
</script>

以上です。

有限会社インセンス 神保部長

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

コメントする