SC-029 汎用グラフショートコード

概要

• ショートコード属性の静的 JSON から Chart.js グラフを描画する（DB クエリなし）。
• bar / line / bar_line（複合）をサポート。有料記事コメント欄・日別記事本文の do_shortcode 経路で動作する。
• 層構成: ShortCode → Converter → Controller → View（Service / Repository なし）。

外部インターフェース

ショートコードタグ

• タグ名: [custom_chart]
• 入力例:

  [custom_chart type="bar" title="化物語 月別差枚" data='{"labels":["2026-03","2026-04"],"datasets":[{"label":"エスパス","data":[800,950]}]}' unit="枚"]

属性一覧

属性	役割	必須
type	bar / line / bar_line（省略時 bar）	—
title	グラフタイトル	—
data	Chart.js 形式 JSON（labels + datasets）	○
unit	Y 軸・ツールチップの単位文字列（例: 枚）	—

data JSON 形状

キー	内容
labels	カテゴリラベル配列
datasets	系列配列。各要素は少なくとも data（数値配列）。任意で label
type（系列）	bar_line 時のみ有効。bar / line。未指定時は先頭 bar・以降 line

表示仕様

項目	内容
コンテナ	BEM custom-chart。任意タイトル + canvas
データ埋め込み	<script type="application/json" id="{chart_id}-data"> に JSON を埋め込み
XSS	json_decode 後、出力時に wp_json_encode + JSON_HEX_*
アセット	CSS: custom_chart.css / JS バンドル: custom-chart.js（Chart.js 4.x）

エラー

条件	挙動
data 未指定・空	ValidationException → ErrorHandler メッセージ
JSON 不正 / labels・datasets 欠落	同上
type が許容外	同上