canvasでグラフを自動生成するJavaScriptライブラリ「flotr2」を使ってみた！
JavaScriptライブラリ「flotr2」を使ったグラフのサンプルを作ってみました。
＊http://humblesoftware.com/flotr2/ で本家のサンプルを見られます。「flotr2」ダウンロードはコチラ。
↑各サンプルをクリックすると、ソースがエディタブルになっているので、いじって構造を確認します。
＊使い方の詳細は、
「ほんっとにはじめてのHTML5：（ちょっとメモ）canvasでグラフを自動生成する「flotr2」が便利！」
適当な数値を入力すると、勝手に％で出力してくれます。
オプションでgrid:{outlineWidth:0}を追加して、外枠を消しています。（デフォはoutlineWidth:1）
こちらも適当に数値を入れると勝手にチャートにしてくれます。
これも数値を入れると勝手にグリッドをひいてグラフにしてくれます。
数値の最低値と最高値が左目盛りの下限上限になるのがデフォなので、デフォルトのままだと見づらいです。
で、オプションでyaxis:{min:35,max:75}を追加して、左目盛りの最小値と最大値を変更しています。
また、grid:{outline:'ns'}を追加して、外枠を上下だけにしています。（デフォはoutline:'nsew'）
上の「折れ線グラフ」のデータをそのまま使っています。
y軸のデフォルトの最小値がnullなので、オプションのyaxis: {min:0}を追加して、左目盛りが0から始まるようにしています。また、title:'任意のテキスト'でタイトルを、subtitle:'任意のテキスト'でサブタイトルもつけてみました。
バーの色も、デフォルトで設定してある5色から変更してみました。
（6色以上になる場合は、グレイ系にするなどして自動生成するようです。円グラフを参照に↑）