【Chart.js使ってみた】使うための準備

まず、Chart.jsを読み込みます。ファイルをダウンロードしたり、CDNから読み込んだりできます。ここではCDNの方法をご説明します。

CDNから読み込む

下記ページにアクセスします。
https://www.jsdelivr.com/package/npm/chart.js

URLの取得

https://www.jsdelivr.com/package/npm/chart.js」より引用

chart.jsの下の一覧の一番上から、読込用のURLを取得します。

「Copy to Clipboard」の下の画像をクリックすると、「Copy URL」等が表示されますので「Copy URL」をクリックします。

https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.min.js

↑こちらのURLがコピーできました。最新版の取得になるかと思いますので、数字部分(※2.8.0)は変化しますが、気にしないでください。

読み込む

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.min.js"></script>

取得したURLを読み込ませます。Chart.jsに関する処理を書く前に読み込むのであれば、head内、body内のどこでも大丈夫です。

<head>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.min.js"></script>
<script>
// Chart.jsに関する処理
</script>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.min.js"></script>
<script>
// Chart.jsに関する処理
</script>
</body>

まとめ

これで「Chart.js」を使うための準備は整いました。

それでは、実際にグラフを作ってみましょう!