コピペで簡単！Chart.jsで魅力的な棒グラフを描こう

はじめに
チャートの設定方法
- グラフの種類
棒グラフ
グラフが表示されない時

はじめに

データを視覚的に表現したいとき、グラフ描画は格好の方法です。この記事では、簡単にChart.jsを使って棒グラフを描く方法を解説します。

コピペで使えるコードも紹介し、初心者でも簡単に実装できるポイントを説明します。また、カスタマイズや応用例も紹介しますので、幅広く棒グラフを活用できるようになります。

「Chart.js」では、棒グラフや円グラフ、折れ線グラフ、レイダーチャートなど多彩なグラフを好きな色に設定して表示する事が出来ます。
それらを組み合わせた混合チャートも可能です。

様々なグラフのサンプルは公式サイトで見る事が出来ます。

Chart.js（公式サイト）
Chart.js ドキュメント

チャートの設定方法

type：描画するグラフの種類
data：ラベルとデータセット
options：オプション設定

グラフの種類は「type」で指定します。

グラフの種類

それぞれの詳細な使い方記事は、以下の表内リンクからご覧ください。

type	表示サンプル	type	表示サンプル
radar レーダーチャート詳細		line 折れ線グラフ詳細
bar 棒グラフ詳細		pie 円グラフ詳細
polarArea ポーラーチャート詳細		doughnut ドーナツチャート詳細
bar、line 複合グラフ詳細
scatter 散布図		bubble バブルチャート

棒グラフ

棒グラフ　は、type: ‘bar’　です。

実際の流れ

手順

STEP1
JS読み込み
Chart.jsを読み込むコードを記述（１行のみ）
STEP2
コード編集
JavaScriptを記述（データやデザイン設定）
STEP3
表示コード
HTMLを記述（１行のみのグラフ表示用タグ）

1.Chart.jsを読み込む

Chart.jsを読み込むコードを記載します。

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>

コードの記述場所について

サイト内の複数ページでグラフ表示をする場合はサイト全体のヘッダー内でもOKですし、特定ページでのみグラフ表示をする場合はそのページの<head>や<body>でもOKです。

例：Cocoonの場合

サイト全体で利用の場合は以下のいずれか（「head-insert.php」推奨）

特定ページのみでしか利用せず、そのページでのみ読み込みたい場合は、以下の記事で「Chart.js」を読み込むページごとや、複数ページの指定方法などを解説していますので、参考にして下さい。

JavascriptやCSSを特定ページのみで読み込ませる

サイト全体で使うもの以外は、使うページのみで読み込ませる方が無駄がなく便利です。当サイトでは、グラフを使った解説ページがいくつかある為、その記事のみで読み込ませるようにしています。サンプルはグラフ表示のJavaScriptファイル「Ch...

2.JavaScriptを記述

コードの記述場所について

表示したいページに記述します。

例：Cocoonの場合

グラフを表示するページの編集画面下にある「カスタムJavaScript」

注意点

テーマの仕様によって、記載しているコードの<script></script>タグは、不要な場合もあります。たとえば、WordPressでJavaScriptを記述するエリアがあり、そこに記述する場合は不要。（Cocoonの記事内「カスタムJavaScript」などでも不要）

コードと表示サンプル

コードを表示

<script>
  var ctx = document.getElementById("myBarChart");
  var myBarChart = new Chart(ctx, {
    type: 'bar',
    data: {
     //凡例のラベル
      labels: ['1月', '2月', '3月', '4月', '5月'],
      datasets: [
        {
          label: '訪問者数', //データ項目のラベル
          data: [120,140,180,150,210], //グラフのデータ
          backgroundColor: "rgba(200,112,126,0.5)"
        },{
          label: 'PV数', //データ項目のラベル
          data: [190,230,380,320,480], //グラフのデータ
          backgroundColor: "rgba(80,126,164,0.5)"
        },{
          label: 'セッション数' //データ項目のラベル
          data: [160,180,220,190,300], //グラフのデータ
          backgroundColor: "rgba(230,180,34,0.5)"
        }
      ]
    },
    options: {
      title: {
        display: true,
        //グラフタイトル
        text: 'Aサイト分析'
      },
      scales: {
        yAxes: [{
          ticks: {
            suggestedMax: 250, //最大値
            suggestedMin: 0, //最小値
            stepSize: 50, //縦ラベルの数値単位
            }
        }]
      },
    }
  });
</script>

簡単解説

chart.js　Bar（棒グラフ）解説 ※外部リンク

１行目で記述している「myBarChart」は、任意の名称です。

同一ページ内に複数のグラフを表示する際には、この名称をそれぞれに設定します。

例：棒グラフを２つ表示

myBarChart1

myBarChart2

データ項目ラベル

//データ項目のラベル
labels: ['1月', '2月', '3月', '4月', '5月']

設定した項目は、グラフ下部に設定順に左側から表示されます。

項目数はいくつでもOKです。増やした場合は、データ内容も同数にする事をお忘れなく！

チャートの対象ラベル

label: '訪問者数', //データ項目のラベル
・・
label: 'PV数', //データ項目のラベル
・・
label: 'セッション数' //データ項目のラベル

色分けしたバーの項目名を表示するラベルです。

１つしか表示しない場合（サンプルであれば、たとえば「訪問者数」のみのグラフ）は、要らない気もしますが、何も設定をしなくても四角い枠は出てしまうので、何かしら設定した方が良さそう。

色の設定について

それぞれの色指定は、透過割合を指定出来るRGBAで指定しています。

もちろん透過が必要なければ１６進コードでの指定も可能。

RGBAについては以下をご覧ください。

RGBAって？CSS3で任意の色を透明度と一緒に設定する方法

RGBAとは RGBAは、CSS3から追加されたプロパティで、「色と同時に透明度」を指定できます。通常カラーコードは２種類のコードで指定できます。１６進コード（#xxxxxx） RGB（xxx(赤),xxx(緑),xxx(青)） RGB...

グラフデータ

実際の数値を設定します。

data: [120,140,180,150,210], //グラフのデータ

複数項目あれば、複数個所を設定します。サンプルの例では３か所。

オプション

グラフ上に表示するテキスト（グラフタイトル）と、チャートの最小値、最大値、単位を設定します。

options: {
title: {
display: true,
//グラフタイトル
text: 'Aサイト分析'
},
scales: {
yAxes: [{
ticks: {
suggestedMax: 250, //最大値
suggestedMin: 0, //最小値
stepSize: 50, //縦ラベルの数値単位
}
}]
},
}