pukiwikiプラグイン/svggraphs の変更点

• 追加された行はこの色です。
• 削除された行はこの色です。
• pukiwikiプラグイン/svggraphs へ行く。
• pukiwikiプラグイン/svggraphs の差分を削除

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

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

*プラグイン概要 [#j1c97c32]

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

グラフのデータには、以下のいずれかの方式を利用できます。
-別のwikiページに記載し、それを file 指定で取り込む
-pukiwikiの複数行パラメータオプションを利用する

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

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

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

*インストール方法 [#e9b66ef8]

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

-[[svggraphs.inc.php_011.zip>https://tomose.net/junk/?plugin=attach&pcmd=open&file=svggraphs.inc.php_011.zip&refer=pukiwiki%A5%D7%A5%E9%A5%B0%A5%A4%A5%F3%2Fsvggraphs]]
*使い方 [#h9353c1c]

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

 #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」形式、または「半角カンマ区切りの表」のいずれかで指定します。~


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


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


#divregion(折れ線グラフ,hstyle:h2)

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


この条件では、以下のように表示されます。
#svggraphs(gtype=line ,w=500, h=250,file=テストデータ)

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

 #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=line ,w=500, h=250){{
,head,0,25,50,75,100
,Line1,50,70,60,100,50
,2ndline,20,30,20,10,30
,3行目。,10,50,80,70,150
,Ende.,30,50,60,20,90

タイトル文字列とその位置指定 
title=テストグラフ
tx=50
ty=25

titlestyle=blue,bold,underline

linestyle=Line1:s,w2
linestyle=Ende.:s8,s3,s2,s3
marker=Ende.:c
marker=3行目。:s
marker=Line1:x
marker=2ndline:d

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

miny=10
maxy=110 

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

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

}}



#enddivregion


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

#divregion(円グラフ,hstyle:h2)


 #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=circle ,w=300, h=300){{

data=a:120
data=b:80
data=c:75
data=d:30
data=e:10

noshow=e

keyoffset=d:-20,4

title=円グラフ
tx=120
ty=155

center=40

}}

#enddivregion

#divregion(ヒストグラム,hstyle:h2)

 #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=histgram ,w=500, h=250){{

data=a:0,10,20,30,40,50,60,70,80,90,100
data=t:0,10,30,50,80,60,50,40,20,10

title=ヒストグラム

syauto=30
sxauto=10


miny=0
maxy=100

}}

#enddivregion


#divregion(グリッドマップ,hstyle:h2)

 #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=gridmap){{
w=500
h=200
r=5
c=10

data=X:3,4
data=Z:1,1

color=X:red
color=Z:blue

}}

#enddivregion

#divregion(メーター,hstyle:h2)
 #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=meter){{
h=40
w=500

offset=70
max=100
gauge_color=blue

data=55
color=salmon

text=Sample.
text_offset=10
text_color=green

}}

#enddivregion

#divregion(レーダーチャート,hstyle:h2)

 #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
 
 }}

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

vmax=100
scale=0,20,40,60,80
keyname=ちから,はやさ,きようさ,たいりょく,うん

keyoffset=はやさ:0,-20

data=base:40,40,60,80,100
data=base2:60,80,100,20,20

color=base:blue
color=base2:red
fillcolor=base:blue,0.1

titlestyle=,bold,underline

marker=base:d9
marker=base2:c6

title=レーダーチャート
tx=40
ty=50

legend=on
legendx=300
legendy=40

}}


#enddivregion



**グラフ個別の説明はこちら [#f9d410e9]
-[[折れ線グラフ用詳細>pukiwikiプラグイン/svggraphs/折れ線グラフ詳細]]
-[[円グラフ用詳細>pukiwikiプラグイン/svggraphs/円グラフ詳細]] 
-[[レーダーチャート用詳細>pukiwikiプラグイン/svggraphs/レーダーチャート詳細]] 


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

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


*技術的な話。 [#q10fe7a9]


**（例えば）graphline(折れ線グラフプラグイン)ではなく svggraphプラグインにしている理由 [#mbe1d7ec]
-ものすごく単純にいうと、「データの扱い方はどのグラフでも同じだろう」「グラフを書く上で共通の仕組みがあるだろう」という見切り発車でした。同じようなコードを何度も書くのを嫌がった＆メンテ性でそっちがいいだろう、という感じ。
-実際は、あまり共通点もないので、わりと再開発しているのが苦しい orz~
--一応見直しを行っていて、後述の「色の自動選択」や、タイトルや凡例の生成などはライブラリ的に共通コードにしています。
**グラフ作成について [#vd51622d]
-基本的には、パラメータを元にごりごりSVGを構築しているだけなので、技術的な話はあんまり・・・

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



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

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

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

#divregion(過去ログ：PKWKEXP_DISABLE_MULTILINE_PLUGIN_HACK の問題？)


- 状況はともあれ、うまく動作できてよかったです。&br;α版で放置状態ですが、お役に立てているようで幸いです。 -- To. ぶたさん &new{2023-10-02 (月) 19:06:45};
-お久しぶりです。&br;かつ、何故か成功しました。&br;PKWKEXP_DISABLE_MULTILINE_PLUGIN_HACK を 0 に設定しただけで。&br;&br;PukiWikiのバージョンを挙げた訳でもなくphpコードをいじった訳でもなく、自身が管理する部分については何もしていないのに..。&br;&br;とにかく、どうもありがとうございました。&br;とても有意義に使えています。助かっています。 -- ぶた &new{2023-10-01 (日) 21:47:37};
-そうですか、 'PKWKEXP_DISABLE_MULTILINE_PLUGIN_HACK'はダメですか・・・さてなんだろう。&br;&br;折れ線グラフのように「別ページでパラメータ記載して、file=xxxで取り込む」かたちで動くかどうかという確認をするのも１つの手だと思います。file指定で動かないのならば、そもそもこちらのリリース版自体に問題があることになりますし、逆にfile指定で動くなら、マルチライン指定がうまく動いていないことになります。&br; -- ともせ％管理人。 &new{2023-05-28 (日) 19:45:53};
-お返事が遅くなりました。そして、おへんじ誠にありがとうございました。&br;&br;>円グラフのサンプルについては、下記コメントのように 'PKWKEXP_DISABLE_MULTILINE_PLUGIN_HACK'の設定値です。&br;>今こちらの環境で「1」を設定したところ、ぶたさんと同じ現象を確認できました。ですから「0」に設定すればうまくいく&br;PKWKEXP_DISABLE_MULTILINE_PLUGIN_HACK を 1 → 0 に変えましたが、残念ながら同じ症状のままでした。&br;&br;>>折れ線グラフの使い方の説明をして頂けると、最高に嬉しいです。&br;>とりあえずこちらのテストデータのページを見ていただけますか？&br;畏まりました。が二兎は追わず、まず円グラフサンプルが動く事を確実にした後に試みます。&br;&br; -- ぶた &new{2023-05-28 (日) 13:26:20};
- >折れ線グラフの使い方の説明をして頂けると、最高に嬉しいです。&br;とりあえずこちらの[[テストデータ]]のページを見ていただけますか？ここにパラメータとその説明をいろいろ記載してあります。このようにして別ページにデータを記載して、このプラグインの file=xxxx パラメータでそのデータを記載したページを指定するのが無難です（ちなみにこのようにfile指定するのは、他のタイプのグラフでも同じように行えます）。&br;&br;円グラフと同様にマルチラインのパラメータとして、このテストページにあるような内容を記載しても動きますが、折れ線はどうしてもデータ量が多くなるので別ページにするのがよいように思います。&br;&br; -- ともせ％管理人。 &new{2023-05-22 (月) 19:40:19};
- To. ぶたさん&br;確認しました。円グラフのサンプルについては、下記コメントのように 'PKWKEXP_DISABLE_MULTILINE_PLUGIN_HACK'の設定値です。今こちらの環境で「1」を設定したところ、ぶたさんと同じ現象を確認できました。&br;ですから「0」に設定すればうまくいくと覆います。 -- ともせ％管理人。 &new{2023-05-22 (月) 19:37:09};
- ・To. ぶたさん&br;ちょっと今テストできないので速報レベルですが、そのエラー「No Data」がでているのは、プラグインに引数が適切にわたっていないという状況です。&br;また後ろ側にパラメータ指定しようとしていた文字が直接でているので、pukiwikiの「複数行引数を使う」設定になっていないような気がします。&br;pukiwiki.ini.php 内に次のようなdefineがあると思います：これを 0 にしてみてください。&br;&br; define('PKWKEXP_DISABLE_MULTILINE_PLUGIN_HACK', 0); // 1 = Disabled&br;&br; -- ともせ%管理人。 &new{2023-05-22 (月) 16:58:11};
-↓の環境で↑の円グラフのサンプルコードを試したのですが...&br;&br;・PukiWiki 1.5.1&br;・PHP 7.4.33. &br;・Chrome 113.0.5672.127 x64&br;&br;↓の文字列表示が出てしまい、円グラフが表示されませんでした。&br;#graphcircle: No Data&br;data=a:120&br;data=b:80&br;data=c:75&br;data=d:30&br;data=e:10&br;noshow=e&br;title=円グラフ&br;}} --  &new{2023-05-22 (月) 01:22:44};
-折れ線グラフの使い方の説明をして頂けると、最高に嬉しいです。 -- ぶた &new{2023-05-22 (月) 01:17:29};
#enddivregion