このページでは、「JSXGraph」というJavaScriptライブラリを利用して座標軸を描くJavaScriptコードの書き方をまとめてみたいと思います。
なお、JSXGraphの基本的な使い方は「JavaScriptでオブジェクトを描く」のほうにまとめています。
ここでは座標軸を描くコードの部分だけ取り上げます。
まずいくつかの描画結果のサンプルを示します。
最初の例（１番目の例）は何も座標軸についての指示をせずにBoardオブジェクトを生成したものです。
{
boundingbox:[-3, 3, 3, -3],
}
);
boundingboxという属性で画面（描画先のHTMLエレメント）の上下左右に座標値を割り当てただけ（この例では左端が「-3」右端が「+3」上端が「+3」下端が「-3」）で座標軸の描画については何も指定していないのでデフォルトのCopyright表記などが表示されるだけです。
２番目の例はこれに対して座標軸を描く指示を追加したものです。
{
boundingbox:[-3, 3, 3, -3],
axis:true,
showNavigation:false,
showCopyright:false,
}
);
「axis:true」とするとデフォルトスタイルの座標軸を描きます。デフォルトスタイルではどのような間隔で目盛り（Tick）を描くか、どの目盛りに対して座標値を表示するかは画面（描画先のHTMLエレメント）の大きさに合わせて自動的に決定されます。
この例ではついでにCopyright表記と右下のナビゲーションボタンを非表示にしてみました。
３番目の例は自動的に目盛りを細かく描くのをやめさせたものです。
目盛りには２種類あって、座標値が表示される「メジャー目盛り（majorTicks）」と座標値が表示されない「マイナー目盛り（minorTicks）」とがあって、デフォルトではメジャー目盛りもマイナー目盛りも画面の大きさに合わせて描画間隔（描画数ともいえる）が自動的に決められますが、グラフを描く目的によってはこれらの目盛りをどのように描くかも自分で細かく指定したい場合もあります。
そんな場合は「axis:true」として自動的に座標軸を生成させるのではなく、「axis:false」として座標軸の生成を停止した上で次のようにcreateメソッドを使ってAxisを手動（？）で生成します。
board2.create('axis',[[0,0],[1,0]], {ticks: {insertTicks:false, minorTicks:0, }});
board2.create('axis',[[0,0],[0,1]], {ticks: {insertTicks:false, minorTicks:0, }});
'axis'タイプの場合は座標軸が通る２点の座標と、それ以外の属性をcreateメソッドに渡します。上の例では水平のX軸と垂直のY軸を生成しています。
目盛りも自動的に追加（insert）されないように「insertTicks:false」としたうえで、「minorTicks」にゼロを指定しました。こうするとメジャー目盛りについてはデフォルト間隔（1.0）の目盛り以外には自動的に目盛りが追加されなくなるので画面の大きさがどうであろうと整数のところのメジャー目盛りだけが表示され、マイナー目盛りについては２つのメジャー目盛りの間に「０個」のマイナー目盛りを生成するように（すなわちマイナー目盛りは表示されないように）なります。
４番目の例はさらにY軸に対して、メジャー目盛りは「2」おき、マイナー目盛りは「1」おきに描き、また、メジャー目盛りの位置にはグリッドライン（罫線）を描かず、マイナー目盛りの位置にだけグリッドラインを描いています。
board3.create('axis',[[0,0],[1,0]], {ticks:{insertTicks:false, minorTicks:0, }});
board3.create('axis',[[0,0],[0,1]], {ticks:{insertTicks:false, ticksDistance:2, minorTicks:1, majorHeight:10, minorHeight:-1}});
まず「ticksDistance:2」でメジャー目盛りの間隔を座標上の距離で「2」に指定します。（デフォルトは「1」）
さらに「minorTicks:1」とすることで、２つのメジャー目盛りの間に１個のマイナー目盛りを生成するよう指定します。
グリッドラインは実は目盛りの線（目盛りの位置に表示される短い線）と同じものです。「majorHeight」や「minorHeight」がその目盛りの線の長さを指定する属性ですが、線の長さとして「-1」を指定すると端から端まで伸びるグリッドラインになります。逆に「majorHeight」や「minorHeight」に何らかの値（「0」や「1」など）を指定すればその長さの目盛り線が生成され、その代わりにグリッドラインは生成されません。上の例ではメジャー目盛りは長さ「10」の線に、マイナー目盛りの位置にはグリッドラインが描かれます。