Blogブログ

TORAT | 2019.12.12

Chart.jsのグラフを画面に表示されたときに起動させる方法

JavaScript
コピペ

Chart.jsはグラフを作成する便利なプラグイン

Chart.jsを使用すれば円グラフや棒グラフなど各種グラフをキレイに作成することができます。
簡単に導入できるため、利用している方も多いのではないでしょうか

しかし、デフォルトではページを読み込んだ際にグラフも同時に読み込まれてしまいます。

スクロールしていき、グラフが見えるタイミイングで起動できるとキレイなアニメーションを見せることができます。

デモはこちら

まずはグラフを表示させる

それでは「Chart.js」を使ってグラフを表示させていきましょう。

導入方法はとても簡単で、Chart.jsのスクリプトを読み込むことと、HTMLにcanvasを用意することのたった2ステップです。

HTMLの記述

「Chart.js」を使用するには、HTMLでスクリプトを読み込む必要があります。公式サイトからCDNが提供されているのでHTMLのソースに追加します。

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.js"></script>

あるいは公式サイトからGitHubページへ飛び、ファイルをダウンロードします。解答後、「Chart.js」もしくは「Chart.min.js」(圧縮版)をプロジェクトに設置することでも使用可能です。

HTMLでは”canvas”タグを用意しidを付けるだけでOKです。

<canvas id="chart1"></canvas>

CSSは特に記述はありません。

あとは、JavaScriptでグラフを作っていきます。

JavaScriptの記述

まずは変数を作り、HTMLで設定したcanvas要素のIDを取得し、代入します。

//idを取得し変数に代入
var chartEl1 = document.getElementById("chart1");

“new Chart()”を使って、グラフを描画します。

“ctx.canvas.height”はチャートの大きさを調整しています。

そしてこれらの処理をまとめた関数を変数に代入しておきます。

//チャート処理の関数
var chartFunc1 = function() {
    var ctx = chartEl1.getContext('2d');
      ctx.canvas.height = 200;
　chart = new Chart(ctx, {
　　type: 'グラフの種類',
　　data: 'グラフのデータ',
　　option: 'オプション設定'
　}
}

スクロールで表示させる

var wy = window.pageYOffset;
var wb = wy + screen.height; // スクリーンの最下部位置を取得
var wb = wy + window.innerHeight; // ブラウザの最下部位置を取得

”screen.height”でスクリーンの高さを取得します。

下記のCODE PEN上では”window.innerHeigh”でブラウザの高さを取得しています。

 // チャートの位置を取得
var chartElPos1 = wy + chartEl1.getBoundingClientRect().top;

// チャートの位置がウィンドウの最下部位置を超えたら起動
if ( wb > chartElPos1 && chartFlag1 == false ) {
     関数();
     chartFlag1 = true;
    }

window.addEventListener('load', 関数); // 読み込み時の処理
window.addEventListener('scroll', 関数); // スクロール時の処理

そして各チャートの位置を取得し”addEventListener(‘scroll’, 関数)”でスクロール位置がグラフの位置に達したときに処理を実行します。