jQueryでレスポンシブなグラフを描くレッスン

グラフ描画ライブラリのjqPlotを使ってレスポンシブなグラフを描画するレッスンを行いました。
グラフは通常、HTML5のcanvasタグを使って描画するのですが、canvas内に描画されたグラフィックは、描画された時点で大きさが固定されるので、canvasに対してCSSで width: 100% などと指定してもレスポンシブになりません。

jqPlotには再描画用のreplot()メソッドと破棄用のdestroy()メソッドが用意されているので、ページが表示されたタイミング（loadイベント）やウィンドウサイズが変わったタイミング（resizeイベント）を利用して、これらのメソッドを使い分ければ綺麗なレスポンシブが可能になります。

まずはHTMLから。グラフを挿入するための空要素を用意します。jqPlotはid属性が参照されるので、idを付けます。

<div id="graph"></div>

次にJavaScriptです。

//グラフのオブジェクト格納用
var graph = null;
//グラフが生成済み（nullではない）場合、グラフを破棄する
if (graph) {
	graph.destroy();
}
//棒グラフを描画
var graph_data = グラフのデータを設定する
var graph_options = グラフのオプションを設定する
graph = $.jqplot('bar_graph', [graph_data], graph_options);

//ウィンドウサイズが変わった
$(window).on('resize', function(){
	//グラフを再描画
	graph.replot();
});