入力に応じリアルタイムで変わる円グラフと棒グラフを作る

2017年03月16日 17時00分更新

文● 加藤兄　プログラム作成･監修●松下浩則

●登場人物

尾地定数（おじ･さだかず）自称「日曜プログラマー」。芽衣のおじ。

開発芽衣（かいほつ･めい）尾地のめいで、近所に住む中学生。

おじ　3月14日発売の週刊アスキーNo.1118の『JavaScriptの部屋』では、入力した値によってリアルタイムに変化するグラフを作ったね。
めい　私は“動的”っていう言葉を覚えたかな。
おじ　ほう。どんな意味だった？
めい　ようするに動きのあるウェブページのことなんでしょ？
おじ　うーん、まぁそうなんだけど、たとえばGIFアニメのアイコンがピョコピョコ動いているだけで、変化のないようなのは動的とは言えないかな。
めい　じゃあ、ユーザーの入力や状況に応じてリアルタイムに変化のあるウェブページ、とかそういう感じ？
おじ　まぁ、そんな感じ。その入力を読み取って計算して結果を表示するのがJavaScriptの役目というわけだね。
めい　スライダーを動かしたら、それに合わせて円グラフの割合が変わるっていうのはちょっと面白かった。

おじ　その入力するためのスライダーや、テキストボックスなんかも、分割する数に応じてあとから作り出していたね。オレはそっちにびっくりしたよ。入力するデータの数を、あらかじめ5個とか何個って制限つけなくていいんだってことだよね。
めい　キャンバスの四角を描くメソッドを使って、棒グラフも作れたんだった。

おじ　そう。これでキャンバスのメソッドは、線を描く、円弧を描く、四角（矩形）を描くの3つを覚えたね。座標の概念さえ理解すれば、基本的にはどんな絵でも図でも描くことができるよ。
めい　ふっふっふ……キャンバスは見切ったな。
おじ　まぁ、やっと入口に立ったところだと思うけどね。
めい　でも今回は、円グラフも棒グラフも描けるようにしたおかげでプログラムが長くなっちゃったって、松下師匠も言ってたね。
おじ　長いっつったって、たかだか208行だけど。