レーダーチャートブロックの使い方

Cocoon 2.7.7.5で追加されたレーダーチャートブロックについての解説です。

レーダーチャートブロックとは

レーダーチャートブロックとは、レビューの値や能力値などをわかりやすく表現するために使うチャートブロックとなっています。

例えばラーメンのレビューブログをしているサイトなどでは、評価項目を数値化して視覚的に表示することができます。

あとゲームキャラクター等の能力値を表現する時も分かりやすく表示できるでしょう。

各種色を変更して、ある程度見た目を変更することも可能です。

以下のように突出した値の入力もできるので、その能力が以下に良いかを視覚的に演出することができます。

アイディア次第で他にもいろいろ使えるかと思います。

レーダーチャートの使用方法

レーダーチャートの作成

記事作成画面のブロック挿入ツールから「レーダーチャート」ブロックを選択します。

デフォルトだと以下のような状態のブロックが挿入されます。

この状態からオプションを変更することで意図したチャートを表示させることができます。

レーダーチャートの設定

レーダーチャートブロックを選択すると以下のような設定項目が表示されます。

以下の項目を設定することができます。

チャート色	レーダーチャートの色を変更します。
背景色	レーダーチャートのキャンバスの色を変更します。
文字色	キャンバス内で使われている全ての文字の色を変更します。
グリッド色	データチャートのグリッド線（目盛り）の色を変更します。
キャンバスサイズ	描画するレーダーチャートの大きさを設定します。
フォントサイズ	レーダーチャート全体に使用されているフォントサイズを変更します。 全ての文字の大きさが変わります。
最大値	レーダーチャートの値の最大値を設定します。 「値が最大値を超えるのを許可」項目を有効にしない限り、 最大値以上の値を入力することはできません。 設定できる最大値は、5、10、100の中から選択できます。
タイトルを表示	チャートタイトルを表示するかどうか。
タイトル	タイトルのテキストを入力します。
	入力したデータの名前を表示するかどうか。
データ名	データ名となるテキストを入力します。
項目	評価基準となる項目名をカンマ（,）区切りで入力します。 項目は入力した数だけ何個でも増やすことができます。 例：麺, スープ, 具, 香り, バランス
値	項目の値をカンマ（,）区切りで入力します。 値は項目の数だけ入力できます。 例：5, 5, 4, 4, 4
総計を表示	値を全て足し合わせた合計をチャートの中心に表示します。
項目に値を表示	項目名の右側に括弧付きで個別の値を表示します。
値が最大値を超えるのを許可	レーダーチャートはみ出る最大値以上の値の入力を許可するか設定します。 突出した値を演出でき、その項目の優位性を最大限アピールできます。
アングルラインを表示	レーダーチャートの土台の罫線に、中心から項目名に向かって 放射状に表示される線を追加するかを設定します。

ブロックが表示されない場合は

テーマのアップデート後、以下のような表示でブロックが表示されないことがあるかもしれません。

その際は「ブロックのリカバリーを試行」ボタンを押すことで改善されます。

チャートから画像の生成方法

Chromeの場合、投稿画面でも公開画面でも、レーダーチャートブロックを右クリックして、「名前をつけて画像を保存」を選択すると、pngファイルとして、レーダーチャート画像を保存できます。

Firefoxの場合は、「画像を新しいタブで開く」で開いてから、ページ保存機能で画像を保存してください。

デモ

以下は、色々なデータを入力したチャートブロックの表示例です。

レビュー形式

「最大値」を5にした際のデモ。

データ引用：信長の野望 太閤立志伝 5より

「最大値」を100にした際のデモ。

統率, 武力, 政務, 智略, 魅力, 野心
織田信長
96, 70, 97, 91, 99, 100
豊臣秀吉
83,58,93,99,93,98
徳川家康
88,79,99,98,97,98
上杉謙信
100,90,63,79,92,89
武田信玄
99,85,93,99,92,97
小田氏治
44,41,53,50,36,89

データ引用：ワールドトリガー オフィシャルデータブックより

「最大値」が10。各種色変更。「値が最大値を超えるのを許可」を有効にした際のデモ。

トリオン,攻撃,防御・援護,機動,技術,射程,指揮,特殊戦術
忍田真史
7,14,9,7,10,3,10,2
林藤匠
9,10,10,6,8,6,9,7
空閑遊真（ノーマル）
7,9,8,10,8,2,5,4
三雲修
2,3,4,4,5,4,6,4

データ引用：三国志 14より

「最大値」が100。魏蜀呉等で色変更。「アングルラインを表示」を有効にした際のデモ。

統率,武力,知力,政治,魅力
曹操
98,72,91,94,96
孫権
76,67,80,89,95
劉備
76,73,74,78,99
呂布
95,100,26,13,36
関羽
96,97,75,63,94
張飛
86,98,33,22,44
趙雲
91,96,76,65,81
許褚
66,96,36,20,56
夏侯惇
98,90,60,74,88
太史慈
86,96,67,58,79
甘寧
87,94,76,18,55
諸葛亮
93,38,100,96,93
龐統
78,34,97,85,69
統率, 武力, 知力, 政治, 魅力
司馬懿
99,63,96,92,90
賈詡
86,48,97,85,57
郭嘉
62,15,98,84,80
荀彧
54,14,95,99,94
周瑜
97,71,96,86,94
陸遜
96,69,95,88,91
劉禅
3,5,9,4,68

注意点

このレーダーチャートブロックは、基本的に投稿・固定ページ・カスタム投稿などの記事ページでしか利用できません。なので、ブロックパターンショートコードを利用して、カテゴリページやウィジェットで表示させても動作しない可能性があります。

これは、レーダーチャート描画する重めのChart.jsスクリプトを、レーダーチャートブロックを使用しているページでしか読み込まないようにする軽量化のためにこのような仕様にしています。