pukiwikiプラグイン/svggraphs

2017-03-21 (火) 22:37:52 (883d)
お名前:

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

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

プラグイン概要

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

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

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

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

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

インストール方法

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

使い方

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

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

  • プラグイン記載例。
    #svggraphs(gtype=line ,w=500, h=250,file=テストデータ)
    • gtypeは現状 line(折れ線グラフ),circle(円グラフ),histgram(ヒストグラム)のいずれかです。
    • w,h はグラフ表示サイズです。
    • file は、外部wikiページからデータ・パラメータを取り込む指定です。

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

20 40 60 80 100 120 0 25 50 75 100テストグラフ Line1 2nd line 3行目。 Ende.

前述のように、pukiwiki のマルチライン引数にも対応しています。
以下のヒストグラム・円グラフは、マルチライン引数で実施した例です。

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

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

noshow=e

title=円グラフ
}}
a38.1%b25.4%c23.81%d9.52%円グラフ
#svggraphs(gtype=histgram ,w=500, h=250){{

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

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

miny=0
maxy=100 

}}
0 30 60 900102030405060708090100ヒストグラム
1 2 3 4 5 6 7 8 9 10 1 2 3 4 5 X Z

パラメータ

後日追記。

非常に多数のパラメータ指定をサポートしています。
とりあえず、上記テストデータ内容を参照してください。

ただし、多くのパラメータは省略可能です。
最悪、表形式のデータだけあれば、グラフ自体は作成できます。

技術的な話。

▼実験中。

コメント

ご意見などがあれば。


お名前:

お名前: