はじめに
「Chart.js」では、棒グラフや円グラフ、折れ線グラフ、レイダーチャートなど多彩なグラフを好きな色に設定して表示する事が出来ます。
それらを組み合わせた混合チャートも可能です。
Chart.js（公式サイト）
Chart.js ドキュメント
この記事は レーダーチャート のCocoonでの使い方です。
複数比較
チャートの設定方法
- type：描画するグラフの種類
- data：ラベルとデータセット
- options：オプション設定
グラフの種類は「type」で指定します。
それぞれの詳細な使い方記事は、以下の表内リンクから。
それ以外は左側のリンクからご覧ください。
| 表示サンプル | type | 設定方法 | |
|---|---|---|---|
| 一般 | Cocoon | ||
 |
radar | レーダーチャート | |
| 詳細 | 詳細 | ||
 |
line | 折れ線グラフ | |
| 詳細 | 詳細 | ||
 |
bar | 棒グラフ | |
| 詳細 | 詳細 | ||
 |
pie | 円グラフ | |
| 詳細 | 詳細 | ||
 |
polarArea | ポーラーチャート | |
| 詳細 | 詳細 | ||
 |
doughnut | ドーナツチャート | |
| 詳細 | 詳細 | ||
 |
bar、line | 複合グラフ | |
| 詳細 | 詳細 | ||
 |
scatter | 散布図 | |
 |
bubble | バブルチャート | |
レーダーチャート
レーダーチャート type: ‘rader’ の実装方法です。
コピペで使って頂けるようにコードを紹介します。
手順
- STEP1JS読み込み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ファイルを特定記事のみで読み込ませたい場合などは以下を参考にして下さい。
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("myRadarChart");
var myRadarChart = new Chart(ctx, {
//グラフの種類
type: 'radar',
//データの設定
data: {
//データ項目のラベル
labels: ["総合評価", "評価１", "評価２", "評価３", "評価４"],
//データセット
datasets: [
{
label: "〇〇", //凡例のラベル
//背景色
backgroundColor: "rgba(200,112,126,0.5)",
//枠線の色
borderColor: "rgba(200,112,126,1)",
//結合点の背景色
pointBackgroundColor: "rgba(200,112,126,1)",
//結合点の枠線の色
pointBorderColor: "#fff",
//結合点の背景色（ホバーしたとき）
pointHoverBackgroundColor: "#fff",
//結合点の枠線の色（ホバーしたとき）
pointHoverBorderColor: "rgba(200,112,126,1)",
//結合点より外でマウスホバーを認識する範囲（ピクセル単位）
hitRadius: 5,
//グラフのデータ
data: [4,3,4,4,4]
}
]
},
options: {
// レスポンシブ指定
responsive: true,
scale: {
ticks: {
// 最小値の値を0指定
beginAtZero:true,
min: 0,
// 最大値を指定
max: 5,
}
}
}
});
２種の表示
コードを表示
var ctx = document.getElementById("myRadarChart2");
var myRadarChart2 = new Chart(ctx, {
//グラフの種類
type: 'radar',
//データの設定
data: {
//データ項目のラベル
labels: ["総合評価", "評価１", "評価２", "評価３", "評価４"],
//データセット
datasets: [
{
label: "〇〇", //凡例のラベル
//背景色
backgroundColor: "rgba(200,112,126,0.3)",
//枠線の色
borderColor: "rgba(200,112,126,1)",
//結合点の背景色
pointBackgroundColor: "rgba(200,112,126,1)",
//結合点の枠線の色
pointBorderColor: "#fff",
//結合点の背景色（ホバーしたとき）
pointHoverBackgroundColor: "#fff",
//結合点の枠線の色（ホバーしたとき）
pointHoverBorderColor: "rgba(200,112,126,1)",
//結合点より外でマウスホバーを認識する範囲（ピクセル単位）
hitRadius: 5,
//グラフのデータ
data: [4,3,4,4,4]
},
{
label: "△△",
//背景色
backgroundColor: "rgba(80,126,164,0.3)",
//枠線の色
borderColor: "rgba(80,126,164,1)",
//結合点の背景色
pointBackgroundColor: "rgba(80,126,164,1)",
//結合点の枠線の色
pointBorderColor: "#fff",
//結合点の背景色（ホバーしたとき）
pointHoverBackgroundColor: "#fff",
//結合点の枠線の色（ホバーしたとき）
pointHoverBorderColor: "rgba(80,126,164,1)",
//結合点より外でマウスホバーを認識する範囲（ピクセル単位）
hitRadius: 5,
//グラフのデータ
data: [4,3,3,2,5]
}
]
},
options: {
// レスポンシブ指定
responsive: true,
scale: {
ticks: {
// 最小値の値を0指定
beginAtZero:true,
min: 0,
// 最大値を指定
max: 5,
}
}
}
});
簡単解説
chart.js Rader（レーダーチャート）解説 ※外部リンク
１行目で記述している「myRadarChart」は、任意の名称です。
同一ページ内に複数のグラフを表示する際には、この名称をそれぞれに設定します。
例：レーダーチャートを２つ表示
myRadarChart1
myRadarChart2
データ項目のラベル
データ項目のラベルを設定。
設定した順に時計回りに表示されます。
項目数はいくつでもOKです。増やした場合は、データ内容も同数にする事をお忘れなく！
チャートの対象ラベル
複数の比較の場合、色分けしたどちらが何かを表示するラベルです。
（A社とB社の比較など）
１つしか表示しない場合は、要らない気もしますが、何も設定をしなくても四角い枠は出てしまうので、何かしら設定した方が良さそう。
色の設定について
それぞれの色指定は、透過割合を指定出来るRGBAで指定しています。
もちろん透過が必要なければ１６進コードでの指定も可能。
RGBAについては以下をご覧ください。
ホバー時の表示例
ホバー時の設定をしていますが、実際の表示は以下のような感じ。
グラフデータ
実際の数値を時計まわりに設定します。
//グラフのデータ
data: [4,3,4,4,4]
オプション
レスポンシブ指定と、チャートの最小値（円の中心点の数値）と、最大値（円周にあたる部分の数値）を設定します。
options: {
// レスポンシブ指定
responsive: true,
scale: {
ticks: {
// 最小値の値を0指定
beginAtZero:true,
min: 0,
// 最大値を指定
max: 5,
}
}
}
HTMLを記述
表示したい場所に記述します。
<canvas id="mRaderChart">
</canvas>
注意点
表示する為のHTMLはこれだけですが、上記コードのように、
WordPressの場合、タグのみの行はビジュアルエディタとテキストエディタを行き来するだけで消えてしまうのを防ぐ為です。
何かしらの文字を入れれば消えませんが、今回は文字の必要がない為、一番楽な「改行」で対応しています。
以上で完了です。
グラフが表示されない時
記述したJavaScriptとHTMLを見直して下さい。
JavaScript
１～２行目
var ctx = document.getElementById(“myRadarChart“);
var myRadarChart= new Chart(ctx, {
HTML
<canvas id=”myRadarChart“>
上記の解説にも書きましたが、複数のグラフを同一ページ内で表示する場合は、名称を変える必要がありますのでご注意下さい。
例：レーダーチャートを２つ表示
myRadarChart1
myRadarChart2
JavaScript、HTMLのそれぞれに対応して名称が間違えていないか確認。
コメント