[PR]当サイトはアフィリエイト広告を利用しています。
はじめに
このとき使ったのがJSXGraphというライブラリ。
基本的な使い方はこちらのサイトで使えるようになります。
(1) @kazhashimoto. “JSXGraph/MathJaxの使い方：関数グラフのプロットと数式のタイプセッティングを行うJavaScriptライブラリ“. Qiita. 2020-11-15. https://qiita.com/kazhashimoto/items/b27a039b22d405dfa146, (参照2022-02-23)
しかしこのまま単純に二つ目のグラフを一つ目のグラフのコピーで作成しようとしたらハマったのでそのことについて記事にします。
グラフの作り方（ひとつめ）
とりあえず前回の記事で登場した一つ目のグラフ。
このために作成したコードが次のようになります。
<div class="graph-wrap" sytle="width: 260px;">
<div id="plot" class="graph" style="width: 100%;height: 260px;"></div>
</div>
<script>let board = JXG.JSXGraph.initBoard('plot', {boundingbox: [ 500, 2300, 530, 1800], axis: true, showNavigation: false, showCopyright: false });
const text_css = 'font-family: "Times New Roman", Times, "serif";
font-style: italic';
board.create('text', [515, 2270, 'max'],{ fontSize: 16, cssStyle: text_css });
board.create('text', [515.5, 1820, 'x=515'],{ fontSize: 16, cssStyle: text_css });
function bezier(x) {return -10 * x * x + 10300 * x- 2650000;}
let graph = board.create('functiongraph', [bezier, 500, 530]);</script>ちなみに無料ブログなどにこのコードを貼り付けるときはJavaScriptの部分の改行を削除してください。
ここまでなら(1)の内容でできると思います。
問題はこれに続けてもう一つグラフを載せる場合です。
グラフの作り方（ふたつめ）
前回の記事では次のようなグラフを載せました。
このコードは次のようになります。
<div class="graph-wrap" sytle="width: 260px;">
<div id="plot2" class="graph" style="width: 100%;height: 260px;"></div>
</div>
<script>let board2 = JXG.JSXGraph.initBoard('plot2', {boundingbox: [ 500, 50, 530, -10], axis: true, showNavigation: false, showCopyright: false });
const text_css2 = 'font-family: "Times New Roman", Times, "serif";
font-style: italic';
board2.create('text', [510.5, 3, 'x=510'],{ fontSize: 16, cssStyle: text_css2 });
board2.create('text', [520.5, 3, 'x=520'],{ fontSize: 16, cssStyle: text_css2 });
board2.create('text', [529.5, 3, 'x'],{ fontSize: 16, cssStyle: text_css2 });
function bezier2(x) {return -10 * x * x + 10300 * x- 2652000;}
let graph2 = board2.create('functiongraph', [bezier2, 500, 530]);</script>一つずつ最初のグラフのスクリプトとの違いを解説していきます。
ひとつめとふたつめの違い
<div id="plot2" class="graph" style="width: 100%;height: 260px;"></div>idのところを「plot」から「plot2」へ変更しました。
board2 = JXG.JSXGraph.initBoard('plot2', {boundingbox: [ 500, 50, 530, -10], axis: true, showNavigation: false, showCopyright: false });「board」から「board2」へ変更しました。
JXG.JSXGraph.initBoardの引数を「plot」から「plot2」へ変更しました。
const text_css2 = 'font-family: "Times New Roman", Times, "serif";「text_css」を「text_css2」に変更しました。
board2.create('text', [510.5, 3, 'x=510'],{ fontSize: 16, cssStyle: text_css2 });「board.create」を「board2.create」に変更しました。
「text_css」を「text_css2」に変更しました。
function bezier2(x) {return -10 * x * x + 10300 * x- 2652000;}「bezier」を「bezier2」に変更しました。
let graph2 = board2.create('functiongraph', [bezier2, 500, 530]);「graph」を「graph2」に変更しました。
「board.create」を「board2.create」に変更しました。
「bezier」を「bezier2」に変更しました。
以上が変更点となります。
要するに最初のグラフの変数と重複しないように変数を割り当て直す作業となるのですが、色々いじったらこれでうまく動いたという話で、解説するより慣れたほうがいいと思われますので、詳細は割愛します。
まとめ
今回はJSXGraphを使って複数のグラフを掲載する方法を解説しました。
数学を使うサイトでは必要な方もいると思いますので、何かのお役に立てれば幸いです。
