JSXGraphをReactアプリで使う
JSXGraphというグラフを描画するライブラリがある。 JSXGraph - JSXGraph これをReactアプリに組み込みたかったので、jsxgraph-react-jsを使ってみた。 sytabaresa/jsxgraph-react-js: React component library for use Javascript or JessieCode for make JSXGraph boards インストール。 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で使うならこれで十分。