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

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

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

ソース

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

線グラフ

デモ

JavaScript

$(function () { var d1 = []; for ( var i = 0; i <= 14; i += 0.5 ) d1.push( [i, Math.sin(i) + 3] ); var d2 = []; for ( var i = 0; i <= 14; i += 0.5 ) d2.push( [i, i] ); var d3 = [[0, 12], [3, 12], [7, 2.5], [12, 2.5], [14, 2.5]]; var data = [ { label: "data1", data: d1 }, { label: "data2", data: d2 }, { label: "data3", data: d3 } ]; var options = { series: { lines: { show: true }, points: { show: true } }, legend: { noColumns: 2 }, xaxis: { tickDecimals: 0 }, yaxis: { min: 0 }, selection: { mode: "x" } }; var plot = $.plot( $("#placeholder" ), data, options ); });

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

$(function () {   var d1 = []; for ( var i = 0; i <= 14; i += 0.5 ) d1.push( [i, Math.sin(i) + 3] );   var d2 = []; for ( var i = 0; i <= 14; i += 0.5 ) d2.push( [i, i] );   var d3 = [[0, 12], [3, 12], [7, 2.5], [12, 2.5], [14, 2.5]];       var data = [         {             label: "data1",             data: d1         },         {             label: "data2",             data: d2         },         {             label: "data3",             data: d3         }     ];       var options = {         series: {             lines: { show: true },             points: { show: true }         },         legend: { noColumns: 2 },         xaxis: { tickDecimals: 0 },         yaxis: { min: 0 },         selection: { mode: "x" }     };       var plot = $.plot( $("#placeholder" ), data, options ); });

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

(d1、d2、d3)

 

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

要するに

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

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

 

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

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

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

(options)

 

これらを

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

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

 

棒グラフ

デモ

JavaScript

$(function () { var d1 = []; for ( var i = 0; i <= 10; i += 1 ) d1.push( [i, parseInt(Math.random() * 30)] ); var d2 = []; for ( var i = 0; i <= 10; i += 1 ) d2.push( [i, parseInt(Math.random() * 30)] ); var d3 = []; for ( var i = 0; i <= 10; i += 1 ) d3.push( [i, parseInt(Math.random() * 30)] ); var data = [ { label: "data1", data: d1 }, { label: "data2", data: d2 }, { label: "data3", data: d3 } ]; var options = { series: { stack: 0, lines: { show: false, fill: true, steps: false }, bars: { show: true, barWidth: 0.6 } } }; $.plot( $( "#placeholder" ), data, options ); });

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

$(function () {       var d1 = [];     for ( var i = 0; i <= 10; i += 1 )         d1.push( [i, parseInt(Math.random() * 30)] );       var d2 = [];     for ( var i = 0; i <= 10; i += 1 )         d2.push( [i, parseInt(Math.random() * 30)] );       var d3 = [];     for ( var i = 0; i <= 10; i += 1 )         d3.push( [i, parseInt(Math.random() * 30)] );       var data = [         {             label: "data1",             data: d1         },         {             label: "data2",             data: d2         },         {             label: "data3",             data: d3         }     ];       var options = { series: { stack: 0, lines: { show: false, fill: true, steps: false }, bars: { show: true, barWidth: 0.6 } }     };   $.plot( $( "#placeholder" ), data, options ); });

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

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

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

bars: { show: true }

を追記する必要がある。

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

 

円グラフ

デモ

JavaScript

$(function () { var data = [ { label: "data1", data: 10}, { label: "data2", data: 30}, { label: "data3", data: 90}, { label: "data4", data: 70}, { label: "data5", data: 80}, { label: "data6", data: 110} ]; $.plot($("#placeholder"), data, { series: { pie: { show: true } } }); });

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

$(function () {   var data = [ { label: "data1",  data: 10}, { label: "data2",  data: 30}, { label: "data3",  data: 90}, { label: "data4",  data: 70}, { label: "data5",  data: 80}, { label: "data6",  data: 110} ];       $.plot($("#placeholder"), data, { series: { pie: { show: true } } });   });

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

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

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

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

オプションとして

pie: {show: true }

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

 

尚、HTMLは共通で

XHTML

<div id="placeholder"></div>

1	<div id="placeholder"></div>

だけ。