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

はじめに
チャートの設定方法
折れ線グラフ
- 手順
Chart.jsを読み込む
- 埋め込み場所について
  - ヘッダーかフッター
  - function.phpでも可
JavaScriptを記述
HTMLを記述
グラフが表示されない時

はじめに

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

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

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

この記事は　折れ線グラフ　のCocoonでの使い方です。

チャートの設定方法

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

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

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

テーマが「Cocoon」の場合は右側のリンクから、
それ以外は左側のリンクからご覧ください。

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

折れ線グラフ

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

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

手順

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

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」にチェックを入れます。

折れ線グラフ

コードを表示

  var ctx = document.getElementById("myLineChart");
  var myLineChart = new Chart(ctx, {
    type: 'line',
    data: {
 //横軸ラベル
      labels: ['8月1日', '8月2日', '8月3日', '8月4日', '8月5日'],
      datasets: [
        {
          label: '最高気温(度）',
          data: [35, 34, 37, 35, 34], //データ
          borderColor: "rgba(200,112,126,1)",
          backgroundColor: "rgba(0,0,0,0)"
        }
      ],
    },
    options: {
      title: {
        display: true,
        text: '気温（8月1日～8月5日）' //グラフタイトル
      },
      scales: {
        yAxes: [{
          ticks: {
            suggestedMax: 40, //最大値
            suggestedMin: 20,  //最小値
            stepSize: 10, //刻み
            callback: function(value, index, values){
              return  value +  '度' //単位
            }
          }
        }]
      },
    }
  });

２種の表示

コードを表示

  var ctx = document.getElementById("myLineChart");
  var myLineChart = new Chart(ctx, {
    type: 'line',
    data: {
      labels: ['8月1日', '8月2日', '8月3日', '8月4日', '8月5日'],
      datasets: [
        {
          label: '最高気温(度）', //グラフ１
          data: [35, 34, 37, 35, 34], //データ
          borderColor: "rgba(200,112,126,1)",
          backgroundColor: "rgba(0,0,0,0)"
        },
        {
          label: '最低気温(度）', //グラフ２
          data: [23, 24, 27, 25, 26],
          borderColor: "rgba(80,126,164,1)",
          backgroundColor: "rgba(0,0,0,0)"
        }
      ],
    },
    options: {
      title: {
        display: true,
        text: '気温（8月1日~8月5日）' //グラフタイトル
      },
      scales: {
        yAxes: [{
          ticks: {
            suggestedMax: 40,
            suggestedMin: 20,
            stepSize: 10,
            callback: function(value, index, values){
              return  value +  '度'
            }
          }
        }]
      },
    }
  });

簡単解説

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

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

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

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

myLineChart1

myLineChart2

横軸ラベル

横軸のラベルを設定。

labels: [‘8月1日’, ‘8月2日’, ‘8月3日’, ‘8月4日’, ‘8月5日’], //横軸ラベル

データ項目ラベル

label: '最高気温(度）', //グラフ１
・・
label: '最低気温(度）', //グラフ２

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

グラフデータ

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

data: [35, 34, 37, 35, 34], //データ//グラフのデータ

オプション

グラフ上に表示するテキスト（グラフタイトル）と、縦軸の最小値・最大値・刻み（例では１０度単位に表示）を設定しています。

options: {
title: {
display: true,
text: '気温（8月1日~8月5日）' //グラフタイトル
},
scales: {
yAxes: [{
ticks: {
suggestedMax: 40, //最大値
suggestedMin: 20,  //最小値
stepSize: 10,  //刻み
callback: function(value, index, values){
return value + '度'  //単位
}
}
}]
},
}