106.6 Canvas

出力形式 canvas は、HTML5 の canvas 要素上に描画する javascript コマ ンドの集合を生成します。 書式:

     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>'}

<xsize><ysize> は描画領域のピクセル単位でのサイズを設定します。 standalone モードでのデフォルトのサイズは、600x400 ピクセルです。 デフォルトのフォントサイズは 10 です。

注: ファイル canvastext.js で提供している Hershey simplex Roman フォン トのアスキー部分のフォント一つだけが利用できます。これは、ファイル canvasmath.js で置き換えることもでき、そこには UTF-8 エンコードされた Hershey simplex Greek と math symbols も含まれています。他の出力形式に 合わせて、font "name,size" の形式も使えるようになっています。今の ところ name のフォント名部分は無視されますが、そのうちにブラウザが名 前付きフォントをサポートしだすでしょう。

デフォルトの standalone モードは、HTML 5 の canvas 要素を使用してグ ラフを描画するような javascript コードを含む HTML ページを生成します。 その HTML ページは、2 つの必要な javascript ファイル 'canvastext.js'、 'gnuplot_common.js' にリンクします。点線をサポートするためにはさらに追 加ファイル 'gnuplot_dashedlines.js' が必要です。デフォルトではそれらは ローカルファイルへのリンクで、Unix 互換のシステムでは通常はそれらディ レクトリ /usr/local/share/gnuplot/<version>/js にあります。他の環境に ついては、インストールに関する注意を参照してください。この設定は、オプ ション jsdir に別のローカルディレクトリ、あるいは一般的な URL を指定 することで変更できます。グラフをリモートクライアントのマシンで見れるよ うにする場合は、通常は後者の設定が適切でしょう。

canvas 出力形式で生成される描画はすべてマウス操作可能です。キーワード mousing を追加すると、standalone モードのグラフの下にマウストラッ キングボックスをつけます。これは、canvastext.js が置かれているのと同 じローカルディレクトリ、または URL 内の、'gnuplot_mouse.js' という javascript ファイルへのリンクと 'gnuplot_mouse.css' というマウスボック スに関するスタイルシートも追加します。

オプション name は、javascript のみを含むファイルを一つ生成します。 それが含む javascript 関数と、それが描画する canvas 要素の id の両方は、 以下の文字列パラメータから取られます。例えば以下のコマンド

     set term canvas name 'fishplot'
     set output 'fishplot.js'

は、javascript 関数 fishplot() を含むファイルを生成し、その関数はグラ フを id=fishplot の canvas 上に描画します。この 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 等となります。外部の javascript ルーチンでそれらを参照 することもできます。例: gnuplot.toggle_visibility("fishplot_plot_2")

竹野茂治@新潟工科大学
2019-05-30