数式グラフエディター

• はじめに
• 基本的な使い方
• editの操作方法
• グラフについて
• 数式について
• その他

グラフについて

グラフ描画エンジンについて

当アプリはグラフ描画にSVGGraph.jsというライブラリを使用しています。

基本描画

以下をコピーして、edit.htmlを開き、白い部分に貼り付けて『プレビュー』で確認してください。

[title=graph1] [graph1]setRange(-4, 6, -2, 8); axis('full', 1, 1, 0, 0); &[graph1]line( 0, 0, 5, 6); circle(1,0,2); [graph1]clear; dot(3, 7); plot('y=2*x*x',-1,1); [graph1]clearall; dot(5, 7); plot('y=2*x*x'); text( 0, 6,'図中文字列', 'center');

• setRangeコマンドはグラフの描画範囲を定義します．setRange(x軸の最小値、x軸の最大値、y軸の最小値、y軸の最大値)
• axisコマンドは軸を描きます。
• clearコマンドは軸を残してすべての図を消去します。
• clearallコマンドは軸も含めてすべての図を消去します。
• lineコマンドは線を描きます。line(始点x座標, 始点y座標, 終点x座標, 終点y座標)
• circleコマンドは円を描きます。circle(中心のx座標, 中心のy座標, 半径)
• dotコマンドは点を描きます。dot(x座標, y座標)
• plotコマンドは関数のグラフを描きます。plot('y=f(x)')
• plotコマンドでは定義域も指定できます。plot('y=f(x)', 定義域の始点, 定義域の終点)
• textコマンドは図中文字列を表示します。text(x座標, y座標, '表示したい文字', '座標に対する文字列の相対的な位置')
• その他の図形描画コマンドはgraph（描画）メニューからも選べます。

描画スタイル設定１

以下をコピーして、edit.htmlを開き、白い部分に貼り付けて『プレビュー』で確認してください。

[title=graph2] [graph1]setRange(-4, 6, -2, 8); axis('full', 1, 1, 0, 0); &[graph1]線色='red'; line( 0, 0, 5, 6); &[graph1]破線; circle(1,0,2); &[graph1]線太さ=4; plot('y=2*x*x'); &[graph1]マーカー色='blue'; dot(4,2);

• 線色='色'で線の色を設定します。
• 線の種類は、実線か破線か点線で指定できます。
• 線太さ=数値で線の太さを指定します。
• マーカー色='色'で点や矢印の色を指定します。
• その他の図形装飾コマンドはgraph（設定）メニューからも選べます。

一度設定したスタイルは、その後、別の指定で上書きするまで有効です。一時的にスタイルを変更したい場合は、次の描画スタイル設定２の方法を使います。

描画スタイル設定２

以下をコピーして、edit.htmlを開き、白い部分に貼り付けて『プレビュー』で確認してください。

[title=graph3] [graph1]setRange(-4, 6, -2, 8); axis('full', 1, 1, 0, 0); &[graph1]線色='red'; 線太さ=5; circle( 0 , 0, 2); [graph1]【線色='blue'; 線太さ=1; 点線; circle( 0 , 4, 2);】 [graph1]circle( 5, 0, 2)_'purple'; [graph1]circle( 5, 4, 2);

• 全角の【　】で囲まれた範囲で設定したスタイルは、その中でのみ有効です。
• circle( 5, 0, 2)_'purple'のように、描画コマンドの直後に_'色'とすると、その図形の色のみ設定できます。

グラフに使用する式の書き方

以下をコピーして、edit.htmlを開き、白い部分に貼り付けて『プレビュー』で確認してください。

[title=graph4] [graph1]setRange(-5, 5, -5, 5);axis('full', 1, 1, 0, 0); &[graph1]plot('1/x'); [graph1]clear;plot('y=x*x*x')_'red'; [graph1]clear;plot('y=Math.pow(x,3)')_'blue'; [graph1]clear;plot('y=Math.sin(x)',0, Math.PI);

• かけ算・割り算はそれぞれ半角記号の*、/で表します。（※注意※ かけ算記号*は、コマンドによって省略することもできますが、省略しない方が安全です。）
• sinやlogなどの関数はMath.sin、Math.logと表します。その他の関数は、Javascriptリファレンスを参考にしてください。
• べき乗はMath.powを使います。たとえば、Math.pow(x,3)はxの３乗を意味します。
• Math.PIは円収率πを表します。

パラメーター機能 ・ アニメーション ・ 軌跡

以下をコピーして、edit.htmlを開き、白い部分に貼り付けて『プレビュー』で確認してください。

[title=graph5] [graph1]setRange(-5, 5, -5, 5);axis('full', 1, 1, 0, 0); &[graph1,para($b=0)]plot('x*x+$b'); [graph1,para($b=1)]plot('x*x+$b')_'red'; [graph1,anim($b,1→2,time=1)]plot('x*x+$b')_'blue'; text(-4,-2,'b='+omission($b,2)); [graph1,anim($t,0→2*Math.PI,time=2)]clear; kisekiplot('x=2*Math.cos($t),y=2*Math.sin($t)');

• 定数の値を変化させたグラフを比較したいときなど、同じ式を何度も書くときには、パラメーター機能が便利です。式の中に$bのように$をつけた文字を入れ、行頭のgraph1（またはgraph2）のすぐあとに,para($b=1)のようにします。（この場合、式中の$bに1が代入されたことになります。）
• さらにパラメーターを動的に変化させ、アニメーションさせることもできます。行頭のgraph1（またはgraph2）のすぐあとに,anim($b,1→2,time=1)とします。かっこのなかには、対象の文字, 初期値→終了値, time=アニメーション時間（秒）を記述します。
• このときの、パラメーターの値をグラフ中に表示するには、text(-4,-2,'b='+omission($b,2));とします。-4,-2は表示する座標、$bの後ろの2は小数第２位まで表示するという指示です。
• 軌跡もアニメーションと同様のパラメーター操作で表示できますが、媒介変数表示の関数しか対応していません。

その他グラフについて

グラフのコマンド等についてのより詳しい解説は、SVGGraph.jsが参考になります。