コピペでできるChart.jsの使い方(最低限の実装)

ホームページにグラフを描きたいなと思って、ちょっと検索してみたら意外と簡単な方法で実現できたのでご紹介。

Chart.jsという便利なライブラリーがあり、これを使えば簡単にブラフを描く事ができます。
HTML5から採用になったcanvasタグを使ったライブラリーのようです。

コピペ用コード

下記がサンプルコード
コピペするだけでサンプルグラフが表示されます。

オリジナルのグラフを表示するための詳しい方法は以下をご覧ください。

Chart.jsの使い方

Chart.jsの読み込み

まずChart.js(ライブラリー本体)を読み込みます。
ダウンロードしてからそのファイルを読み込むこともできますが、今回は、CDN(サーバから読み込む形)でやってみます。

HTMLheadタグ内に下記のコードを入れる。

canvasタグの挿入

グラフを挿入したい部分に下記のようにcanvasタグを挿入します。

グラフデータの設定

あとは、描きたいグラフのデータをChart.jsに渡してやるだけで完成です。

データを渡すには、下記のようなコードを使って行います。なんだか難しいコードが書かれていますが、下記のコードをコピペして必要な部分を書き換えればOK!

とりあえず全部コピーしてbodyタグ内の1番下辺りに貼り付けてみてください。どうですか?もうグラフが描けちゃえましたね!

あとは必要な部分を書き換えていきます。

type:

まずtype: 'bar',の部分。これはグラフの種類を指定しています。
グラフのタイプは、棒グラフの他に円グラフや折れ線グラフなどいろいろ用意されています。

グラフのタイプ
折れ線グラフ line
棒グラフ bar
レーダーチャート radar
円グラフ pie
極地チャート polarArea
バブルチャート bubble
散布図 scatter

ドーナツグラフは円グラフのオプションで設定します。

公式サイトにグラフのサンプル一覧があります。
https://www.chartjs.org/samples/latest/

data:

次に、data: {の部分ではグラフのデータを指定しています。

labels: グラフの項目名をカンマで区切って入れていきます
datasets: 実際のグラフデータ
label: グラフ名
data: 各項目の数値
backgroundColor: グラフの色
borderColor: グラフの枠の色

options:

最後に、options: {}の部分で各種オプションを指定できます。
オプションでは、グラフの仕様を細かく変更したり指定できる項目がたくさん用意されています。

詳細については公式サイトをご覧ください。
https://www.chartjs.org/docs/latest/

スマホでの表示について

デフォルトの設定ではアスペクト比を維持するようになっているため、スマホで表示した時に思った通りのグラフが描けない場合があります。そんな時は、グラフ全体の縦横を指定にして、さらにオプションでアスペクト比を維持しない設定にしてあげます。

グラフ全体の縦横サイズ指定

canvasタグ挿入部分で、canvasタグを下記のようにdivタグで囲いスタイル指定します。

positionrelativeを、
widthheightはピクセル指定または%指定ができます。

アスペクト比の維持を解除

先程のオプション指定部分に下記のように書き込みます。