コピペで!「Chart.js」を使って混合(棒+折れ線)チャートを表示する

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

コピペで!「Chart.js」を使って混合(棒+折れ線)チャートを表示する

軽量で簡単に実装できる「Chart.js」を使った棒グラフと折れ線グラフの複合チャートの表示方法についてです。

複合チャートサンプル

 

 

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

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

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

 

チャートの設定方法

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

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

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

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

 

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

 

 

 

混合グラフ

今回は、混合グラフ ですが、棒グラフと折れ線グラフを使うのでtype: 'bar’ と type: 'line’ の複合実装方法です。

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

 

手順

  • 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("myMixChart");
  var myMixChart = 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)", 
            yAxisID: 'left-y-axis' //左の縦軸に表示
        }, {
            //折れ線グラフ
            label: "PV数", //データ項目のラベル
            type: 'line',
            data: [190,230,380,320,480], //グラフのデータ
            borderColor: "rgba(80,126,164,1)",
            backgroundColor: "rgba(0,0,0,0)",
            yAxisID: 'right-y-axis' //右の縦軸に表示
        }]
    },
    options: {
      title: {
        display: true,
        //グラフタイトル
        text: 'Aサイト分析'
      },
      scales: {
            yAxes: [
                {
                 //左軸の設定
                  id: 'left-y-axis',
                  position: 'left',
                  ticks: {
                    suggestedMax: 300, //最大値
                    suggestedMin: 0,  //最小値
                    stepSize: 50, //縦ラベルの数値単位
                    callback: function(value, index, values){
                      return  value +  '人' //単位
                    }
                  }
              }, {
                 //右軸の設定
                  id: 'right-y-axis',
                  position: 'right',
                  ticks: {
                    suggestedMax: 500, //最大値
                    suggestedMin: 0,  //最小値
                    stepSize: 100, //縦ラベルの数値単位
                    callback: function(value, index, values){
                      return  value +  'PV' //単位
                    }
                  },
              }
           ]
        }
     }
  });
</script>

 

 

簡単解説

chart.js (混合グラフ)解説 ※外部リンク
chart.js Line(折れ線グラフ)解説 ※外部リンク
chart.js Bar(棒グラフ)解説 ※外部リンク

 

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

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

例:棒グラフを2つ表示

myBarChart1

myBarChart2

 

データ項目ラベル

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

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

複合チャートサンプル

 

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

 

チャートの対象ラベル

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

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

複合チャートサンプル

 

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

 

色の設定について

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

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

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

 

 

グラフデータ

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

data: [120,140,180,150,210], //グラフのデータ
・・
data: [190,230,380,320,480], //グラフのデータ

 

 

オプション

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

options: {
title: {
display: true,
//グラフタイトル
text: 'Aサイト分析’
},
scales: {
yAxes: [
{
//左軸の設定
id: 'left-y-axis’,
position: 'left’,
ticks: {
suggestedMax: 300, //最大値
suggestedMin: 0, //最小値
stepSize: 50, //縦ラベルの数値単位
callback: function(value, index, values){
return value + '人’ //単位
}
}
}, {
//右軸の設定
id: 'right-y-axis’,
position: 'right’,
ticks: {
suggestedMax: 500, //最大値
suggestedMin: 0, //最小値
stepSize: 100, //縦ラベルの数値単位
callback: function(value, index, values){
return value + 'PV’ //単位
}
},
}
]
}
}

 

HTMLを記述

表示したい場所に記述します。
<canvas id="myMixChart">
</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のそれぞれに対応して名称が間違えていないか確認。

 

関連記事