トップ 差分 一覧 Farm ソース 検索 ヘルプ RSS ログイン

BugTrack-plugin/318

ページの作成や編集にはユーザ登録が必要です。

グラフ表示プラグイン

  • 投稿者： やじるし
  • カテゴリ： 新規
  • 優先度： 低
  • 状態： 提案
  • 日時： 2006年09月28日 00時59分31秒

 内容

graphプラグイン

 内容

テーブルもしくはattachされたCVSファイルをGD::Graphモジュールでグラフ（画像）にして表示します。

例

次のテーブルは

,東京,大阪,神奈川,サッポロ,広島
,10  ,20  ,30    ,40      ,50
,20  ,30  ,40    ,50      ,60
,30  ,40  ,50    ,60      ,70
東京 大阪 神奈川 サッポロ 広島
10 20 30 40 50
20 30 40 50 60
30 40 50 60 70

となりますが、graphプラグインを使うと、

{{graph name=graph1
,東京,大阪,神奈川,サッポロ,広島
,10  ,20  ,30    ,40      ,50
,20  ,30  ,40    ,50      ,60
,30  ,40  ,50    ,60      ,70
}}

となります。

 版数

Ver1.0です。

 動作確認したFreeStyleWikiの版数

OS FreeStyleWiki版数 perl版数 mod_perl
solaris2 3.6.2 5.8.0 使用
WindowsXP 3.6.2 5.8.8 未使用

 ライセンス

プラグイン自体はGPLです。

attachプラグインのRefText.pmを改造してgetcsvとして使用しています。

fonts/mikachan.ttfはフリー（http://www001.upp.so-net.ne.jp/mikachan/を参照してください。）

CSV.pmは“GNU GPL Version 2.0 以降またはArtistic License”（http://digit.que.ne.jp/work/index.cgi?Walrus,Digit.を参照してください。）

 提供するアーカイブ

アーカイブファイル名

graph_V1.0.zip(601)

アーカイブの内容

Graph.pm
プラグインの実体です。
Install.pm
CSV.pm
塚本牧生さん作成のCSVファイル入力パッケージです。
fonts/mikachan.ttf
「みかちゃん」フォントです。
graph.wiki
サンプルwiki
m.csv
サンプルcsv

 設置方法

おことわり

設置はかなり面倒です。

事前準備

日本語すら表示できない私の開発環境（solaris2）では、以下のライブラリとPerlモジュールをインストールしました。足りないモノを必要に応じてインストールしてください。

  • The JPEG library
  • The PNG library
  • TrueTypeフォントをレンダリングするライブラリ
  • GD Graphics Libraryをインストールする。
  • GDモジュールをインストールする。
  • GD::Text Perl モジュールのインストールする。
  • GD::Graph Perl モジュールのインストールする。
  • File::Slurpモジュールをインストールする。

WindowsXPでActivePerlを使用している場合のインストール例を最後に示します。参考にしてください。

プラグインのインストール

まず次の３つのプラグインがなければインストールしてください。

  • 複数行プラグイン
  • attachプラグイン
  • ref_imageプラグイン

graphプラグインのインストール

アーカイブして出来たgraphディレクトリを./pluginディレクトリの下に置いてください。

graphディレクトリ下にworkディレクトリがある事を確認してください。なければ、作成してください。workディレクトリはcgiが読み書き出来るようにパーミッションを設定してください。

フォントの指定

  • ディフォルトではfonts/mikachan.ttfを使用するようになっています。
  • (日本語)TrueTypeフォント（ttf、ttc）があれば、Graph.pmを書き換える事でフォントを変更できます。
  • 日本語フォントでないと、日本語が字化けします。
  • フォントの指定が上手くいかないと、GD::Graphが持っているディフォルトの英字フォントが使われるようです。日本語が字化けする場合は、フォントパスやフォントファイルに間違いが無いか確認してください。
  • 一部の日本語フォントは表示（縦書き）が上手くいかないようで字が重なります。私の環境だとMSなんとかのフォントが上手くいかない。
       # fontのpath。
       my $font_path="./plugin/graph/fonts";

       # font指定。
       my $title_font="mikachan.tff";
       my $legend_font="mikachan.ttf";
       my $x_axis_font="mikachan.ttf";
       my $x_label_font="mikachan.ttf";
       my $y_axis_font="mikachan.ttf";
       my $y_label_font="mikachan.ttf";

       # WindowsXPのFontのフォルダとFontの例
       # TrueTypeフォントを指定する。       
       #$font_path="C:\\WINDOWS\\Fonts";  ←コメントを外す。
       #$title_font="HGRGE.TTC";          ←コメントを外す。グリフが気に入らないのならフォントを変える。
       #$legend_font="HGRGE.TTC";         ←コメントを外す。グリフが気に入らないのならフォントを変える。
       #$x_axis_font="HGRGE.TTC";         ←コメントを外す。グリフが気に入らないのならフォントを変える。
       #$x_label_font="HGRGE.TTC";        ←コメントを外す。グリフが気に入らないのならフォントを変える。
       #$y_axis_font="HGRGE.TTC";         ←コメントを外す。グリフが気に入らないのならフォントを変える。
       #$y_label_font="HGRGE.TTC";        ←コメントを外す。グリフが気に入らないのならフォントを変える。

カーラーテーブルの設定

色の設定は16進数（#16進数）で行いますが、X Windows System のカーラーテーブル（rgb.txt）があればカラー名（redとかblueとか）でも指定できるようになります。Graph.pmのGD::Graph::colour::read_rgbを書き換えてください。

       # 無い時は#16進数。
       #GD::Graph::colour::read_rgb("/usr/openwin/lib/X11/rgb.txt");
       #GD::Graph::colour::read_rgb("/usr/X11R6/lib/X11/rgb.txt");
       #GD::Graph::colour::read_rgb("./plugin/graph/rgb.txt");

まず、プラグインを設置して動作確認してから、フォントやカラーテーブルの変更を行ってください。

 プラグインの設定

複数行プラグイン、attachプラグイン、ref_imageプラグインが有効になっていないのならば、“プラグイン管理”画面で有効にしてください。

graphプラグインを“プラグイン管理”画面で有効にしてください。

 使い方

基本

graphプラグインはブロックプラグインです。

{{graph オプション
ソース
}}

オプション

複数のオプションを指定する時には、,（カンマ）で区切ってください。

name=名前
【必須】グラフの名前を指定します。ページ内で重複しないユニークな単語（英数字＿）でないといけません。
CSVファイル
.csv（小文字）で終わる文字列はCSVファイルのファイル名であると認識します。.はURLエンコード（%2E）しないでください。指定しないとcsvファイルは読み込まずに、ソースだけで処理します。
ファイルフォーマット
gif、jpg、pngのうちのどれかを指定してください。ディフォルトはpngになります。
noimage
グラフ画像（{{ref_image 画像}}）を出力しません。画像ファイル自体は生成します。
outtable
グラフのデータ（ラベルとデータ）をwikiテーブルとして出力します。

noimage outtable 結果
指定する 指定する wikiテーブルだけが出力されます。
指定する 指定しない 何も出力されません。（多分、意味はないです。）
指定しない 指定する グラフとwikiテーブルが出力されます。
指定しない 指定しない グラフだけが出力されます。ディフォルト。

ソース、CSVファイル

ソースもCSVファイルも記述書式は同じです。

まず、CSVファイルを読み込んで、後からソースを読み込みます。

#
$コマンド,設定値（,設定値,…）
ラベル（,ラベル,…）
データ（,データ,…）
　
空行は無視します。
#
先頭が#な行はコメント行になります。
コマンド
GD::Graphに対する様々な指定を行います。必ず$で始まります。
ラベル
ラベルです。コメント行、コマンド行、空行でない最初の行をラベルとします。
データ
データです。コメント行、コマンド行、空行、ラベルでない行です。

最初の例では“,東京,大阪,神奈川,サッポロ,広島”がラベルになります。“,10,20,30,40,50”がデータになります。

一文字目の,（カンマ）は有っても無くてもどちらでもかまいません。“,東京,大阪,神奈川,サッポロ,広島”と“東京,大阪,神奈川,サッポロ,広島”は同じになります。

コマンド

GD::Graphに対する様々な指定を行います。必ず$で始まります。

基本的にはGD::Graphのコマンドと同じですが、一部異なります。

graphプラグイン固有のコマンド

,$width          ,画像のサイズ（幅）
,$height         ,画像のサイズ（高さ）
,$graph_type     ,グラフの種類（lines/bars/points/linespoints/area/mixed/pie）
,$legen          ,凡例（カンマで区切って複数指定）
,$title          ,タイトル,フォントサイズ（省略可）
,$x_label        ,Xラベル ,フォントサイズ（省略可）
,$y_label        ,Yラベル ,フォントサイズ（省略可）
,$vaule_font_size,値ラベルのフォントのサイズ

GD::Graphのsetコマンド

setコマンドに記述可能なコマンドは大抵記述可能です。

主なsetコマンド
,$t_margin ,数値
,$b_margin ,数値
,$l_margin ,数値
,$r_margin ,数値
,$y_max_value ,数値
,$y_tick_number ,数値
,$y_label_skip ,数値
,$types ,リスト（lines/bars/points/linespoints/area/mixed/pie）
,$cumulate ,0/1
,$line_types ,リスト（1/2/3/4）
,$line_width ,数値
,$markers ,"リスト（1/2/3/4/5/6/7/8）
,$marker_size ,数値
,$bar_width ,数値
,$bar_spacing ,数値
,$bgclr ,#16進数
,$fgclr ,#16進数
,$boxclr ,#16進数
,$dclrs ,リスト（#16進数）
,$accentclr ,#16進数
,$shadowclr ,#16進数
,$shadow_depth ,数値

GD::Graphのsetコマンドに関しては、http://search.cpan.org/~mverb/GDGraph-1.43/Graph.pm#Options_for_all_graphsを参照してください。全てのコマンドをチェックしたわけではないので、全てを保証する事はできませんが、大抵はOKなハズです。

 事例

グラフの例を示します。設定の参考にしてください。

棒グラフ

一番最初の例のとおり、ディフォルトが棒グラフなので、nameオプション（とCSVファイル）を指定して、後はダラダラとラベルとデータを記述すればとりあえずね棒グラフになります。

ちょっと寂しいので、色々と追加しましょう。

//ラベル、データをwikiテーブルとしても出力する。
{{graph name=graph2,outtable
#画像幅
,$width,800
#画像高さ
,$height,200
#グラフのタイトル、24point
,$title,XXな人の数,24
#凡例
,$legend,2001年,2002年,2003年
#X軸のラベル、16point
,$x_label,都府県,16
#Y軸のラベル、16ponit
,$y_label,人数,16
#棒の幅
,$bar_width,30
#棒の間隔
,$bar_spacing,10
#影の色
,$shadowclr,#888888
#影の深さ
,$shadow_depth,5
#最初がラベル
,東京,大阪,神奈川,サッポロ,広島
#ここからデータ
,10  ,20  ,30    ,40      ,50
,20  ,30  ,40    ,50      ,60
,30  ,40  ,50    ,60      ,70
}}

複合グラフ

棒グラフと折れ線グラフの複合ブラフの例です。

{{graph name=graph3
#先頭のカンマは無くても良い
$width,500
$height,300
$graph_type,mixed
$title,2006年度1Qのホームページの状況
$legend,アクセス数,利益率
$x_label,月別の変化,16
$y_label,アクセス数と利益率の変化,10
$bar_width,30
$bar_spacing,10
#一つ目のデータが棒グラフ、２つ目のデータが点付きの折れ線グラフ
$types,bars,linespoints
04月,05月,06月,07月,08月,09月
45  ,35  ,30    ,40      ,50
11  ,8   ,60    ,10      ,20
}}

円グラフ

{{graph name=graph4
#円グラフ
,$graph_type,pie
,$width,400
,$height,250
,$title,XXな人の数,24
,$shadow_depth,5
#値（円グラフのラベル）のフォントサイズ
,$value_font_size,30
,東京,大阪,神奈川,サッポロ,広島
,10  ,20  ,30    ,40      ,50
}}

特殊効果のオプション

{{graph name=graph5
#X軸が縦の棒グラフ
,$graph_type,hbars
,$width,500
,$height,250
,$title,XXな人の数,24
,$legend,2001年,2002年,2003年
#凡例の配置RT=右上
,$legend_placement,RT
,$x_label,都府県,16
,$y_label,人数,16
,$bar_width,30
,$bar_spacing,10
#目盛りの表示
,$long_ticks,1
#データの表示
,$show_values,1
#値が縦書き
$values_vertical,1
#グラフの積算
$cumulate,1
,東京,大阪,神奈川,サッポロ,広島
,10  ,20  ,30    ,40      ,50
,20  ,30  ,40    ,50      ,60
,30  ,40  ,50    ,60      ,70
}}

CSVファイル

{{graph name=graph6,m.csv
#ソースで設定を追加する事も可能
}}

 出力画像ファイル名について

graphプラグインは、グラフ画像をattachファイルとして出力します。オプションとして“noimage”が指定されていない時には、ref_imageプラグインを使用して表示します。

出力画像のファイル名は、CSVファイルの有無で変わります。

CSVファイルが有る時
ファィル名(拡張子無し)名前.画像の拡張子
CSVファイルが無い時
名前.画像の拡張子

名前はオプションname=で指定した文字列です。

拡張子はオプションで指定したgif、jpg、pngのどれかです。

graphプラグイン以外でattachファイルを扱う時には、重複しないようにname=を指定してください。

 負荷低減に関しての提案

本graphプラグインは、プラグインが記述されているページが表示される度にグラフ（出力画像ファイル）を生成します。グラフ作成に要する負荷がどれだけかかるかは正直に言ってわかりませんが、塵も積もればとも言いますし、負荷が低い事は良い事だと思います。ページ表示のレスポンスも気になります。

グラフのデータが頻繁に変わる事は一般にはあまりないと思います。そこで、グラフを作成するページと表示するページを分けてしまう方法があります。即ち、CSVファイルをattachしてgraphプラグインを実行するページと、生成されたグラフ（出力画像ファイル）をref_iamgeで表示するページ（普段はこちらを参照する）を作ります。普段使いのページは単にattchされた画像ファイルを表示するだけですから、graphプラグインを実行するよりも、ずっと低負荷です。

グラフだらけのページを作らない限り、大丈夫かもしれませんが…

 制限

グラフ生成に関する制限

  • 2軸のラベルは使えません。
  • フォントは固定です。ソース、CSVでは変更できません。

プラグインの動作に関する制限

  • 編集中のプレビューでは、nameの重複チェックが正しく動作しない事があります。一旦、保存してください。
  • PDFには出力出来ません。（複数行プラグインの制限）
  • エラーチェックは意図的に実施していない箇所があります。意図した表示にならない時には、TYPOなどが考えられます。
  • 不要なグラフ（画像ファイル）の削除はattachプラグインで行ってください。

【おまけ】

 WindwosXPでActivePerlでの導入

初めに

開発している何にもないSolaris2マシンでは色々とインストールしなければなりませんでしたが、WindowsXPではActivePerlのモジュールをインストールするだけでOKです。、

PPMを起動する。

コマンドプロンプトからppmを起動します。

F:\fswiki>ppm

リポジトリを確認する。

モジュールがあるサイトの事をリポジトリと言います。標準のリポジトリにはGD::Graphモジュールはありませんので、GD::Graphの置いてあるリポジトリを追加する必要があります。

HELPを開いてAdditional Repositoriesを選択してください。The University of Winnipeg's 5.8 PPM repositoryのURL（http://theoryx5.uwinnipeg.ca/ppms/package.lst）をCOPYします。

　　##HELP開かなくても、上のURLをCOPYすればOK

リポジトリを追加する。

PPMに戻って、メニュー【Edit→Preferences→Repositoreis】を選択してください。

LocationにCOPYしたリポジトリのURLを入れてください。Nameは識別の為に使っているだけなので、判りやすいコメントを入れてください。

【Add】ボタンを押すと、リポジトリが追加されます。（確認の為に、暫く時間が掛かります。）

追加されたら【OK】ボタンを押して、TOPに戻ります。

モジュールのインストール

TOPウインドウのPackage Nameからインストールするパッケージを選択(Mark)して、インストールします。

次のモジュールをインストールしてください。

File::Slurp
GD
GD::Graph
GD::TextUtil

完了

 コメント

  • 有用なプラグインだと思います．ただ設置方法が面倒そうで... どなたかVineLinux3.2あたりで設置・運用実績あったらご教授ください． - kasai (2006年10月13日 12時31分21秒)
  • vineユーザではないので詳しくはわかりませんが、root権があるなら http://www.vinelinux.org/manuals/using-rpm.html 辺りを参考にパッケージで File::Slurp と GD::Graph を入れれば他の必要なモジュールやライブラリが入ると思いますので、後はBugTrack-plugin/203を参考に複数行プラグインとこのプラグインを入れればOKだと思います。 - typer (2006年10月13日 21時13分23秒)
  • FedraCore5で「undefined symbol: Perl_sv_2iv_flags」とかいうエラーが出てうまく動かなかったです。あまり情報が無かったので悩んでましたが、perlを5.8.8-4から5.8.8-5に上げたらうまく動きました。 - tactica (2006年11月04日 10時49分48秒)
お名前： コメント：
Image1.jpg Image2.jpg Image3.jpg Image4.jpg graph1.png graph2.png graph3.png graph4.png graph5.png graph_V1.0.zip mgraph6.png

最終更新時間：2006年11月04日 10時49分48秒

メニュー

関連リンク

入門Wiki〜みんなで投稿/編集できるWebの作りかた

検索

キーワード

Google

Google

最新

2023/3/29

2023/3/22

2023/1/31

2023/1/23

2022/10/15

Copyright (C) 2002 Naoki Takezoe
Powered by FreeStyleWiki3.6.5 with Perl5.020002