自作プラグイン/chart の履歴(No.1)

インタラクティブなSVGチャート表示プラグイン

ApexCharts を利用して、PukiWiki 上でインタラクティブなグラフ（SVG）を表示するプラグイン。
折れ線、棒、円、レーダーチャートなど、主要なグラフ形式を簡単なCSV形式のデータ記述で実現できる。

このプラグインは現在公開されていません。

日付	バージョン	備考
2026-05-02	1.1.0	ApexChartsの高度な表示オプションに対応
2026-05-02	1.0.0	初版作成

ブロック型プラグインとして、第1引数にタイプ、第2引数以降にオプションを指定し、マルチライン部分にデータを記述する。

#chart(タイプ, オプション1=値1, ...){{
ラベル,系列1,系列2,...
項目1,数値1,数値2,...
}}

引数名	説明	デフォルト
`第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`
`datalabels`	データラベルの表示 (`true` / `false`)	`false`
`legend`	凡例の位置 (`top`, `bottom`, `left`, `right`)	`bottom`
`grid`	背景グリッドの表示 (`true` / `false`)	`true`

表示

ソース

#chart(line,title=売上推移,xlabel=月,ylabel=万円){{
月,商品A,商品B
1月,100,80
2月,120,90
3月,150,110
}}

表示

ソース

#chart(radar,title=能力値,colors=#ff4560|#008ffb){{
項目,プレイヤー1,プレイヤー2
攻撃,80,60
防御,70,90
速度,90,70
}}

表示

ソース

#chart(bar,horizontal=true,stacked=true,title=積み上げ棒グラフ){{
カテゴリ,系列A,系列B
A,40,50
B,60,30
}}

Loading comments…