Top/pukiwikiプラグイン/svggraphs

pukiwikiプラグイン/svggraphs

2024-02-29 (木) 23:54:06

表記、作成中のプラグインです。

内容がいろいろ複雑なので、α版レベルで一度公開します。
興味があれば触って、ご意見いただけると。

プラグイン概要†

テキストデータからグラフを作成・表示するプラグインです。

グラフのデータには、以下のいずれかの方式を利用できます。

別のwikiページに記載し、それを file 指定で取り込む
pukiwikiの複数行パラメータオプションを利用する

描画には svgを利用しています。そのため、svg未対応のブラウザでは表示されません。

下記環境では表示されていることを確認済です。
- Windows環境：IE11, Edge38, Vivaldi/1.7(Chrome56.0)
- Android Chrome 56.0

ぶっちゃけ、他のWebサービスとか、Excelで作った画像を貼るなど、代用手段はいろいろあると思いますが、まあ。

↑

インストール方法†

下記zipファイルをダウンロードして、展開してください。
中には複数の php ファイルがあるので、それをすべて pukiwiki/plugin フォルダにおいてください。

svggraphs.inc.php_011.zip

↑

使い方†

ブロックプラグインです。
必要なパラメータをプラグインに与えることで、グラフ描画します。

#svggraphs(gtype=line ,file=テストデータ)

最初の gtype は必須パラメータです。グラフの形状を指定するパラメータで、現状次のものをサポートしています。

line	折れ線グラフ
circle	円グラフ
histgram	ヒストグラム
gridmap	グリッドマップ(グラフというよりは、ゲーム地図表示的な用途)
meter	棒グラフ的なメーター表示
rader	レーダーチャート

2つ目以降のパラメータに基づいて、グラフを描画します。
１つのグラフを書くには多数のパラメータ（情報）がいるため、それらのパラメータ群を記載した「別のpukiwikiページ」を指定する、もしくは「マルチライン引数でパラメータ記載」することで、プラグインに提供します。上記した「file=xxx」というのが他ページでパラメータを書く場合の例です。

補足：pukiwikiのマルチライン引数はオプションです。マルチライン引数を使いたい場合は pukiwiki.ini.php 内のでdefine指定を「0」に変更する必要があります。

define('PKWKEXP_DISABLE_MULTILINE_PLUGIN_HACK', 0); // 1 = Disabled

１つ１つのパラメータは「name=value」形式、または「半角カンマ区切りの表」のいずれかで指定します。

このパラメータ指定になっていない文字列、および空白文字列は無視します：これを利用して自然文でコメント記載することが可能です。

とりあえず、以下のサンプルを提供します。

▼折れ線グラフ

#svggraphs(gtype=line ,w=500, h=250,file=テストデータ)

w,h はグラフ表示サイズです。
file は、外部wikiページからデータ・パラメータを取り込む指定です。
- これによって取り込んでいるページはこちら：テストデータ
  パラメータの意味は自然文でコメントを書いてある通りです。

この条件では、以下のように表示されます。

同じ内容をマルチライン引数で書くこともできます。テストデータページにある内容とまったく同じ内容をマルチライン引数で与える場合、次のようなかたちになります。

#svggraphs(gtype=line ,w=500, h=250){{
,head,0,25,50,75,100
,Line1,50,70,60,100,50
,2nd line,20,30,20,10,30
,3行目。,10,50,80,70,150
,Ende.,30,50,60,20,90

タイトル文字列とその位置指定 
title=テストグラフ
tx=50
ty=20
タイトル文字列の装飾
titlestyle=blue,bold,underline

線の種類変更
linestyle=Line1:s,w2
linestyle=Ende.:s8,s3,s2,s3

線上にマーカーを表示する
marker=Ende.:c
marker=3行目。:s
marker=Line1:x
marker=2nd line:d

グラフの値域指定 
minx=0
maxx=110

miny=10
maxy=110

縦横の補助破線の指定 
sxauto=25
syauto=20

凡例の位置指定。legend パラメータを空白（legend＝)にすれば、凡例表示しません
legend=on
legendx=50
legendy=30

}}

以下のヒストグラム・円グラフは、マルチライン引数で実施した例です。

▼円グラフ

#svggraphs(gtype=circle ,w=300, h=300){{

各要素の値。この場合a,b,c,d,e の5項目からなる円グラフになる。
data=a:120
data=b:80
data=c:75
data=d:30
data=e:10

グラフ内にラベル表示しない項目の名称指定。指定された以降のラベルすべてが非表示。
noshow=e

ラベルの表示位置指定。「データ名:dx,dy」。dx,dyは省略した場合の位置からの相対指定。
keyoffset=d:-20,4

タイトルとその表示位置
title=円グラフ
tx=120
ty=155

中央に円を描く場合、その半径。0指定すると中央円なしになる。
center=40

}}

▼ヒストグラム

#svggraphs(gtype=histgram ,w=500, h=250){{

ヒストグラムに記載する値そのもの。この「data」指定は必ず2行必要。
最初のdataはヒストグラムの横軸の値定義。この場合0～100の値を記載することになる。
data=a:0,10,20,30,40,50,60,70,80,90,100

2つ目のデータは、ヒストグラム自体の情報。1行目の値指定に応じて、記載。
この例の場合、「ヒストグラムの0～10部分の値が、1つ目の0」、
「10～20が、2つ目の10」というようになっている。
data=t:0,10,30,50,80,60,50,40,20,10

title=ヒストグラム
syauto=30
sxauto=10

miny=0
maxy=100 

}}

▼グリッドマップ

#svggraphs(gtype=gridmap){{

w=500
h=200

グリッドのマス数。幅がc、高さがr。
r=5
c=10

グリッド上に記載する「コマ」の情報。「名称：座標x,y形式。」
data=X:3,4
data=Z:1,1

「コマ」の色指定。 
color=X:red
color=Z:blue

}}

▼メーター

#svggraphs(gtype=meter){{
h=40
w=500

メーター開始位置。テキストとの重なり具合を調整するために使う。
offset=70
メーターの最大値
max=100
補助線の色
gauge_color=blue

データ量。メーターの最大値に対してこの値で記載する。
data=55
棒グラフ的部分の色
color=salmon 

データの説明テキスト用の各情報。テキスト自体、表示開始位置、テキストの色
text=Sample.
text_offset=10
text_color=green

}}

▼レーダーチャート

#svggraphs(gtype=rader ,w=400, h=300){{

レーダーの軸の名称。この名称の数がそのままレーダーの多角形形状に影響する
keyname=ちから,はやさ,きようさ,たいりょく,うん
軸の最大値
vmax=100
補助線と表示する数値
scale=0,20,40,60,80

軸のラベルの表示位置指定。「軸名:dx,dy」指定。dx,dyは省略した場合の位置からの相対指定。
keyoffset=はやさ:0,-20

レーダーチャートのデータ実体。「データ名称:軸1値,軸2値・・・」と軸と同じ数だけ値を列挙
,base,40,40,60,80,100
,base2,60,80,100,20,20

データごとの色指定。 「データ名:色指定」の形式。
color=base:blue
color=base2:red
データごとの塗りつぶし指定。省略すると塗りつぶしなし。
「データ名：色,透明度」指定 透明度は省略可能。その場合0.2で塗りつぶす。
fillcolor=base:blue,0.1

線上にマーカーを描画。「データ名:形状・サイズ」。形状は英文字1文字。サイズは数値、省略可能。
marker=base:d9
marker=base2:c6

title=レーダーチャート
tx=40
ty=50
titlestyle=,bold,underline


legend=on
legendx=300
legendy=40

}}

↑

グラフ個別の説明はこちら†

↑

その他詳細説明†

非常に多数のパラメータ指定をサポートしています。またグラフによってサポート内容ももちろん変わります
とりあえず、上記サンプル内に自然言語でコメントしたので、そちらを参照してください。

多くのパラメータは省略可能です。
最悪、表形式のデータだけあれば、グラフ自体は作成できます。
パラメータの重複指定について
- 基本的には、同じパラメータを重複して指定した場合「あとから指定した値」だけを利用します。
- データそのもの、およびデータ名を参照するパラメータは、データ名が異なる場合別データとして扱います。同名データは後から指定したものだけを利用します。
パラメータの「ファイルでの指定」と「マルチラインでの指定」は併用できます。
- これを利用することで、例えば「ファイルにグラフのテンプレート的なパラメータ」、「マルチラインでグラフの固有データ」というような指定をすることで、同じフォーマットでの別グラフを容易に作れます。

↑

技術的な話。†

↑

（例えば）graphline(折れ線グラフプラグイン)ではなく svggraphプラグインにしている理由†

ものすごく単純にいうと、「データの扱い方はどのグラフでも同じだろう」「グラフを書く上で共通の仕組みがあるだろう」という見切り発車でした。同じようなコードを何度も書くのを嫌がった＆メンテ性でそっちがいいだろう、という感じ。
実際は、あまり共通点もないので、わりと再開発しているのが苦しい orz
- 一応見直しを行っていて、後述の「色の自動選択」や、タイトルや凡例の生成などはライブラリ的に共通コードにしています。

↑

グラフ作成について†

基本的には、パラメータを元にごりごりSVGを構築しているだけなので、技術的な話はあんまり・・・

↑

色の自動選択について†

グラフの色指定を省略した場合、プラグインで色を自動選択します。
仕組みとしては、「使っていい色のリスト」を持っていて、それを順に選んでいるだけです。
- 色のリストはかなり限定的なので、もう少しいい方法がないか検討する余地あり。

↑

ToDo自分メモ。気になっていること。†

~~円グラフの表示テキストの位置、自動生成しているが、微調整できるようにしたい気がする。~~ver0.07で対応
~~類似：レーダーチャートの軸の名称の位置、これも微調整したい。~~ver0.07で対応
~~offsetとかの位置で、現状正の値しか指定できない。マイナス指定もできるべき。~~ver0.07で対応
~~線の太さや形状（破線とか）も指定できたほうがいいかも。~~ver0.08で対応
~~タイトルの文字装飾（色やアンダーバー）は必要になるのでは。これも含めて、スタイル指定方法があったほうがいい。~~ver0.08で対応

~~折れ線やレーダーでは線の上にマーカーを描きたいことがある。~~ver0.08で対応
例えば円グラフやメータなどで「塗りつぶしの上に文字を描く」ケースがある。塗りつぶし色に応じて文字の白・黒反転などあったほうがいいのでは（省略時の自動指定の他に、例えば現状の例でいえばメーターの0～50までは白文字、60～100までは黒文字というようなイメージ

↑

コメント†

ご意見などがあれば。

サイト見つけられて良かったです！ゆっくりでいいので、背景色対応とスマホ対応して頂けるということで、ありがとうございます、助かります。 -- nattu 2024-02-29 (木) 23:54:06
To. nattuさん
ご連絡ありがとうございます。
サイトも見つけました：バグとか仕様上の問題があることがわかりましたので、大変助かります。
確かに言われてみれば、背景白でないサイトは普通にあるので、ダークモードというか背景色対応はあるべきですし。昨今を考えればスマホでの表示確認も必要ですよね。ちょっと忙しくてすぐにはできないですが、参考にして修正したいと思います。ありがとうございます。 -- ともせ％管理人 2024-02-29 (木) 22:39:05
レーダーチャートプラグインを一部を変更して導入してみました。
・ダークモード対応
・scaleに文字を追加出来るように引数scalevalueを追加
・スマホブラウザ表示が崩れる不具合修正
一応スマホ対応はできたので、ソースはとりあえず自分のサイトに載せておきます。
削除すべきなら消します。
(リンクは張れなかった)
-- nattu 2024-02-28 (水) 21:11:21
一部変更して使わせてもらいます！ -- nattu 2024-02-27 (火) 02:49:11