アンディJavaScriptChart.jsはグラフを作成する便利なプラグインChart.jsを使用すれば円グラフや棒グラフなど各種グラフをキレイに作成することができます。簡単に導入できるため、利用している方も多いのではないでしょうかしかし、デフォルトではページを読み込んだ際にグラフも同時に読み込まれてしまいます。スクロールしていき、グラフが見えるタイミイングで起動できるとキレイなアニメーションを見せることができます。デモはこちらまずはグラフを表示させるそれでは「Chart.js」を使ってグラフを表示させていきましょう。導入方法はとても簡単で、Chart.jsのスクリプトを読み込むことと、HTMLにcanvasを用意することのたった2ステップです。「Chart.js」を使用するには、HTMLでスクリプトを読み込む必要があります。公式サイトからCDNが提供されているのでHTMLのソースに追加します。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です。id="chart1"></canvas>CSSは特に記述はありません。あとは、JavaScriptでグラフを作っていきます。JavaScriptの記述まずは変数を作り、HTMLで設定したcanvas要素のIDを取得し、代入します。Chart()”を使って、グラフを描画します。“ctx.canvas.height”はチャートの大きさを調整しています。これらの処理をまとめた関数を変数に代入しておきます。ブラウザの最下部位置を取得”screen.height”でスクリーンの高さを取得します。PEN上では”window.innerHeigh”でブラウザの高さを取得しています。関数)”でスクロール位置がグラフの位置に達したときに処理を実行します。スクロールで表示させるグラフのサンプル円グラフと棒グラフがそれぞれ画面に表示されたときにアニメーションを起動させるサンプルを用意しました。スクロールしてみてください。CodePen.Chart.jsを使うと簡単にキレイなグラフを作成できます。様々な種類のグラフを書いたり、細かなカスタマイズも可能です。キレイなアニメーションもデフォルトで実装されているので、ぜひ試してみてください。採用情報プライバシーポリシーお問い合わせお問い合わせはこちら制作の流れホームページ制作・ショッピングサイト制作・Webデザイン制作・Webシステム開発。