コピペで!「Chart.js」を使って棒グラフを表示する

2020-05-13Otherプラグイン不要

軽量で簡単に実装できる「Chart.js」を使った棒グラフの表示方法についてです。

棒グラフサンプル

 

 

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

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

Chart.js(公式サイト)
Chart.js ドキュメント

 

チャートの設定方法

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

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

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

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

棒+折れ線の複合チャート の 詳細はこちら

 

グラフの表示サンプル実際のホバーアクションなどは以下をご覧ください。

 

 

棒グラフ

今回は、棒グラフ type: 'bar’ の実装方法です。

コピペで使って頂けるようにコードを紹介します。

 

手順

  • Chart.jsを読み込むコードを記述(1行のみ<head>または<body>内に)
  • JavaScriptを記述(データやデザイン設定)
  • HTMLを記述(1行のみのグラフ表示用タグ)

これだけです!

では順番に・・

Chart.jsを読み込む

サイト内の色々なページでグラフ表示する

サイトの<head>~</head>内

特定のページのみでしか利用しない場合

そのページの<body>内でもOK

 

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

 

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(棒グラフ)解説 ※外部リンク

 

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

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

例:棒グラフを2つ表示

myBarChart1

myBarChart2

 

データ項目ラベル

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

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

棒グラフサンプル

 

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

 

チャートの対象ラベル

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

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

棒グラフサンプル

 

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

 

色の設定について

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

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

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

 

 

グラフデータ

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

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

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

 

 

オプション

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

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

 

HTMLを記述

表示したい場所に記述します。
<canvas id="myBarChart">
</canvas>

注意点
表示する為のHTMLはこれだけですが、上記コードのように、

閉じるタグ(</canvas>)の前に改行を入れます。

 

WordPressの場合、タグのみの行はビジュアルエディタとテキストエディタを行き来するだけで消えてしまうのを防ぐ為です。

何かしらの文字を入れれば消えませんが、今回は文字の必要がない為、一番楽な「改行」で対応しています。

 

以上で完了です。

 

グラフが表示されない時

記述したJavaScriptとHTMLを見直して下さい。

以下の部分が同じになっている事を確認する

JavaScript

1~2行目
var ctx = document.getElementById(“myBarChart“);
var myBarChart= new Chart(ctx, {

 

HTML

<canvas id="myBarChart“>

2つ以上のグラフを表示している場合や、他の部分で同じ名称を使っていないかを確認する

上記の解説にも書きましたが、複数のグラフを同一ページ内で表示する場合は、名称を変える必要がありますのでご注意下さい。

例:棒グラフを2つ表示

myBarChart1

myBarChart2

JavaScript、HTMLのそれぞれに対応して名称が間違えていないか確認。

 

関連記事