>> テーマ変更に伴い見づらい箇所や不具合があるかもしれません、ご迷惑をおかけします。→
PR

コピペで！Cocoonで混合（棒＋折れ線）グラフを表示する方法「Chart.js」

Cocoon・使い方
2020.05.20
この記事は約11分で読めます。


はじめに

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

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

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

この記事は棒グラフと折れ線グラフを使った複合グラフのCocoonでの使い方です。

複合グラフサンプル

チャートの設定方法

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

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

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

テーマが「Cocoon」の場合は右側のリンクから、
それ以外は左側のリンクからご覧ください。
表示サンプルtype設定方法
一般Cocoon
レーダーチャートサンプルradarレーダーチャート
詳細詳細
折れ線グラフサンプルline折れ線グラフ
詳細詳細
棒グラフサンプルbar棒グラフ
詳細詳細
円グラフサンプルpie円グラフ
詳細詳細
ポーラーチャートサンプルpolarAreaポーラーチャート
詳細詳細
ドーナツチャートサンプルdoughnutドーナツチャート
詳細詳細
複合グラフサンプルbar、line複合グラフ
詳細詳細
散布図サンプルscatter散布図
バブルチャートサンプルbubbleバブルチャート

複合グラフ

折れ線グラフtype: ‘line’　と棒グラフtype:’bar’　の実装方法です。

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

手順

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

Chart.jsを読み込む

埋め込み場所について

ヘッダーかフッター

子テーマの「footer-insert.php」か「head-insert.php」に記述しますが、

フッターに入れた場合、ページサイズが大きい（スクロールが長い）場合など、グラフが表示されない事もあったので、ヘッダーの方が安心ですが、ページ表示速度を考慮すると　フッターの方が良いでしょうか。　ご自身の判断でどちらかに★

ヘッダーページ表示時に間違いなくグラフ表示される

フッターうまく表示されない事もある？　がページ表示が速い？

外観→テーマエディターから

tmp-userの中にあります。

「footer-insert.php」か「head-insert.php」いずれかに埋め込みコードを記載します。

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

jsファイルを特定記事のみで読み込ませたい場合などは以下を参考にして下さい。

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

function.phpでも可

固定ページではグラフ表示する事がない場合は、記事ページのみで読み込むようにする事も出来ます。

その場合は、function.phpに以下のように記述して下さい。

//レーダーチャート（Chart.js）
add_action('wp_enqueue_scripts', 'themeslug_enqueue_script');
function themeslug_enqueue_script(){
if (is_single()) {
    wp_register_script('chart-js', 'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js', null, null, false);
    wp_enqueue_script('chart-js');
  }
}

JavaScriptを記述

記述場所

表示したいページの記事編集画面にある「カスタムJavaScript」に記述します。

カスタムJavaScript

上図の赤枠部分にカーソルを載せると拡大出来ます

カスタムJavaScript

「カスタムJavaScript」エリアが表示されていない場合は、表示オプションで確認し、「カスタムJavaScript」にチェックを入れます。

カスタムJavaScript

 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' //単位
                    }
                  },
              }
           ]
        }
     }
  });

簡単解説

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

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

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

例：折れ線グラフを２つ表示

myLineChart1

myLineChart2

データ項目のラベル

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

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

複合グラフサンプル

チャート対象のラベル

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

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

複合グラフサンプル

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

色の設定について

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

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

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

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

グラフデータ

実際の数値をグラフの数だけ設定します。

.[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

１～２行目

var ctx = document.getElementById(“myMixChart“);
var myMixChart= new Chart(ctx, {

HTML

<canvas id=”myMixChart“>

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

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

例：複合グラフを２つ表示

myMixChart1

myMixChart2

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

コメント

'+'>'}}})() 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' //単位 } }, } ] } } });
タイトルとURLをコピーしました