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

jqPlotで棒グラフを描こう

JavaScriptでグラフが描けるライブラリ「jqPlot」を使って、レスポンシブな棒グラフを描くレッスンを行いました。

基本的な描画コードは次の通りです。

var objGraph = $.jqPlot('描画先のタグのID', [グラフのデータ], {描画オプション});

レスポンシブにするには、ブラウザのウィンドウサイズが変更されるたびにグラフを再描画します。

$(window).on('resize', function(){
objGraph.replot();
});

jqPlot()関数は生成したグラフのオブジェクトを返すので、グローバル変数で受け取っておいて、
リサイズイベント発生時にreplot()関数を呼び出せばOKです。