【Chart.js】アニメーションのタイミングをスクロール時にする例

「Chart.js」は、Webサイト上でチャート・グラフを表示するこができるJavaScriptのライブラリ。

そのChart.jsでは基本的にページが読み込まれたタイミングで、チャートの描画アニメーションを行いますが、今回は、そのアニメーションのタイミングを、チャートが表示される位置までスクロールされた際にするjQueryの例となります。

チャートが表示される位置までスクロールされた際に、アニメーションを実行する例

例では、jQueryとChart.jsのライブラリはすでに読み込んでいる前提としています。

チャートを表示させるHTML要素を記述

以下はチャートを表示させるHTML要素となり、チャートを表示させたい箇所に記述します。

<canvas id="my-chart"></canvas>

jQueryのコードを記述

以下はjQueryのコードとなり、チャートの設定とチャートが表示される位置までスクロールされた際に、描画アニメーションを実行します。

また、jQueryのコードは、jQueryとChart.jsのライブラリを読み込んだ後に、実行される箇所に記述します。

jQuery(function($){	
	// チャートのデータ名を指定
	var myLabels = [
		"Red","Green","Blue"
	];

	var myDatasets = [{
		// チャートのデータ背景色を指定
		backgroundColor: [
			"#ff0000", "#00ff00", "#0000ff"
		],
		// チャートのデータ値を指定
		data: [
			8, 12, 5
		]
	}];

	// チャートの設定
	var config = {
		type: 'pie',
		data: {
			labels: myLabels,
			datasets: myDatasets
		}
	};

	// チャートを表示する要素がウィンドウ内にあるかを判断する関数を定義
	function conditional(id){
		// ウィンドウ上端の位置を取得
		var docTop = $(window).scrollTop();
		// ウィンドウ下端の位置を取得
		var docBottom = docTop + $(window).height();
		// チャート上端の位置を取得
		var elemTop = $(id).offset().top;
		// チャート下端の位置を取得
		var elemBottom = elemTop + $(id).height();
		// 「チャートを表示する要素がウィンドウ内にある場合に真となる式」を返す
		return (elemTop <= docBottom) && (docTop <= elemBottom);
	}
	
	// チャートが描画されているかを判断する変数
	var draw = false;
	
	// スクロール時に描画アニメーションの実行を判断
	$(window).on('scroll', function() {
		if(conditional("#my-chart")){ // チャートがウィンドウ内にある場合
			if(!draw){ // チャートが描画されていない場合
				// チャートのアニメーションを実行
				var ctx = document.getElementById("my-chart");
				var myChart = new Chart(ctx, config);
				draw = true;
			}
		}else{ // チャートがウィンドウ外にある場合
			draw = false;
		}
	});
});

jQueryのソースコードの説明

以下は、チャートが表示される位置までスクロールされた際に、アニメーションを実行する箇所のjQueryの説明となります。

チャートを表示する要素がウィンドウ内にあるかを判断する関数を定義

まずは、チャートを表示する要素がウィンドウ内にあるかを判断する関数を定義します。例のコードでは27行目からの以下の箇所となります。

// チャートを表示する要素がウィンドウ内にあるかを判断する関数を定義
function conditional(id){
	// ウィンドウ上端の位置を取得
	var docTop = $(window).scrollTop();
	// ウィンドウ下端の位置を取得
	var docBottom = docTop + $(window).height();
	// チャート上端の位置を取得
	var elemTop = $(id).offset().top;
	// チャート下端の位置を取得
	var elemBottom = elemTop + $(id).height();
	// 「チャートを表示する要素がウィンドウ内にある場合に真となる式」を返す
	return (elemTop <= docBottom) && (docTop <= elemBottom);
}

上記の関数conditionalでは、ページ内の４箇所の位置情報を取得します。また、引数にはチャートを表示させる要素を指定します。

• ウィンドウ上端の位置情報（変数docTop）
• ウィンドウ下端の位置情報（変数docBottom）
• チャート上端の位置情報（変数elemTop）
• チャート下端の位置情報（変数elemBottom）

そして、取得した位置情報を使い、「チャートを表示する要素がウィンドウ内にある場合に真となる式」を返します。

アニメーションの実行を判断する変数を定義

次に、ウィンドウ画面内に表示されたチャートが何度もアニメーションしてしまうことを防ぐために、チャートが描画されているかを判断する変数のdrawを定義します。

例のコードでは41行目からの以下の箇所となります。

// チャートが描画されているかを判断する変数
var draw = false;

スクロール時に描画アニメーションの実行を判断

そして、スクロール時にチャートの描画アニメーションの実行を判断する関数を定義します。例のコードでは44行目からの以下の箇所となります。

// スクロール時に描画アニメーションの実行を判断
$(window).on('scroll', function() {
	if(conditional("#my-chart")){ // チャートを表示する要素がウィンドウ内にある場合
		if(!draw){ // チャートが描画されていない場合
			// チャートのアニメーションを実行
			var ctx = document.getElementById("my-chart");
			var myChart = new Chart(ctx, config);
			draw = true;
		}
	}else{ // チャートがウィンドウ外にある場合
		draw = false;
	}
});

上記の箇所では、スクロール時にチャートの位置や表示状態によって、描画アニメーションを実行を判断します。

最初のif文では、定義conditional関数でチャートを表示する要素がウィンドウ内にあるかを判断しています。

チャートを表示する要素がウィンドウ内にある場合は、入れ子となる次のif文で、変数drawを利用しチャートが描画されているかを判断しています。

チャートが描画されていない場合は、チャートを描画し変数drawにtrueをセットし、チャートが描画されている場合は、何も処理は行いません。

また、チャートを表示する要素がウィンドウ外に出た場合には、変数drawをfalseにセットします。

それにより、スクロールしても表示されたチャートが一度がウィンドウ外に出て、チャートが表示されなくなるまでは描画アニメーションを再実行しなくなります。