Flotってご存知ですか
こんにちは。松下です。
みなさんはFlotというjqueryベースのjavascriptグラフ描画ライブラリををご存知でしょうか？
データ形式はjsonで行うことができ、flashベースのOpenFlashChartのように複雑なことはできないですが、きれいなグラフを簡単に描画することができます。
データのやり取りがjson形式で行うためサーバ側でデータをjsonに加工すれば、あとはライブラリがプロットするだけなので、扱いがかなり楽です。
簡単なHow toをご紹介したいと思います。
まずは簡単に描画してみる
描画の仕方は、flotの描画ライブラリの呼び出し（ $.plot()） 行うだけです。 以下に例を示します。ここでは、第一引数で描画を行う場所、第二引数でデータを設定してライブラリを呼び出しています。
var d1 = [
[1, 96],
[2, 89],
[3, 85],
[4, 90],
[5, 87],
[6, 86],
[8, 83],
[9, 86],
];
var d2 = [
[1, 137],
[2, 135],
[3, 130],
[4, 129],
[5, 120],
[6, 124],
[8, 125],
[9, 126],
];
var data_list = [];
data_list[data_list.length] = {label: "low", data:d1};
data_list[data_list.length] = {label: "high", data:d2};
$.plot($("#placeholder"), data_list);
棒グラフも描画することが可能です。
var d1 = [
[1950, 2535093],
[1955, 2770753],
[1960, 3031931],
[1965, 3342771],
[1970, 3698676],
[1975, 4076080],
[1980, 4451470],
[1985, 4855264],
[1990, 5294879],
[1995, 5719045],
[2000, 6124123],
[2005, 6514751],
[2010, 6906558],
[2015, 7295135],
[2020, 7667090],
[2025, 8010509],
[2030, 8317707],
[2035, 8587050],
[2040, 8823546],
[2045, 9025982],
[2050, 9191287]
];
var data_list = [];
data_list[data_list.length] = {label:'total', data:d1};
var options = {
bars: {
show: true,
barWidth: 3,
align: "center"
}
};
$.plot($("#bar_placeholder"), data_list, options);
判例の位置を変える
flotのコードをみると、判例で指定可能なオプションは以下のようになっています。 このうち、position、及びcontainerオプションを使うことで位置の変更をすることが可能です。 positionオプションは、
legend: {
show: boolean,
labelFormatter: null or (fn: string -> string),
labelBoxBorderColor: color,
noColumns: number,
position: "ne" or "nw" or "se" or "sw",
margin: number of pixels,
backgroundColor: null or color,
backgroundOpacity: number in 0.0 - 1.0,
container: null or jQuery object
}
positionオプションは、凡例を領域内で任意の位置に表示ためのオプションで、以下の内容に設定することが可能です。
- neが右上
- nwが左上
- seが右下
- swが左下
コードでは以下のようにして指定します。このコードでは、左下に配置しています。
var data list = [];
.
.
[略]
.
.
var options = {
legend:{position:'sw'}
};
$.plot($("#placeholder"), data_list, options);
containerオプションは、判例を表示するコンテナでデフォルトnullで、グラフの描画領域内に表示されます。 containerオプションを使うことで判例の表示をグラフ描画領域外に配置することが可能です。
以下にコードサンプルを示します。
var data list = [];
.
.
[略]
.
.
var options = {
legend:{container: $("#container")}
};
$.plot($("#placeholder"), data_list, options);
最後にもう一つ。noColumnsオプションを指定することで、横並びにしたい判例の数を指定できます。 デフォルトでは、判例はすべて縦方向に展開されますが、このオプションを指定することで、同じ行に２個、３個と表示することが可能になります。
以下にコードサンプルを示します。ここでは、１行に２個判例を表示するように設定しています。
var data list = [];
.
.
[略]
.
.
var options = {
legend:{noColumns: 2}
};
$.plot($("#placeholder"), data_list, options);
いかがでしょうか。ブラウザでグラフを扱いたい方は是非おすすめします。
機会があれば、その他のいろいろな使い方をご紹介したいと思います。