Cocoonの使い方やカスタマイズとオリジナルスキン

コピペで!Cocoonで混合(棒+折れ線)グラフを表示する方法「Chart.js」

スポンサーリンク
Cocoon・使い方
この記事は約11分で読めます。

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

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

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

 

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

複合グラフサンプル

スポンサーリンク

チャートの設定方法

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

 

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

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

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

 

Cocoonでの使い方

その他のグラフは以下をご覧ください。

コピペで!Cocoonで円グラフ・ドーナツチャートを表示する「Chart.js」
「Chart.js」では、棒グラフや円グラフ、折れ線グラフ、レイダーチャートなど多彩なグラフを好きな色に設定して表示する事が出来ます。 それらを組み合わせた混合チャートも可能です。 様々なグラフのサン...
コピペで!Cocoonで棒グラフを表示する方法「Chart.js」
「Chart.js」では、棒グラフや円グラフ、折れ線グラフ、レイダーチャートなど多彩なグラフを好きな色に設定して表示する事が出来ます。 それらを組み合わせた混合チャートも可能です。 様々なグラフのサン...
コピペで!Cocoonでポーラーチャートを表示する方法「Chart.js」
「Chart.js」では、棒グラフや円グラフ、折れ線グラフ、レイダーチャートなど多彩なグラフを好きな色に設定して表示する事が出来ます。 それらを組み合わせた混合チャートも可能です。 様々なグラフのサン...
コピペで!Cocoonでレーダーチャートを表示する方法「Chart.js」
「Chart.js」では、棒グラフや円グラフ、折れ線グラフ、レイダーチャートなど多彩なグラフを好きな色に設定して表示する事が出来ます。 それらを組み合わせた混合チャートも可能です。 様々なグラフのサン...
コピペで!Cocoonで折れ線グラフを表示する方法「Chart.js」
「Chart.js」では、棒グラフや円グラフ、折れ線グラフ、レイダーチャートなど多彩なグラフを好きな色に設定して表示する事が出来ます。 それらを組み合わせた混合チャートも可能です。 様々なグラフのサン...

 

複合グラフ

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

 

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

 

手順

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

 

Chart.jsを読み込む

埋め込み場所について

ヘッダーかフッター

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

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

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

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

 

 

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

tmp-user の中にあります。

いずれかに以下の1行を記述します。

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

 

 

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

 

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

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

例:折れ線グラフを2つ表示

myLineChart1

myLineChart2

 

データ項目のラベル

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

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

複合グラフサンプル

 

 

チャート対象のラベル

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

 

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

 

複合グラフサンプル

 

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

 

色の設定について

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

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

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

RGBAって?CSS3で任意の色を透明度と一緒に設定する方法 | 綾糸.net
RGBAとは RGBAは、CSS3から追加されたプロパティで、「色と同時に透明度」を指定できます。 通常カラーコードは2種類のコードで指定できます。 16進コード(#xxxxxx)...

 

 

グラフデータ

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

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(“myMixChart“);
var myMixChart= new Chart(ctx, {

 

HTML

<canvas id=”myMixChart“>

 

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

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

例:複合グラフを2つ表示

myMixChart1

myMixChart2

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

 

コメント

タイトルとURLをコピーしました