JSXGraphというグラフを描画するライブラリがある。
これをReactアプリに組み込みたかったので、jsxgraph-react-jsを使ってみた。
インストール。
TypeScript対応はされていないので、JS用のライブラリを使う。
$ yarn add jsxgraph-react-js
1次関数をグラフ化するときは以下のように実装する。
import React from 'react'
import JXGBoard from 'jsxgraph-react-js'
const Component = () => {
const xmin = -10, xmax = 10, ymin = -10, ymax = 10
const logic = (board) => {
board.suspendUpdate()
const func = (x) => { return x + 1 }
board.create('functiongraph', [func, xmin, xmax], { strokeWidth: 2 })
board.unsuspendUpdate()
}
return (
<JXGBoard
logic={logic}
boardAttributes={{ axis: true, boundingbox: [xmin, ymax, xmax, ymin] }}
/>
)
}
export default Component
logic関数を実装してJXGBoardにわたす。
この関数は引数としてJSXGraphのboardが渡されるので、これに色々追加していく。
JSXGraphと同じように使えるので、スライダーやラベルの表示もできる。
TypeScriptが使えないが、Reactで使うならこれで十分。