GnuplotグラフをWEB用に出力する

新年度が始まってから、妙にGnuplotについて書いた記事のアクセスが多いので、ここは読者に迎合してGnuplotに関する記事を書いてみようと思う。

現在日常的に使用しているPCにGnuplotが入っていなかったので、ダウンロードのため久しぶりにGnuplotの公式ページを訪れてみた。

そこのサポートフォーマットについて見てみると、「mouseable web display formats: HTML5, svg」とあり、どうも知らない間にSVGとHTML5(canvas要素)に対応しているらしい。早速、詳細を確かめるべく公式マニュアルをざっくり読んでみると、次のような記載があった。

CANVAS

set terminal canvas {size , } {background }
{font {}{,}} | {fsize }
{{no}enhanced} {linewidth }
{rounded | butt}
{solid | dashed {dashlength 
}}
{standalone {mousing} | name ''}
{jsdir 'URL/for/javascripts'}
{title ''}

SVG

set terminal svg {size , {|fixed|dynamic}}
{{no}enhanced}
{fname ""} {fsize }
{mouse} {standalone | jsdir }
{name }
{font "{,}"}
{fontfile }
{rounded|butt} {solid|dashed}

要するに、JPEGやPNG、EPSなんかの画像出力と同じようにset terminalでsvgまたはcanvasと指定してあげるとよいということらしい。案外あっけなかった。

せっかくなので、Gnuplotのでもページから拝借した次のスクリプトを出力してみる。

surface1.4.gnu

# set terminal pngcairo  transparent enhanced font "arial,10" fontscale 1.0 size 500, 350 
# set output 'surface1.4.png'
set grid nopolar
set grid xtics nomxtics ytics nomytics noztics nomztics \
 nox2tics nomx2tics noy2tics nomy2tics nocbtics nomcbtics
set grid layerdefault   linetype -1 linecolor rgb "gray"  linewidth 0.200,  linetype -1 linecolor rgb "gray"  linewidth 0.200
set samples 21, 21
set isosamples 11, 11
set title "3D gnuplot demo" 
set xlabel "X axis" 
set xlabel  offset character -3, -2, 0 font "" textcolor lt -1 norotate
set xrange [ -10.0000 : 10.0000 ] noreverse nowriteback
set ylabel "Y axis" 
set ylabel  offset character 3, -2, 0 font "" textcolor lt -1 rotate by -270
set yrange [ -10.0000 : 10.0000 ] noreverse nowriteback
set zlabel "Z axis" 
set zlabel  offset character -5, 0, 0 font "" textcolor lt -1 norotate
splot x**2+y**2, x**2-y**2, x*y, (x**3+y**3)/10

このスクリプトのsplotを実行する前に次のコードを挿入する。

set terminal svg
set output "sample_svg.svg

これで出力したSVGが次のようになる。

つぎにHTML5で出力するときも同様に

set terminal canvas
set output "sample_canvas.html"

この場合はcanvas要素とjavascriptを含んだhtmlファイルが生成される。javascriptファイルだけ生成したい場合はset terminal canvs name "sample_canvas" とする必要がある。また、「canvastext.js」、「gnuplot_common.js」、「gnuplot_mouse.css」が必要となるので、gnuplotインストールディレクトリ以下の「share/js」からコピーし、html内の参照パスを書き換える必要がある。

ちなみに出力はリンク先のようになる。

グラフを公開するときには便利な機能かなと思う。