図・動画作成プロット
科学技術や自然科学系の WEB サイトでは，プロット (グラフ) 必要になることがあります．ここでは gnuplot を使い美しいプロットを作成し，WEB サイトに載せる方法を示します．
目次
はじめに
自然科学や工学系の WEB サイトを作成する場合，どうしてもプロットを載せたくなります．Excel でプロットを作成する人は多いですが，これはかなりダサいです．あくまで主観ですが，論文や正式な文書で Excel のプロットを見ると，脱力感は半端ではありません．ここでは，比較的簡単に美しく仕上がる gnuplot をつかい WEB サイトに載せるプロットを作成します．
gnuplot による SVG
ここでは，SVG フォーマットで出力された gnuplot の図(プロット)を WEB ページに掲載する方法を示します．
SVG ファイルの作成
プロットサンプル
WEB サイトで使う図はラスター形式よりもベクター形式が望ましいです．拡大/縮小しても，図がボケたり荒くなったりしないからです．さまざまなベクター形式の中で，WEB ページに掲載可能なフォーマットは SVG に限られます．ここでは，gnuplot を使い SVG フォーマットのプロットファイルの作成方法を示します．まずは具体例です．
svg フォーマットのプロットを作成する gnuplot スクリプト
001 #==================================================== 002 # plot 003 #==================================================== 004 set terminal qt 005 set sample 2**10 006 set pointsize 0.5 007 set xzeroaxis 008 set yzeroaxis 009 010 #---- x axis ------- 011 set xrange [-10:10] 012 set xtics border mirror in scale 2,1 font ",22" -10,5 013 set mxtics 5 014 set format x "%.0f" 015 set xlabel "{/Helvetica:Italic x}" font ",36" rotate parallel 016 017 #---- y axis ------- 018 set yrange [-1.2:1.2] 019 set ytics border mirror in scale 2,1 font ",22" -1.5,0.5 020 set mytics 5 021 set format y "%.1f" 022 set ylabel "{/Helvetica:Italic y}" font ",36" rotate parallel 023 024 #--- plot ------------- 025 plot sin(x) with lines lc rgb "blue" lw 2.0 notitle 026 027 #==================================================== 028 # postprocessor for makeing a plot file 029 #==================================================== 030 pause -1 "push [Enter] key to quit" 031 set terminal svg enhanced standalone mouse solid 032 set output "sin.svg" 033 replot 034 unset output
このリストの 031 行で，ターミナルを 様々なオプションを指定した svg に変更しています．引き続く 032 行で svg ファイル名を，033 行でプロットを出力します．
以上で，正弦波のプロットのファイルが作成できます．後述する図1に，このプロットを示します．
SVG オプション
この gnuplot の svg ターミナルのオプションを以下に示します．
set terminal svg {size <x>,<y> {|fixed|dynamic}}
{{no}enhanced}
{fname "<font>"} {fsize <fontsize>}
{mouse} {standalone | jsdir <dirname>}
{name <plotname>}
{font "<fontname>{,<fontsize>}"}
{fontfile <filename>}
{rounded|butt|square} {solid|dashed} {linewidth <lw>}
{background <rgb_color>}
- size <x> と <y> は，プロットサイズ指定です．デフォルトの dynamic を指定するとビューワーによるサイズ変更が可能なファイルが生成されます．fixed にすると固定サイズで，サイズを指定しなくてはなりません．
- enhanced オプションは拡張テキストモード指定です．これを使うと様々な文字を使うことができます．
- fname <font> でフォントを指定できます (デフォルト:Arial)．<fontsize> はフォントサイズ [pt] の指定です (デフォルト:12)．ただし，SVG ビューワーは他のフォントで表示することがあります．
- mouse オプションは gnuplot にマウストラッキングを可能にします．さらに，対応するキーエントリをクリックすることで個々のプロットのオン/オフを切り替えるようになります．これは，デフォルトではローカルディレクトリー「/usr/local/share/gnuplot/<version>/js」のスクリプトが指し示すリンクをインクルードすることで行われます．これは jsdir オプションを使い，ローカルディレクトリーあるいは URL のいずれかを特定することで変えることができます．あるいは，standalone オプションを使うと，外部リソースにリンクするのではなく svg ドキュメントそれ自身の中にマウスコードを埋め込むみます．
- SVGファイルを外部ファイル (例えば: PNGイメージを埋め込むか、web ページあるいは埋め込みドキュメント内の JavaScript コード) と一緒に使用する場合，他の SVG プロットへの参照の競合を避けるために一意の名前が必要です． 一意性を保証するために name オプションを使用してください.
- SVGでは，フォントをSVGドキュメントに直接埋め込んだり，目的のフォントにハイパーテキストをリンクすることができます．fontfile <filename> オプションは，出力される SVG ファイルの <defs> セクションにコピーされるローカルファイルを指定します．このファイル自体にフォントが含まれているか，目的のフォントへのハイパーテキスト参照を作成するのに必要なレコードが含まれています． Gnuplot は GNUPLOT_FONTPATH 環境変数のディレクトリリストを使って要求されたファイルを探します．注意: TrueType あるいは PostScript フォントではなく，svgフォントを埋め込む必要があります．
- linewidth <w> を指定するとは，すべてのラインの太さを変更できます．ラインが<w>倍されます．
WEB ページに載せる
作成された SVG は，以下のようにして html ファイルに取り込みます．
<img src="SVG ファイルへのパス" width="幅 px">
SVG ファイルのパスと幅を記述します．たったこれだけで，SVG ファイルの画像が表示されます(図1)．
|
| 図1: gnuplot で作成した svg フォーマットのプロット |
この図ではちょっとダサいところがあります．プロットに枠が描かれており，それが文字(ここでは x と y)と接触しています．次節ではこれを修正します．
少しクールにする
先に示した図1のプロットの図の枠が小さすぎます．そのため，軸名「x」と「y」と枠の隙間が狭くて，ちょっとかっこ悪くなっています．これは，gnuplot が作成する SVG ファイルには，白い四角形の枠(背景)が描かれているからです．これを gnuplot の広げれば良いのですが，それはできません．gnuplot では枠(背景)のサイズを変更できないからです．そこで，別の手段で SVG ファイルを編集しなくてはなりません．また，編集したファイルを WEB ページにかっこ良く表示させるために，少し工夫が必要です．
SVG ファイルの編集
SVG ファイルは，(1)グラフィックエディター，あるいは(2)テキストエディターを使い編集可能です．どちらでも，背景の編集ができます．
Inkscape
グラフィックエディター Inkscape を使い SVG ファイルを編集します．
テキストエディター
SVG ファイルはテキストファイルなので，適当なエディターで編集可能です．背景を描いている四角形を削除します．この背景を作っているのは，SVG の四角形要素「<rect />」です．これを以下のように，コメントアウトします．
<!-- <rect x="0" y="0" width="600" height="480" fill="#ffffff" stroke="black" stroke-width="1" onclick="gnuplot_svg.toggleCoordBox(evt)" onmousemove="gnuplot_svg.moveCoordBox(evt)"/> -->
HTML へ反映
HTML への反映は，以下のようにします．
<img src="SVG ファイルへのパス" width="幅 px" style="background-color:white; padding:10px">
CSS の style の background-color で背景色を，padding で隙間を指定しています．すると，以下のように表示できます．隙間が拡がり，見た目が良くなります．
|
| 図2: クールにした gnuplot 作成のプロット |
gnuplot による Canvas
ここでは，SVG フォーマットで出力された gnuplot の図(プロット)を WEB ページに掲載する方法を示します．
準備
gnuplot が作成した Canvas ファイルをWEBページに表示させるためには，サーバー側に準備が必要です．gnuplot のいくつかのファイルを適当なディレクトリーに保管します．必要なファイルは，Windows では「インストールフォルダー\gnuplot\share\js\」に，Linux では「/usr/local/share/gnuplot/<version>/js」にあります．ここにあるすべてのファイルをサーバーの適当な場所にコピーします．
Canvas ファイルの作成
プロットサンプル
ここでは，gnuplot を使い Canvas フォーマットのプロットファイルの作成方法を示します．まずは具体例です．
Canvas フォーマットのプロットを作成する gnuplot スクリプト
001 #==================================================== 002 # plot 003 #==================================================== 004 set terminal qt 005 set sample 2**10 006 set pointsize 0.5 007 set xzeroaxis 008 set yzeroaxis 009 010 #---- x axis ------- 011 set xrange [-10:10] 012 set xtics border mirror in scale 2,1 font ",14" -10,5 013 set mxtics 5 014 set format x "%.0f" 015 set xlabel "{/Helvetica:Italic x}" font ",18" rotate parallel 016 017 #---- y axis ------- 018 set yrange [-1.2:1.2] 019 set ytics border mirror in scale 2,1 font ",14" -1.5,0.5 020 set mytics 5 021 set format y "%.1f" 022 set ylabel "{/Helvetica:Italic y}" font ",18" rotate parallel 023 024 #--- plot ------------- 025 plot cos(x) with lines lc rgb "red" lw 2.0 notitle 026 027 #==================================================== 028 # postprocessor for makeing a plot file 029 #==================================================== 030 pause -1 "push [Enter] key to quit" 031 set term canvas size 450,300 name 'cos_plot' 032 set output 'cos.js' 033 replot 034 unset output
このリストの 031 行で，ターミナルを 様々なオプションを指定した Canvas に変更しています．引き続く 032 行で JavaScript ファイル名を，033 行でプロットを出力します．
以上で，余弦波のプロットのファイルが作成できます．後述する図に，このプロットを示します．このスクリプトを実行すると，JavaScriptファイル「cos.js」が作成されます．このファイルには，関数「cos_plot()が書かれています．この関数を実行することで，プロットが描かれます．このスクリプトで作成されるプロットは，後述する「WEB ページに載せる」に示します．
Canvas オプション
この gnuplot の canvas ターミナルのオプションを以下に示します．
set terminal canvas {size <xsize>, <ysize>} {background <rgb_color>}
{font {<fontname>}{,<fontsize>}} | {fsize <fontsize>}
{{no}enhanced} {linewidth <lw>}
{rounded | butt | square}
{dashlength <dl>}
{standalone {mousing} | name '<funcname>'}
{jsdir 'URL/for/javascripts'}
{title '<some string>'}
- size <xsize>, <ysize> (単位: [pixels]) はプロットエリアの大きさの指定です．スタンドアローンモードのデフォルト値は，600[pixels]×400[pixels]です．デフォルトのフォントサイズは10です．
- 注意: ファイル canvastext.js で提供している Hershey simplex Roman フォントのアスキー部分その一つのみが利用できます．これをファイル canvasmath.js で置き換えることもでき，そこには UTF-8 エンコードされた Hershey simplex Greek と math symbols も含まれています．他の端末 (terminal) との一貫性を保つために，フォント名とサイズ指定をすることもできます．しかし今は，フォント名は無視されます．いつかは，ブラウザーが名前付きフォントをサポートするかもしれません．
- デフォルトの standalone モードは，HTML 5 の canvas 要素を使用したプロットをレンダリングする javascript コードを含んだ html を作成します．この html ページは，二つの javascript ファイル canvastext.js と gnuplot_common.js をリンクします．さらに， gnuplot_dashedlines.js は破線 (dashed line) をサポートするために必要です．デフォルトでは，これらはローカルファイルは通常の unix-system のディレクトリ /usr/local/share/gnuplot/<version>/js にあります． 他のプラットフォームではインストールノートを参照してください．これを変更するには，jsdir オプションを使用して別のローカルディレクトリまたは一般的なURLを指定します．後者は，リモートクライアントマシンで表示するためにプロットをエクスポートする場合に適切です．
- キャンバス端末によって生成されたすべてのプロットはマウス操作可能です．追加のキーワード mousing は standalone モードでプロットの下にマウス追跡ボックスを追加します．また，canvastext.js と同じローカルディレクトリーあるいは URL ディレクトリに，javascript ファイル gnuplot_mouse.js と マウス・ボックスのスタイルシート gnuplot_mouse.css にリンクを追加します．
- name オプションは javascript のみを含んだファイルを作ります．それに含まれる javascript 関数とそれが描画するキャンバス要素の id は、次の文字列パラメータから取得されます．コマンド
set term canvas name 'fishplot' set output 'fishplot.js'
は，javascript 関数 fishplot(）を含むファイルを作成します．この関数は，id = fishplot でキャンバスに描画されます．この javascript 関数を呼び出す html ページも上記のように canvastext.js 関数をロードする必要があります．作成された fishplot をラップするための最小限のhtmlファイルは次のようなものです:<html> <head> <script src="canvastext.js"></script> <script src="gnuplot_common.js"></script> </head> <body onload="fishplot();"> <script src="fishplot.js"></script> <canvas id="fishplot" width=600 height=400> <div id="err_msg">No support for HTML 5 canvas element</div> </canvas> </body> </html>このキャンバスに描かれた個々のプロットは，fishplot_plot_1，fishplot_plot_2 などの名前を持ちます．これらは、gnuplot.toggle_visibility("fishplot_plot_2") などの外部の JavaScript ルーチンによって参照できます．
WEB ページに載せる
gnuplot の Canvas ターミナルにより作成された JavaScript ファイルは，以下のようにして HTML ファイルに取り込まれます．
ページ作成情報
参考文献
更新履歴
| 2017年2月18日 | ページの新規作成 |