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

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

CDNから読み込む

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」を使うための準備は整いました。

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

【Chart.js使ってみた】基本形を知る｜ LUCKLOG
https://lucklog.info/chart-js-base/
Chart.jsの基本形を使ってグラフを作ってみます。まず、使ってみることで、慣れていきましょう。