#author("2026-05-02T22:26:37+09:00","default:kanateko","kanateko")
#author("2026-05-02T22:35:24+09:00","default:kanateko","kanateko")
&tag(プラグイン,自作,追加,未公開);
#ref(chart.webp,center,wrap,560x)
#contentsx
* インタラクティブなSVGチャート表示プラグイン [#summary]
#infobox(plugin,except=ライセンス){{
name = chart
ver = 1.1.0
ver = 1.1.1
pukiwiki = 1.5.4
update = 2026-05-02
}}
ApexCharts を利用して、PukiWiki 上でインタラクティブなグラフ（SVG）を表示するプラグイン。
折れ線、棒、円、レーダーチャートなど、主要なグラフ形式を簡単なCSV形式のデータ記述で実現できる。
* プラグインの特徴 [#features]
- 📊 ''多彩なグラフ形式''：折れ線 (`line`)、棒 (`bar`)、円 (`pie`)、レーダー (`radar`) チャートに対応
- 🖱️ ''インタラクティブ表示''：マウスホバーによるツールチップ表示や凡例による系列の切り替えが可能
- ✍️ ''直感的なデータ記述''：CSV形式でラベルと数値を書くだけで自動的にグラフ化
- ⚡ ''高速・軽量''：CSS/JS を Minify 化して PHP に埋め込み。外部リソースへの依存を最小限に抑制
- 🌙 ''ダークモード対応''：PukiWiki のダークテーマ設定に自動連動。視認性の高い配色を維持
- 📱 ''レスポンシブ設計''：画面サイズに合わせてグラフが自動調整される
* 動作環境 [#requirements]
- PukiWiki 1.5.4 以降
- PHP 8.1 以降
- モダンブラウザ（SVG / ES2022 対応）
#clear
* ダウンロード [#download]
#box(caution,width=400px){{{
このプラグインは現在公開されていません。
}}}
|~日付|~バージョン|~備考|h
|CENTER:120|CENTER:60|590|c
|2026-05-02|1.1.0|#ul(ApexChartsの高度な表示オプションに対応)|
|2026-05-02|1.0.0|#ul(初版作成)|
|2026-05-02|1.1.1|#ul(stacktype オプション（100% 積み上げ）に対応)|
|~|1.1.0|#ul(ApexChartsの高度な表示オプションに対応)|
|~|1.0.0|#ul(初版作成)|
//* インストール [#install]
//+ GitHub の Release から最新の `chart.inc.php` をダウンロードする。
//+ ダウンロードしたファイルを `plugin/` ディレクトリに配置する。
* 使用方法 [#usage]
ブロック型プラグインとして、第1引数にタイプ、第2引数以降にオプションを指定し、マルチライン部分にデータを記述する。
#chart(タイプ, オプション1=値1, ...){{
ラベル,系列1,系列2,...
項目1,数値1,数値2,...
}}
** 引数・オプション一覧 [#args]
|~引数名|~説明|~デフォルト|h
|150|250|150|c
|`第1引数`|グラフのタイプ (`line`, `bar`, `pie`, `radar`)|(必須)|
|`title`|グラフのタイトル|なし|
|`xlabel`|X軸のラベル|なし|
|`ylabel`|Y軸のラベル|なし|
|`height`|グラフの高さ (例: `400px`)|`400px`|
|`width`|グラフの幅 (例: `100%`)|`100%`|
|`colors`|系列の色をパイプ `|` で区切り指定|自動|
|`curve`|線の種類 (`smooth`, `straight`, `stepline`)|`smooth`|
|`markersize`|マーカーのサイズ (数値)|`4`|
|`horizontal`|横向きグラフの有効化 (`true` / `false`)|`false`|
|`stacked`|積み上げグラフの有効化 (`true` / `false`)|`false`|
|`stacktype`|積み上げの形式 (`normal` / `100%`)|`normal`|
|`datalabels`|データラベルの表示 (`true` / `false`)|`false`|
|`legend`|凡例の位置 (`top`, `bottom`, `left`, `right`)|`bottom`|
|`grid`|背景グリッドの表示 (`true` / `false`)|`true`|
* 使用例 [#example]
** 折れ線グラフ [#line_example]
#tab{{{
#:表示
#chart(line,title=売上推移,xlabel=月,ylabel=万円){{
月,商品A,商品B
1月,100,80
2月,120,90
3月,150,110
}}
#:ソース
#chart(line,title=売上推移,xlabel=月,ylabel=万円){{
月,商品A,商品B
1月,100,80
2月,120,90
3月,150,110
}}
}}}
** レーダーチャート [#radar_example]
#tab{{{
#:表示
#chart(radar,title=能力値,colors=#ff4560|#008ffb){{
項目,プレイヤー1,プレイヤー2
攻撃,80,60
防御,70,90
速度,90,70
}}
#:ソース
#chart(radar,title=能力値,colors=#ff4560|#008ffb){{
項目,プレイヤー1,プレイヤー2
攻撃,80,60
防御,70,90
速度,90,70
}}
}}}
** 横向き積み上げ棒グラフ [#stacked_bar_example]
#tab{{{
#:表示
#chart(bar,horizontal=true,stacked=true,title=積み上げ棒グラフ){{
カテゴリ,系列A,系列B
A,40,50
B,60,30
}}
#:ソース
#chart(bar,horizontal=true,stacked=true,title=積み上げ棒グラフ){{
カテゴリ,系列A,系列B
A,40,50
B,60,30
}}
}}}
* コメント [#comment]
#mcomment
