Blog スタッフブログ

2022.08.27

JavaScript WEB制作

Chart.jsを画面スクロールした時に描画する方法

WEB制作担当の木戸です。

Chart.jsの描画アニメーションのタイミングを変更する方法をご紹介します。

「Chart.js」を普通に実装するとアニメーションはページを読みに合わせて描画されるためファーストビューの外のグラフのアニメーションを見ることができません。

そこで、グラフの設定を行ったjsに手を加えます。

事前に「Chart.js」の必要なファイルの読み込みをおこないます。

https://www.chartjs.org/

設定方法

手順.1

htmlファイルにcanvasタグで描画するブロックを用意します。

<canvas id="graph_name">
</canvas>

手順.2

適当な名前のjsファイルを作成してそちらに記述します。

canvasのidを指定し、後ほど使用するフラグを設置絵します。

var chart = document.getElementById("graph_name"); //canvasに設定したidを指定
var chart_flag = false; //フラグを設定

手順.3

グラフの描画設定を行います。

例としてドーナツ型グラフを使用していますが、他のタイプのグラフでも問題ありません。

オプションの設定は公式サイトをご覧ください。

//グラフの描画設定
var chartItem = function() { 
    var context = chart.getContext('2d');  
    chart = new Chart(context, {
    type: 'doughnut',
    data: {
      labels: ["ラベル1", "ラベル2"],
      datasets: [{
        borderWidth: 0,
        backgroundColor: ["#000000", "#ffffff"],
        data: [70, 30]
      }]
    },
    options: {
      responsive: true,
      cutout: '75%',
    }
    });
};

手順.4

画面の高さから画面上からのコンテンツまでの距離と画面の高さを引いて0になったら描画されます。

描画されたタイミングでchart_flagがtrueになります。

//グラフの描画タイミング
var chartTiming = function() {
    var target = $(chart).offset().top; //画面上からのコンテンツまでの距離
    var scroll = $(window).scrollTop();　//スクロール量を取得
    var height = $(window).height();　//画面の高さを取得
    
    if ( scroll > target - height && chart_flag == false ) {            
      chartItem();       
      chart_flag = true;      
    }
};
window.addEventListener('load', chartTiming); 
window.addEventListener('scroll', chartTiming);

もし、画面下から100pxの位置で実行したい場合は、