chart.jsでぐりぐり動くグラフを作る - Qiita

こんな風にスライダーをぐりぐりと動かすとそれに応じて表示が変わるグラフをchart.jsを使って作っていく。 ここでは$f(x)=ax^2+bx+c$という関数をプロットすることにする。パラメータとして$a$,$b$,$c$の３つがあるが、それらをスライダーでぐりぐりと動かす。 デモはこちら chart.jsとは？ ここではグラフの描画にchart.jsを使う。 chart.jsとはグラフをブラウザ上で表示するためのJSのライブラリの一つ。 グラフを作るためのライブラリといえばd3.jsが有名だが、より簡単にグラフを書くことに特化したライブラリ。プロットを作るだけなら本当に簡単に書くことができる。 chart.js入門 の記事が参考になる。 またオフィシャルページのサンプル集を見れば、だいたいどんなグラフを作ることができるかわかる。 作成方法 まずはhtmlにスライダーを入れる。 <div