いんちょき通信

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内の参照パスを書き換える必要がある。

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

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

C/C++からgnuplotを使う

C/C++からgnuplotを使うと題しているが、そもそもgnuplotとは何かについて簡単に紹介する。gnuplot公式サイトにあるとおり、"Gnuplot is a portable command-line driven graphing utility" つまり、コマンドラインベースのグラフ描画ツールである。クロスプラットフォームで、Linuxだけではなく、Windows、Mac用のバイナリも用意されている。

gnuplot自体の詳細な使い方は、公式ドキュメントや下に挙げたWebサイトを参照してほしい。ちなみに私が卒論や修論を書いたときには「使いこなすgnuplot」と「LaTeX2e 美文書作成入門 」を見ながら書いたが、「使いこなすgnuplot」の在庫がなくなってきているようだ。

ここからが本題で、C/C++で書いたプログラムの結果をグラフにする場合の作業を考えると、一般に次のようになる。

1. プログラムから結果をCSVなどでファイル出力する。
2. 出力したCSVファイルをgnuplotに入力しグラフを作成する。

作成するグラフが1つや2つのときはちょっとした手間くらいですむが、いろいろな条件で多数のグラフを作成するとなると、なんとかして自動化をしたくなる。スクリプト化してしまうというのも一つの方法で、私もスクリプト化してグラフの画像ファイルを自動生成していた。じゃあスクリプトでとなると話が終わってしまうので、もう一つの方法として、プログラム内からgnuplotを呼び出してしまうという方法がある。

「gnuplot C」や「gnuplot C++」をキーワードとして検索すると、大きく2つの方法があるようだった。

1. system()関数をつかってシェルやコマンドプロンプトにコマンドを送る
2. パイプをつかってgnuplotのプロセスにコマンドを送る

system関数を送る方は事前にスクリプトでも用意しておき、それを呼び出す文字列をsystem関数の引数とすればいい。ただ、事前にスクリプトを用意しておくことを考えると、2のパイプを使って操作した方が汎用性が高く、使い勝手がよさそうに感じた。

まずは大まかな流れを以下に示す。

1. popen (Windowsの場合は_popen)関数でgnuplotのプロセスとの間にパイプを開く。
2. 1で作成したパイプにfprintfなどでgnuplotのコマンドを入力する。
3. fflushを実行し、2でバッファに溜まっているコマンドをgnuplotのプロセスに書き込む。
4. pclose (Windowsの場合は_pclose)関数でgnuplotのプロセスとの間のパイプを閉じる。

実際のコードは次の通り

#include <cstdio>
#include <cstdlib>

using namespace std;

int main(int argc, char* argv[], char* envp[])
{
	FILE* gnuplot = _popen("pgnuplot", "w") //Linuxではpopen
	fprintf(gnuplot, "plot sin(x)\n"); //y=sin(x)を描画する
	fflush(gnuplot); //バッファを書き出す

	return EXIT_SUCCESS;
}

実行すると次のようなグラフが表示される。

このコードは「gnuplot をC/C++から使う方法」の情報を参照した。サイト内にgnuplotクラスを作成したという記述はあったが、ダウンロードはできなかった。また、「凹みTips」では、この方法でgnuplotクラスを作成していた。

また、stdioではなくiostreamを使えないかと調べたところ、「Boost C++ Libraries」のiostreamを使用すれば、うまくいきそうだという情報もあったが、それはまた今度で。

<gnuplot参考サイト>

• TeX Wiki : gnuplotページ 
• gnuplot のページ (Takeno Lab)
• gnuplotスクリプトの解説