【コピペ使用可】Chart.js 使い方の基礎

みなさん、こんにちは。
いしかわつかさです。

WordPress上でグラフを書きたい!!
という事で、まぁこれがいいかなと思ったのがあったので、ご紹介します。
プラグインでもあったのですが、動作が重くなるとか設定が難しそうなのでやめました。
出来る限り簡単に導入したいが希望です。

結論としては、Chart.jsを使ってJavaScriptでやっちまいましょうです。

僕のような小難しい事が苦手な人向けです。

目次

Chart.jsとは?

オープンソースで開発されているJavaScriptライブラリです。
Webページ上でグラフを簡単に作成可能できること、シンプルで見た目が可愛いが特徴です。

  • コーディングが簡単
  • 8種類のグラフが使用可能
  • HTML5対応
  • レスポンシブ対応(ウインドウサイズに合わせて最適化)
  • インタラクティブ(マウスオーバーすると値が表示されたり)
  • MITライセンス (著作権表示さえすれば無償で使用して可能)

以下の8種類のグラフと、複合グラフが利用可能です。

  • 折れ線グラフ
  • 棒グラフ
  • レーダーチャート
  • ドーナツグラフ・円グラフ
  • Polar Area(円グラフの一種だが各セグメントが同じ角度)
  • バブルチャート
  • 散布図
  • 面グラフ

ライブラリの読込

まず、最初にCDNを利用して、外部のライブラリを読み込ませます。
投稿ページでグラフを表示させたい場合、テーマファイルエディタ から function.php に移動して下記を追加します。
投稿ページに表示させたい事を前提に進めます。

使用するのは「Chart.min.js」です。アドレスを見てもらえばわかりますが、バージョンは2.9.3です。

追加出来たら、下準備はOKです。

/** 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.9.3/Chart.min.js', null, null, false);
    wp_enqueue_script('chart-js');
  }
}

グラフを書こう。<折れ線グラフ>

早速、グラフを書いてみましょう。
まずはシンプルに折れ線グラフから。

デフォルト設定では、直線ではなく曲線になります。


投稿ページには HTML で下記の記述を追加します。
IDは ”myChart-line” です。

<canvas id="myChart-line"></canvas>
<script>
var ctx = document.getElementById('myChart-line').getContext('2d');
var chart = new Chart(ctx, {
 type: "line",
 
 // データ
 data: {
  labels: ['1', '2', '3', '4', '5'],
  datasets: [{
   label: '何かのデータ',
   borderColor: 'rgb(255, 0, 0)', // 線の色
   fill: false, // 線の下側の領域に色を塗るかどうか。false で無色。
  // lineTension: 0, ←ベジェ曲線の設定。0で直線
   data: [10, 7, 8, 8, 9]
  }]
 },
 	
 //オプション
 options: {
  //タイトル
	title: {
	 display: true,
	 text: '折れ線グラフ',
	 fontSize:20 //指定しない場合 12
	},
  //軸の設定
	 scales: {
    //Y軸の設定
		yAxes: [{
		 display: true,
		  ticks: { //目盛り
			 suggestedMax:10, //最大値
			 suggestedMin:0, //最小値
			 stepSize:1, //補助線
			},
		}],
	}
 }
});
</script>

type: でグラフを選択します。

typeに指定できる値は以下の通り。

  • line (折れ線グラフ)
  • bar (棒グラフ)
  • radar (レーダーチャート)
  • doughnut (ドーナツグラフ)
  • pie (円グラフ)
  • polarArea (全セグメントの角度が同じ円グラフ)
  • bubble (バブルチャート)
  • scatter (散布図)

グラフを書こう。<棒グラフ>

線ではなく、塗の場合は、”borderColor” ではなく、”backgroundColor” にします。
また、半透明にする為に、”rgb”ではなく、”rgba”としています。値は0.5。

var ctx = document.getElementById('myChart-bar').getContext('2d');
var chart = new Chart(ctx, {
 type: "bar",
 
 // データ
 data: {
  labels: ['1', '2', '3', '4', '5'],
  datasets: [{
   label: '何かのデータ',
   backgroundColor: 'rgba(255, 0, 0 , 0.5)', // 線の色
   fill: false, // 線の下側の領域に色を塗るかどうか。false で無色。
   data: [10, 7, 8, 8, 9]
  }]
 },
 	
 //オプション
 options: {
  //タイトル
	title: {
	 display: true,
	 text: '棒グラフ',
	 fontSize:20 //指定しない場合 12
	},
  //軸の設定
	 scales: {
    //Y軸の設定
		yAxes: [{
		 display: true,
		  ticks: { //目盛り
			 suggestedMax:10, //最大値
			 suggestedMin:0, //最小値
			 stepSize:1, //補助線
			},
		}],
	}
 }
});

その他のグラフについて

その他のグラフについては、正直、公式サイトのサンプルを見てもらう方が早いです。

応用編(折れ線グラフと棒グラフ積み上げ)

今回僕が一番やりたかったのがこれです。これをする為に色々探してこれに行きつきました。
これも特に難しい事はないです。

棒グラフの積み上げと折れ線グラフの複合です。

棒グラフの積み上げ設定は、オプションでしていします。

stacked: true //積み上げ棒グラフ 設定ON XとY

ポイントは、ラベル(項目)を下に移動した事。
目盛りに3桁毎に「,」を入れる事。

ラベルについては、下記を追加。

legend: {
  position: "bottom",
 },

目盛りについては、下記を追加。

callback: function(label, index, labels) {
 return label.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}
var ctx = document.getElementById("MyChart");
var myChart = new Chart(ctx, {
type: "bar",
//データ
data: {
 labels: ['1','2','3','4','5'],
 //グラフデータ
 datasets: [
 //折れ線グラフ
  {
  label: "A",
  type: "line",
  data: [8000,3000,5000,4000,6000],
  borderColor: "Red",
  pointBackgroundColor : "Red",
  lineTension: 0,
  fill:false,
  },
 //棒グラフ1
 {
 label: "B", 
 data: [3000,5000,2000,3000,6000],
 backgroundColor: "rgba(30,144,255,0.5)"
 }, 
 
 //棒グラフ2
 {
 label: "C", 
 data: [6000,3000,5000,3000,1000],
 backgroundColor: "rgba(255,20,147,0.5)"
 }
 ]
},
//オプション
options: {
 //タイトル
 title: {
  display: true,
  text: '何かのデータ',
  fontSize:20
 },
 // 項目がデフォルトでは上。これを下に移動。
 legend: {
  position: "bottom",
 },
 //軸の設定
 scales: {
  //X軸
  xAxes: [{
  stacked: true //積み上げ棒グラフ 設定ON XとY
  }],
  //Y軸
  yAxes: [{
   stacked: true, //積み上げ棒グラフ 設定ON XとY
   display: true,
   ticks: {
    suggestedMax:10000,
    suggestedMin:0,
    stepSize:1000,
    //カンマ区切り
    callback: function(label, index, labels) {
    return label.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
    }
   },
  }],
 }
}
});

まとめ

今回は、投稿ページのみに焦点を当てて対応しましたが、固定ページにも必要になったら、追加で記録を残していこうと思います。プログラムってめんどくさいと思いがちですが、記述するところが限定的ですし、初心者でもとっつきやすいとおもいます。

グラフがうまく表示されない時、JavaScriptで設定したIDとHTMLで設定したIDが同じかどうか確認してみて下さい。僕はよくここで??ってなりました。初歩的な事ですね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次