Flotr2は、折れ線グラフや円グラフなどの20種類以上のグラフを、データを記入するだけで自動的に作ってくれます。パーセントの計算もしなくていいし、グリッドを引くのもオマカセ。頻繁に数値を更新するグラフがあるサイトには最適かも。software社が開発したライブラリ。MITライセンスです。Canvasでグラフを描画するのですが、キャンバスのキャの字も出てきません。Canvasをまったく知らなくて使えちゃうw。javaScriptで入力するので、javaScriptの知識は少しはあったほうがいいかも。(私のような「何となく雰囲気だけで」javaScriptを書いている者でも、そこそこ大丈夫でしたよw)編集可能な表示オプションも豊富で、見た目をけっこうカスタマイズできます。今回のサンプル今回のサンプルはこちら。サンプルページは1ページ、サンプルは4つ用意しました。基本的な使い方はこんなかんじです。HTML上に読み込む。(flotr2.min.jsは一緒に入ってるflotr2.jsがミニファイされたものです)下記は「js」フォルダに入れてみた例。src="js/flotr2.min.js"></script>グラフを入れるdiv要素を用意してidをつける。下記はdivに「graph」というidをつけた例。id="graph"></div>そのdivの縦横サイズをCSSで指定しておきます。div#graphのサイズを500x300pxにした例。auto;}javaScriptでそのidを指定(↓5行目)。関数(function)名はグラフの種類によって異なります(↓1行目)。円グラフ(basic_pie)での例。javaScript内に書きます。グラフの種類によって書き方が違うので、Flotr2サイトでサンプルを確認します。)ソース部分が編集可能なので、いじってプレビュー結果を確認できます。「Run」をクリックすると、プレビューされるので、データの入力方法を確認したり、オプションを試してみたり。できあがったソースをコピペで使えて便利かも。documentation(資料)ページで、基本の使い方が(アッサリだけど)説明されています。このページの後半の「Configuration(設定)」に、デフォルトの設定オプションソースが記載されています。(または、ダウンロードしたフォルダ>flotr2.js>1598行目からにも、同じソースがあります)(このオプションソースは、本記事末尾にも載せています)また、各グラフ特有の表示オプションもあります。これは、ダウンロードしたファイル群の中の「flotr2.js」(flotr2.min.jsと内容は同じ)に書かれているので、こちらも使えば色々カスタマイズできます。それでは、今回作ってみたグラフを、表示オプションの使い方も含めて、以下にメモっておきます。Pie(円グラフ)」(クリックで別ウィンドウで開きます)数値を入力すると、勝手に%で出力して円グラフにしてくれます。オプションで、扇型のすき間をあけたりツメたり、開始の角度を調整したり、グラフ全体の外枠を消したりしてみました。最初に変数d1〜d6にデータを配列で代入。この項目数は、ここでは6個にしてますが、いくつでも。いった具合で、最初は0、次にデータの数値を。この●は%で計算しなくても、ただ数値を書けばOK。勝手に%を計算して円グラフにしてくれます。Pie(円グラフ)の表示オプション編集mouse:{track:true}はマウスオーバーでバリューボックスが出るようにします。デフォルトはfalse。バリューボックスの位置もオプションで変更できます。(今回はデフォのままだけど)pie(37行目)で円グラフ特有のオプションを指定します。explodeは、16行目でも使っている飛び出し度。コレを全体に指定することによって各扇型の間隔が空きます。各扇型が少しずつ離れていますが、ここでは0にしてピッタリくっつけました。startAngleはグラフが始まる角度。これが微妙な位置...。12時ちょっと過ぎくらい?時計の12時のところから始めたいので書き直しました。いじってたらできただけ。笑)legendとはlegend(41行目)とは、グラフのバーの色と項目名を関連づけるリストボックスのこと。すべてのグラフに使えます。legend:{show:true}がデフォルトなので、falseにすれば非表示になります。position:'sw'で左下に配置。nsew(北南東西)で位置を指定するようです。デフォはnw(北西)で左上。backgroundColorで背景色を指定できます。この他、背景の透明度、ボーダーの色、マージンなどもオプション指定できます。Radar(レーダーチャート(多角形グラフ))」これは項目数に合わせて多角形を作ります。項目数が5個なら5角形、6個なら6角形といったかんじで。これも数値を書くだけで自動計算してグラフにしてくれます。//canvasへの描画。//radar特有のオプション。