Blog

jQueryで簡単にグラフを作る!

2012.11.28Cat:jQuery 役員

jQueryで簡単にグラフを描画する方法。

数値だけの変更でも十分使えるので

コーポレートサイトやプレゼン資料としても使えると思います。

 

ソース

http://code.google.com/p/flot/

 

線グラフ

デモ

x軸とy軸のデータをそれぞれ[x,y]と配列にし、スパンの分だけメインの配列に挿入して2次元配列を作る。

(d1、d2、d3)

 

それをデータの数だけ用意して、これもそれぞれ配列の中に入れる。

要するに

データ -> スパン -> データ軸

という3次元配列を作る。これでデータは完成。

 

次にオプションを設定するが、以下に詳しく書いてある。

http://people.iola.dk/olau/flot/API.txt

こちらも配列で定義する。

(options)

 

これらを

$.plot( ターゲット, データ配列, オプション配列 );

とすれば指定したターゲットにグラフが描画される。

 

棒グラフ

デモ

データの作り方は線グラフと同じ。

棒グラフはメインのjsに加えjquery.flot.stack.jsを読み込む必要がある。

棒グラフにするためにはオプションに

bars: { show: true }

を追記する必要がある。

特に見た目に指定がなければこれだけで棒グラフになる。

 

円グラフ

デモ

円グラフのデータは軸の概念がないので、

{ label: ラベル,  data: データ}

を複数にまとめた2次元配列を作るだけでOK。

円グラフの描画にはメインのjsに加えjquery.flot.pie.jsを読み込む必要がある。

オプションとして

pie: {show: true }

を指定すれば円グラフになる。

 

尚、HTMLは共通で

だけ。

Author Profile

hoshino

ECのことを中心に書きたいと思います。
ネタが無いときはプログラムやデザインのことも書きます。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ