【初心者向け・使い方解説】Chart.jsでCanvasにグラフを生成したら、めちゃラクだった件

2019年6月8日

企業サイトのなどで「業績の推移」や「環境問題対策の変化」など、テーブルで組んだ表組みではなく、「棒グラフ」や「円グラフ」「折れ線グラフ」を使用したいことがあると思います。

ひと昔（大昔？）前は、画像でグラフを作成し、imgタグで貼り付けるくらいしか掲載方法がありませんでした。
でもメンテナンス性が悪く、編集の度に画像データを引っ張り出してデータを追加することをしてきました。
凄い無駄な作業が多い上に、精密性が求められるので、あまり好きな作業ではありませんでした。

数年前から「jsとcanvasでグラフ作れるよ」という事実は知っていたのですが、レガシーブラウザーへの対応やクライアントの希望により、二の足を踏んでいたのですが、今回やっと仕事でChart.jsを採用することが出来ました。

いざ導入してみたら、導入も簡単！メンテナンスも楽チン！ということで凄く感動したので、作業手順を簡単にまとめます。

Chart.jsの導入方法

CDNの挿入

グラフを掲載したいHTMLファイルに、以下のコードを挿入します。
Chart.jsはCDN（Content Delivery Network）により提供されています。読み込み速度が自前のサーバに格納するよりもCDNの方が早いので、そちらを使用しましょう。

<head>タグ内に以下を記載
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.css”>
</body>タグの直前に以下を記載
<script src=”https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js”></script>

HTMLタグにcanvasタグを記載

HTMLファイルのグラフを掲載したい場所に、<canvas></canvas>を挿入しましょう。
その際、<canvas></canvas>にid=””と、横幅（width）と高さ（height）を設定してください。

<canvas id=“graph “ width=”500″ height=”500″></canvas>

生成したいグラフの情報をJSに記載

Chart.jsでは様々なグラフを生成可能ですが、今回のサンプルは円グラフ（ドーナッツ型）を生成するコードになります。
以下のコードをHTMLのheaderタグに記載するだけで、円グラフ（ドーナッツ型）の生成が可能です。

var data = {
labels: [
//グラフの各項目名
“Red”,
“Blue”,
“Yellow”,
“Green”,
“Orange”,
“Pink”
],
datasets: [
{

data: [//グラフの各種数値20000, 5000, 10000, 15000, 10000, 20],
backgroundColor: [
//各項目の色
“#FF6384”,
“#36A2EB”,
“#FFCE56”,
“#339900”,
“#ff6633”,
“#cc0099”
],
hoverBackgroundColor: [
//マウスを重ねた時の色
“#FF6384”,
“#36A2EB”,
“#FFCE56”,
“#339900”,
“#ff6633”,
“#cc0099”
]
}]
};

var doughnutData = {
//グラフのタイプ（ここではドーナッツ型）
type: ‘doughnut’,
data: data,
options: {
legend: {
position: “bottom”,
onClick: function(event, legendItem) {}
},
tooltips: {//ツールチップの有無（ここでは無し）
enabled: false
}
}
};