関数のグラフ(Blockly)
「Blockly | Google Developers」のサンプル「Graph」では、「Charts | Google Developers」の
「折れ線グラフ | Charts | Google Developers」を使ってグラフを描画しています。
「Graph」は「y=~」という形しか指定できないようなので、円などの描画はできないようです。
「関数のグラフ」は複数のグラフを表示することができ、「x=~・y=~」という形も指定できるようになっています。
「Graph」を改造して複数のグラフを表示することができ、「x=~・y=~」という形も指定できる「関数のグラフ(Blockly)」を作成しました。
使い方
- (1) グラフを表示する領域
- (2) ブロックを選択する領域(ツールボックス)
- (3) ブロックを表示する領域
- (4) ブロックの領域に読み込むボタン
- (5) サンプルを選択するリスト
- (6) ブロックの領域をテキストにしたものを入力する領域
- (7) ブロックの領域をテキストにしたものを表示する領域
(2)の領域からブロックを選択して(3)の領域にドラッグ&ドロップしてつなげていくと、(1)の領域にグラフを表示することができます。
(3)の領域には最初は「グラフの表示」のブロック
が表示されています。その下に「y=~」のブロック
または「x=~・y=~」のブロック
をつなげていってください。
「y=~」のブロックにはパラメーター x を含む式をつなげてください。x がない場合は「変数の作成」で作成してください。x は -10 から 10 の範囲を動きます。
「x=~・y=~」のブロックにはパラメーター t を含む式をつなげてください。t がない場合は「変数の作成」で作成してください。t は -180 から 180 の範囲を動きます。
(3)の領域の内容をXMLで表したテキストが(7)の領域に表示されます。これをテキストエディタなどにコピー&ペーストして保存しておくと、これを読み出して(6)の領域にコピー&ペーストの後(4)のボタンを押すと(3)の領域を復元することができます。
(5)のリストを選択すると(6)の領域にサンプルのXMLが表示されます。その後(4)のボタンを押すと(3)の領域にサンプルが表示されます。