スタートページJavascript

xycoordinate.js 使用解説書
(2)数式グラフ


概要

利用法と制約

  • これらの関数を利用するには、HTML の HEAD 部に、次のスクリプトを記述してください。
      <script src="http://www.kogures.com/hitoshi/jaascript/xycoordinate.js"></script>
  • 次の変数名をグローバル変数として定義しています。
      cw, ch           (canvasタグでのwidthとheight)
      xmin, xmax, ymin, ymax  (X-Y座標系での範囲)
      canvas, ctx
  •        

    実例

    細かい説明をする前に、いくつかの実例を掲げます。これにより機能やパラメータ等に関するイメージを持てるでしょう。

    陽関数 y = f(x)

    function drawExplicitFunction(
        canvas, canvasWidth, canvasHeight,   // Body 部での canvas 名 とサイズ
        funct,                         // f(x)  [ ] で囲む 複数指定可能
        xmin, xmax, ymin, ymax,         // グラフ表示範囲
        {options}
    )
    
    

    exp1

    drawExplicitFunction(
        "cvsexp1", 300, 300, // Body 部の記述に合わせる
                             // <canvas id="cvsexp1" width="300" height="300"></canvas>
        ["x*(x-1)*(x-2)"],   // 複数の式を指定できる。一つのときも [ ] で囲む
                             // 式の記述は、JavaScript の記法による
        -2, 4,  -2, 4,       // xmin, xmax, ymin, ymax
        {                    // すべて省略時設定による。この場合も { } が必要
        }
    );
    


    exp2

    drawExplicitFunction(
        "cvsexp2", 300, 300,
         ["x*(x-1)*(x-2)"], 
         -2, 4,  -4, 8,            // Yの範囲拡大
         {
          XaxisScaleStep :   0.5,  // X軸の目盛りを 0.5 刻み
            XaxisFontFixed : 1,    //   表示を小数点以下1桁
            XaxisFontSize  : 10,   //   フォントを小さく
          YaxisScaleStep :   2,    // Y軸の目盛りを 0.5 刻み
            YgridScaleStep : 1     //   補助線の刻みを1
         }
    );
    
    


    exp3

    drawExplicitFunction(
        "cvsexp3", 300, 300,
        ["x*(x-1)*(x-2)", "x*x"],      // 式を2つに
        -2, 4,  -2, 4,
        {
         lineColor :  ["red", "blue"], // 曲線の色  [ ] で囲む
         lineWidth :  [6],             //     太さ (1つだけだとすべてに共通)
         axisColor :  "green",         // 軸線の色 XaxisColor も YaxisColor も指定したことになる
         grid : false,                 // 補助線(X・Y両方)を表示しない
         canvasFrame :   true,         //  外枠を引く(補助線がないとき、これを与えると図がしまる)
           canvasFrameColor : "green", //     色
           canvasFrameWidth :  4,      //     太さ 
        }
    );
    


    exp4

    drawExplicitFunction(
        "cvsexp4", 300, 300,
        ["x*(x-1)*(x-2)", "x*x"],
        -2, 4,  -2, 4,
        {
         canvasFillColor : "black",   // canvasの色を黒に
           lineColor :  ["yellow", "aqua"], // それに応じてグラフの色
           lineWidth :  [6],
           axisColor :     "white",         //  軸の色
           axisFontColor : "white",         //   目盛り文字の色
         legend : true,              // 凡例の表示
           legendSize :  20,         //   文字のサイズ(色はグラフの色と同じ)
        }
    };
    



    媒介関数 x = f(t), y = g(t)

    function drawParameterFunction(
        canvas, canvasWidth, canvasHeight,    // Body 部での canvas 名
        Xfunct, Yfunct,            // f(t). g(t) [ ] で囲む
        xmin, xmax, ymin, ymax,    // グラフ表示範囲
        tmin, tmax                 // 媒介変数
        {options}
    )
    

    par1

    drawParameterFunction(
        "cvspar1", 300, 300,
        "Math.cos(t)", "Math.sin(3*t)",  // x = cos(t), y = sin(3t)
                         // 媒介関数は1組’グラフ1本)だけ。[ ] で囲まない
                         // 式は JavaScript の記法のこと
        -2, 2,  -2, 2,
        0, 2*Math.PI,   // 0~360°
        {              // 省略時
        }
    );
    
    


    par2

    drawParameterFunction(
        "cvspar2", 300, 300,
        "Math.cos(t)", "Math.sin(3*t)",
        -1.5, 1,5,  -1.2, 1.5,  // グラフを大きく
        0, 2*Math.PI,
        {
         dt : Math.PI/12,    // 刻みを粗くする(5°)と曲線が直線のようになる
         lineColor : "blue", // 線の色。式と同様に [ ] で囲まない
        }
    );
    


    par3

    drawParameterFunction(
        "cvspar3", 300, 300,
        "Math.cos(t)", "Math.sin(3*t)",
        -2, 2,  -2, 2,
        0, 2*Math.PI,
        {
         grid : false,
         lineColor : "blue"  // 線の色を変更
         axisScaleStep : 0.5, // 軸の目盛りを 0.5 にする
         axisFontFixed : 1,   //   小数点以下1桁まで表示
         axisFontSize :  12,  //   文字数がながくなるのでフォントを小さくする
         legend : "topleft", // 凡例を表示
           legendSize :  16
        }
    );
    



    極座標関数 r = f(t), x = r.cos(t), y = r.sin(t)

       
    function drawPolarFunction(
        canvas, canvasWidth, canvasHeight,   // Body 部での canvas 名
        funct,                     // f(t)  [ ] で囲む 複数指定可能
        xmin, xmax, ymin, ymax,    // グラフ表示範囲
        tmin, tmax,                // 角度の範囲
        {options}
    )
    

    pol1

    drawPolarFunction(
        "cvspol1", 300, 300,
        ["Math.cos(2*t)"],
        -1.5, 1.5,  -1.5, 1.5,
        0, 2*Math.PI,
        { }     // すべて省略
    );
    


    pol2

    drawPolarFunction(
        "cvspol2", 300, 300,
        ["Math.cos(2*t)"],
        -1.5, 1.5,  -1.5, 1.5,
        0, 2*Math.PI,
        {
         grid : false,           // いったん、すべての補助線を消す
         Rgrid : true,           // あらためて同心円補助線を引く
           RgridScaleStep : 0.5, //   刻み
         Agrid : true            // 角度の補助線を引く(省略時は30°刻み)
        }
    );
    


    pol3

    drawPolarFunction(
        "cvspol3", 300, 300,
        ["Math.cos(2*t)", "1.2*Math.sin(3*t)"],  // 2つのグラフ
        -1.5, 1.5,  -1.5, 1.5,
        0, 2*Math.PI,
        {
         canvasFillColor : "black",       // canvas 全体の背景色             
         lineColor :  ["white", "aqua"],  // グラフの色
         lineWidth :  [6],                //     太さ (1つだけだとすべてに共通)
         axis : false,                    // 軸関係のすべてを非表示
         legend : true,                   // 凡例の表示
           legendSize: 16,
        }
    };
    



    陰函数 f(x,y) = 0

    function drawImplicitFunction(
        canvas, canvasWidth, canvasHeight,                    // Body 部での canvas 名
        funct,                     // f(x,y)  [ ] で囲む 複数指定可能。表記は Javascript の文法に従う
        xmin, xmax, ymin, ymax,    // グラフ表示範囲
        {options}
    )
    

    imp1

    drawImplicitFunction(
        "cvsimp1", 300, 300,
        ["x*x + y*y - x*y -1"],
        -2, 2,  -2, 2,
        { }     // すべて省略
    );
    


    imp2

    drawImplicitFunction(
        "cvsimp2", 300, 300,
        ["x*x + y*y - x*y -1"],
        -2, 2,  -2, 2,
        {
         dx : 0.05,    // 刻みを大きくすると点がつながらなくなる
         dy : 0.05     // 小さくするT時間がかかる
        }
    );
    


    imp3

    drawImplicitFunction(
        "cvsimp3", 300, 300,
        ["x*x + y*y - x*y -1", "x*x-y*y*y +x*y -1"],      // 式を2つに
        -2, 4,  -2, 4,
        {
         EPS : 0.1    // 0判定値を大にすると線が太くなる
                      // 小さくすると0にならずグラフが表示されない
        }
    );
    


    imp4

    drawImplicitFunction(
        "cvsimp4", 300, 300,
        ["x*x + y*y - x*y -1", "x*x-y*y*y +x*y -1"],      // 式を2つに
        -2, 4,  -2, 4,
        {
         lineColor :  ["red", "blue"], // 曲線の色  [ ] で囲む
         lineWidth :  [6],             //     太さ (1つだけだとすべてに共通)
         grid : false                  // 補助線(X・Y両方)を表示しない
         legend : true,
               legendSize : 16,
         canvasFrame :   true,         //  外枠を引く
           canvasFrameWidth :  4,      //     太さ 
        }
    );
    



    パラメータ

    必須パラメタ

      この順序で与える
                    陽関数 媒介関数 極座標関数 陰関数
        "canvas名", Width, Height,   〇   〇    〇     〇    Body 部での canvas 名 とサイズ
        funct,             〇   ×    〇     〇    f(x)  [ ] で囲む 複数指定可能
        Xfunct, Yfunct,              ×   〇    ×     ×                        // 
        xmin, xmax, ymin, ymax,    〇   〇    〇     〇    グラフ表示範囲
        tmin, tmax,                  ×   〇    〇     ×    媒介変数、角度変数        
    

    {options} パラメタ

    満足するグラフをホールインワンで得られることは稀です。まず省略時設定で作成し、必要に応じてパラメタを追加・変更することが必要です。

      { パラメタ1 ; 値1,   パラメタ2 ; 値2, … } の形式で与える。
    

    全体関連

         パラメタ名   省略時設定    意味
    曲線
         lineColor        ["black"],      // 曲線の色  [ ] で囲み式の個数だけ指定。一つだけだと全式に共通
         lineWidth        [6],            //     太さ  同上
    
         dx             (xmax-xmin)/100,  // 曲線計算の刻み幅 陽関数、陰関数に適用
         dy             (ymax-ymin)/100,  // 曲線計算の刻み幅 陰関数に適用
         dt             (tmax-tmin)/90,   // 曲線計算の刻み幅 媒介関数 極座標関数に適用
     
    canvas全体
         canvasFillColor   "white",       // canvasの色
         canvasFrame       false,         //   外枠の有無
           canvasFrameColor  "black",     //     色 
           canvasFrameWidth  6,           //     太さ
    
    凡例(与えた式をグラフの左上表示)
         legend =            false,       // 凡例の表示 現在は表示位置は左上に限定
           legendSize =       24,         //   文字のサイズ(色はグラフの色と同じ)
    
    

    軸関係

         両軸共通     省略時設定  X軸             Y軸
    軸線 
         axis              true         Xaxis            Yaxis        X軸・Y軸を引く 以下は True のときだけ有効
           axisColor      "black"        XaxisColor       YaxisColor     軸の色
           axisWidth       4             XaxisWidth       YaxisWidth     太さ
    目盛り
         axisScale         axis,        XaxisScale       YaxisScale          目盛り文字表示の有無
           axisScaleStep   0,             XaxisScaleStep   YaxisScaleStep      目盛りの刻み間隔  省略時のとき、システムが適当な値に設定
           axisFontColor   "black",       XaxisFontColor   YaxisFontColor      目盛り文字の色
           axisFontSize    20,            XaxisFontSize    YaxisFontSize         大きさ
           axisFontFixed   0,             XaxisFontFixed   YaxisFontFixed        小数点以下桁数
    補助線
         grid              axis         Xgrid            Ygrid
           gridScaleStep   axisScaleStep, XgridScaleStep   YgridScaleStep      補助線の刻み(省略時はaxisScaleStep)
           gridColor       "gray",        XgridColor       YgridColor            軸の色
           gridWidth       1,             XgridWidth       YgridWidth            太さ
    
    極座標補助線
         同心円補助線   省略時設定      角度補助線   省略時設定
         Rgrid             false        Agrid             false
           RgridScaleStep  axisScaleStep          AgridScaleStep  Math.PI/15
           RgridColor      gridColor              AgridColor      gridColor
           RgridWidth      gridWidth              AgridWidth      gridWidth
    

    グラフ用の補助関数

    刻み幅
       補助線:gridScaleStep, 目盛り:axisScaleStepが省略値(0)のとき
       xmax-xmin の大きさにより、2~5本になるように調整する
         p = XaxisStep();  p{0} 刻み幅  p[1] 小数点以下の桁数
    XaxisStep() 
    YaxisStep() 
    
    軸線を引く
        if (Xaxis) drawLine( … ) のようになる
    drawLine(xmin,0, xmax,0, XaxisColor, XaxisWidth)
    drawLine(0,ymin, 0,ymax, YaxisColor, YaxisWidth)
    
    目盛りの表示
        if (Xaxis) drawXaxisScale( … ) のようになる
         XaxisScaleStep  0点を起点とした刻み幅。XaxisScaleStep=0 のとき XaxisStep で自動計算
         XaxisFontColor  文字の色
         XaxisFontSize   フォントサイズ(px)
         XaxisFontFixed 小数点以下の桁数
    drawXaxisScale(XaxisScaleStep, XaxisFontColor, XaxisFontSize, XaxisFontFixed)
    drawYaxisScale(YaxisScaleStep, YaxisFontColor, YaxisFontSize, YaxisFontFixed)
    
    X-Y系補助線の表示
        if (Xgrid) drawXaxisGrid( … ) のようになる
         XgridScaleStep 0点を起点とした刻み幅。XgridScaleStep=0 のとき XaxisStep で自動計算
         XgridColor      補助線の色
         XgridWidth      太さ
    drawXaxisGrid(XgridScaleStep, XgridColor, XgridWidth)
    function drawYaxisGrid(YgridScaleStep, YgridColor, YgridWidth)
    
    同心円補助線の表示
        if (Rgrid) drawXaxisGrid( … ) のようになる
         RgridScaleStep  0点を起点とした刻み幅。RgridScaleStep=0 のとき XaxisStep で自動計算
         RgridColor      補助線の色
         RgridWidth      太さ
    drawRgrid(RgridScaleStep, RgridColor, RgridWidth)
    
    角度補助線の表示
        if (Rgrid) drawXaxisGrid( … ) のようになる
         AgridScaleStep  30°間隔
         AgridColor      補助線の色
         AgridWidth      太さ
    drawAgrid(AgridScaleStep, AgridColor, AgridWidth)
    
    凡例
        if (legend) rawLegend( … ) のようになる
         funct, Xfunct, Yfunct 式文字列
         lineColor             文字の色はグラフの色と同じ
         legendSize            文字のサイズ
    (媒介関数以外)
    drawLegend(funct,lineColor,legendSize)
    (媒介関数)
    drawLegendParameter(Xfunct, Yfunct, lineColor,legendSize)