みなさん、こんにちは。
いしかわつかさです。
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が同じかどうか確認してみて下さい。僕はよくここで？？ってなりました。初歩的な事ですね！
コメント