jQuery の jqPlot プラグインで作るシンプルな横棒グラフ

投稿日: 2012年2月7日作成者: alphasis

jQueryのjqPlotプラグインの「plugins」フォルダに入っている「jqplot.barRenderer.min.js」を使い、「barDirection」オプションに「horizontal」を指定すれば、横棒グラフを描くことができる。

「plugins」フォルダ内の、「jqplot.categoryAxisRenderer.min.js」を読み込み、Y軸のrendererオプションに、
jQuery . jqplot . CategoryAxisRenderer を指定することで、Y軸をカテゴリ（区分）として扱っている点にも注意。

実装例（サンプル）

実装例（サンプル）のソースコード

読み込み

パスは、それぞれ、アップロードした場所を指定する。

<script language="javascript" type="text/javascript" src="jquery-1.7.1.min.js"></script>

<script language="javascript" type="text/javascript" src="jquery.jqplot.min.js"></script>
<script language="javascript" type="text/javascript" src="plugins/jqplot.barRenderer.min.js"></script>
<script language="javascript" type="text/javascript" src="plugins/jqplot.categoryAxisRenderer.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.jqplot.min.css" />

読み込むファイル。

JavaScript

<script>
jQuery( function() {
jQuery . jqplot(
'jqPlot-sample',
[
[ [ 65, '4月' ], [ 72, '5月' ], [ 74, '6月' ], [ 63, '7月' ], [ 85, '8月' ], [ 90, '9月' ] ]
],
{
seriesDefaults: {
renderer: jQuery . jqplot . BarRenderer,
rendererOptions: {
barDirection: 'horizontal'
}
},
axes: {
yaxis: {
renderer: jQuery . jqplot . CategoryAxisRenderer,
}
}
}
);
} );
</script>

HTML

<div id="jqPlot-sample" style="height: 300px; width: 300px;"></div>

カテゴリー: barRenderer, categoryAxisRenderer, JavaScript, jqPlot, jQuery, グラフ、チャート, プラグイン, 横棒グラフパーマリンク