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

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

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

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

例では、jQueryファイルとChart.jsファイルが読み込まれている前提としています。

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

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

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

スクリプトを記述

以下のソースコードは、チャートの設定情報とチャートが表示される位置までスクロールされた際に、描画アニメーションを実行させるスクリプトとなり、読み込んでいるJavaScriptの外部ファイルに記述します。

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('load 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;
		}
	});
});

ソースコードのポイントの説明

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

「チャートがウィンドウ内にある場合に真となる条件式」を返す関数を作成

まずは、チャートを表示させる要素のidを引数に指定すると、「チャートがウィンドウ内にある場合に真となる条件式」を返す関数を作成します。例のソースコードでは以下の箇所となります。

例のソースコード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）

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

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

次に、画面に表示されたチャートが何度もアニメーションしてしまうことを防ぐために、アニメーションの実行を判断する変数を定義します。例のソースコードでは以下の箇所となります。

例のソースコード41行目の箇所

// アニメーションの実行を判断する変数を定義
var draw = false;

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

最後に、スクロールする際、チャートの描画アニメーションの実行を判断します。例のソースコードでは以下の箇所となります。

例のソースコード44行目からの箇所

// スクロール時に描画アニメーションの実行を判断
$(window).on('load 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を使い「チャートがウィンドウ内にある場合」を判断します。関数の引数にはチャートを表示させる要素のidを指定します。今回の例では、"#my-chart"となります。

外側のif文が真の場合に、ネストされた内側のif文で、定義した変数drawを使い「チャートのアニメーションが実行されていない場合」を判断します。

そして、内側のif文が真の場合に、チャートの描画アニメーションを実行し変数drawをtrueにセットします。それにより、表示されたチャートが一度がウィンドウ外に出て、チャートが表示されなくなるまでは描画アニメーションは実行されません。

チャートがウィンドウ外に出て、チャートが表示されなくなると外側のif文が偽となり、変数drawをfalseがセットされます。

それにより、もう一度、チャートがウィンドウ内に表示され、外側のif文が真となるとアニメーションが再度、実行されます。