前書き

小ネタになります。最近は計算プリント作成に解説も追加していますが、その過程でグラフを使う必要に迫られました。結果として採用したのがJSXGraphです。Githubには以下のように紹介されています。

JSXGraph is a cross-browser library for interactive geometry, function plotting, charting, and data visualization in a web browser. It is implemented completely in JavaScript, does not rely on any other library, and uses SVG, canvas, or even the venerable VML. JSXGraph is easy to embed and has a small footprint: approx. 160 KByte if embedded in a web page. No plug-ins are required! Special care has been taken to optimize the performance.

JSXGraphはブラウザ上でインタラクティブな幾何学的配置や関数プロット、チャートの作成やデータの可視化を行えるクロスブラウザなライブラリです。完全にJavaScriptのみで実装されており、他のライブラリに依存せず、SVGやcanvas、さらには由緒正しいVMLなども利用していません。JSXGraphは容易に埋め込み可能で、仮にウェブページに埋め込んでも高々160kBを専有するだけです。プラグインは不要です。パフォーマンスを最適化することに特別な注意を払っています。

以前どこかで書いたかもしれませんが、私はWebサイトをPythonAnywhereの無料プランで展開しており、あまり重いものを突っ込む余裕がないのです。このライブラリはそんな状況にドンピシャリで、非常にお世話になっております。CDNで手軽に利用できるのも至れり尽くせりでした。

手こずったアレコレ

で、本題なのですが、扱っていくなかで手こずる点が何点かあったので、それらをピックアップして書いていくことになります。非常に便利な神ライブラリなのですが、今ひとつ日本語の情報が出てこないのが唯一のネックとなっています。どなたかの参考になれば幸いです。

なお、JSXGraphの導入を含むトータルの解説については、こちらのサイト様が非常にわかりやすかったので、導入を検討されている方は参考にしてみてください。

とはいっても、導入自体はかなり楽で、単に下の諸々を追加するだけです。

// mathjaxの設定
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
// jsxgraphの設定
<link href="//cdnjs.cloudflare.com/ajax/libs/jsxgraph/1.4.5/jsxgraph.min.css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/jsxgraph/1.4.5/jsxgraphcore.js"></script>
// mathjaxのルール設定
<script type="text/x-mathjax-config">
    MathJax.Hub.Config({
        extensions: ["tex2jax.js"],
        jax: ["input/TeX","output/HTML-CSS"],
        tex2jax: {
            inlineMath: [["$","$"],["\\(","\\)"]],
            displayMath: [["$$","$$"],["\\[","\\]"]]
        }
        });
</script>

以下はMathJax、JSXGraphは利用できる状態だと仮定して話を進めます。

1.) textにLaTeX形式を表示する

グラフを表示するのであれば、その式も当然ながらセットで表示したいところです。JSXGraphはそのあたり気が利いていて、普通の式であれば特に何もせずとも数式として表示してくれます。

まずはjxgboxをhtml上に配置します。ざっくりcanvas要素のような使い方をすると捉えてくれればokです。

<div id="jxgbox0" class="jxgbox" style="width: 500px; height: 500px;"></div>

次に、描画部分を作ります。ここではページにアクセスしてロードする時に動くようにしましょう。

window.addEventListener("load", (event)=>{
    // jxgbox0に(-2, 3)が左上隅、(5, -1)が右下隅となる平面を作成。軸も表示
	let jsx0 = JXG.JSXGraph.initBoard("jxgbox0", {axis: true, boundingbox: [-2, 3, 5, -1]}); 
    // y = x^2 - 5x + 6を表示
    jsx0.create('functiongraph', [x => x ** 2 - 5 * x + 6]);
    // (0.5, 0.25)に式を表示
    jsx0.create('text', [0.5, 0.25, 'y=x^2-5x+6']);
});

できあがるグラフはこんな感じです。

簡単な表示で行ける割には、非常にきれいなグラフがかけます。非常に良いですね。

それでは次に頂点を表示してみましょう。

// 頂点(5/2, -1/4)に赤点を配置
jsx0.create('point', [5/2, -1/4], {strokeColor: 'red', name: '(5/2, -1/4)'});

見れないことはないのですが、分数の表示がちょっと微妙ですし、位置も少しずらしたいところです。

こんなときはまずはnameを空の文字列にします。そもそもnameを指定しないと、A,B...自動で命名される仕様だからです。多分表示オプションとかあると思うんですど、見つけられなかったんでこのような対応をしています。

// nameを空っぽに
jsx0.create('point', [5/2, -1/4], {strokeColor: 'red', name: ''});

それとは別にtext要素を微調整しながら配置します。useMathJax: trueを設定しているのがポイントとなります。

// (5/2-0.25, -1/4-0.25)にLaTeX形式で座標を表示
jsx0.create('text', [5/2-0.25, -1/4-0.25, '$$\\left( \\dfrac{5}{2}, -\\dfrac{1}{4} \\right)$$'], {useMathJax: true});

ついでに式の方の表示も修正して、もう一つついでにx,y軸にもそれぞれ名前を表示しておきましょう。フォントサイズなど、諸々をまとめたコードは以下のようになります。

window.addEventListener("load", (event)=>{
    // (-2, 3)が左上隅、(5, -1)が右下隅となる平面を作成。軸も表示
	let jsx0 = JXG.JSXGraph.initBoard("jxgbox0", {axis: true, boundingbox: [-2, 3, 5, -1]}); 
    // x,y軸の名前を表示
    jsx0.create('text', [4.8, 0.2, '$$x$$'], {useMathJax: true});
    jsx0.create('text', [0.2, 2.8, '$$y$$'], {useMathJax: true});
    // y = x^2 - 5x + 6を表示
    jsx0.create('functiongraph', [x => x ** 2 - 5 * x + 6]);
    // (0.2, 0.25)にLaTeX形式のy=x^2 - 5x + 6を表示
    jsx0.create('text', [0.2, 0.25, '$$y=x^2-5x+6$$'], {fontSize: 13, useMathJax: true});
    // 頂点(5/2, -1/4)に赤点を配置
    jsx0.create('point', [5/2, -1/4], {strokeColor: 'red', name: ''});
    // (5/2-0.25, -1/4-0.25)にLaTeX形式で座標を表示
    jsx0.create('text', [5/2-0.25, -1/4-0.25, '$$\\left( \\dfrac{5}{2}, -\\dfrac{1}{4} \\right)$$'], {useMathJax: true});
});

ここから出てくるのが以下のグラフです。最初より少しは見やすくなりましたね。

以上、textにLaTeX形式を用いる方法でした。

2.) 特定の領域を塗りつぶす

時にはグラフを表示するだけではなく、そのグラフで囲まれた領域を示してあげたい場合もあります。今回は例として、2次関数y=x^2と直線y=xの間にできる領域を塗りつぶしていきましょう

jxgboxを配置して、さらにそこにグラフを描きます。また、ロード時に表示する設定もそのままです。ちなみに、boundingboxの設定はxの幅とyの幅が同じになるようにしないと、マス目が歪みます。

let jsx0 = JXG.JSXGraph.initBoard("jxgbox0", {axis: true, boundingbox: [-0.5, 1.8, 1.5, -0.2]});
// y=x^2を-10≦x≦10で表示
let function0_1 = jsx0.create('functiongraph', [x => x ** 2, -10, 10]);
// 同じ範囲でy=xを表示
let function0_2 = jsx0.create('functiongraph', [x => x, -10, 10]);

createしたときの返り値を受け取っているという点で、先程までとは異なっています。作るだけなら不要なのですが、その後利用するときは予め格納しておく必要があります。

次にそれぞれの関数を基準として、inequalityを指定して領域を取ります。inverseがtrueだと下、falseだと上を取ります。
で、最後にcurveintersectionを取ると共通範囲を塗ってくれます。fillColorはそのまま塗るときの色で、fillOpacityはその透明度になります。

// y=x^2より下の領域を示す
let ineq0_1 = jsx0.create('inequality', [function0_1], {inverse: true, fillColor: 'white'});
// y=xより上の領域を示す
let ineq0_2 = jsx0.create('inequality', [function0_2], {inverse: false, fillColor: 'white'});
// ２つの領域の共通範囲を塗る
jsx0.create('curveintersection', [ineq0_1, ineq0_2], {fillColor: 'yellow', fillOpacity: 0.5});

以上になります。ちなみにineq0_1とineq0_2ではfillColorにwhiteを指定していますが、これをやらないと共通範囲以外の場所も塗られてしまいます。

// y=x^2より下の領域を示す
// let ineq0_1 = jsx0.create('inequality', [function0_1], {inverse: true, fillColor: 'white'});
let ineq0_1 = jsx0.create('inequality', [function0_1], {inverse: true});
// y=xより上の領域を示す
// let ineq0_2 = jsx0.create('inequality', [function0_2], {inverse: false, fillColor: 'white'});
let ineq0_2 = jsx0.create('inequality', [function0_2], {inverse: false});

ただ、自動的に色を重ねてくれるので、これはこれでcurveintersectionなしに「範囲が重なった場所はここだよ」と示すのには良いかもしれませんね。

後書き

短いですが、今回は以上となります。いずれもそれなりに詰まったので、どなたかの参考になれば幸いです。分かりづらい部分、誤っている部分があれば、コメント欄で指摘していただければ幸いです。

（忘れなかったら）今後も随時追加していく予定です。

その他参考サイト様

JSXGraph 1.5.0 Reference: Element CurveIntersection