jQuery の jqPlot で作る縦棒グラフの棒の幅や影などをカスタマイズ

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

jQueryのjqPlotプラグインで作る縦棒グラフにおいて、棒の幅や影などをカスタマイズする方法。

seriesDefaultsもしくはseriesオプション内のrendererOptions内のプロパティにおいて、棒の幅や影などを指定できる。

実装例（サンプル）

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

読み込み

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

<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',
[
[ [ '4月', 65 ], [ '5月', 72 ], [ '6月', 74 ], [ '7月', 63 ], [ '8月', 85 ], [ '9月', 90 ] ],
[ [ '4月', 38 ], [ '5月', 54 ], [ '6月', 65 ], [ '7月', 89 ], [ '8月', 91 ], [ '9月', 75 ] ]
],
{
axes: {
xaxis: {
renderer: jQuery . jqplot . CategoryAxisRenderer,
}
},
seriesDefaults: {
renderer: jQuery . jqplot . BarRenderer,
rendererOptions: {
barPadding: 8,
barMargin: 10,
barWidth: null,
shadowOffset: 2,
shadowDepth: 5,
shadowAlpha: 0.08,
}
}
}
);
} );
</script>

axes

軸に関するオプション。

xaxis

X軸に関するオプション。

renderer: jQuery . jqplot . CategoryAxisRenderer： X軸をカテゴリとして扱う。

seriesDefaults

グラフの種類や、系列の色、太さなど、グラフ、系列の初期設定。

renderer

系列の生成編集に使うプラグインを指定。

jQuery . jqplot . BarRenderer：棒グラフ
jQuery . jqplot . BezierCurveRenderer：ベジェ曲線グラフ
jQuery . jqplot . BlockRenderer：ブロックチャート
jQuery . jqplot . BubbleRenderer：バブルチャート
jQuery . jqplot . DonutRenderer：ドーナツグラフ
jQuery . jqplot . MeterGaugeRenderer：メーターゲージ
jQuery . jqplot . MekkoRenderer：マリメッコ・チャート
jQuery . jqplot . OHLCRenderer：いかり足、ローソク足
jQuery . jqplot . PieRenderer：円グラフ
jQuery . jqplot . PyramidRenderer：ピラミッドグラフ

rendererOptions

画像生成編集オプション。

barPadding: 同カテゴリ異系列の、隣接する棒と棒の間の距離。初期設定値は「8」。
barMargin: 隣接するカテゴリとの距離。初期設定値は「10」。
barWidth: 棒の幅。「null」を指定すると、自動的に算出する。初期設定値は「null」。
shadowOffset: 棒の端から影へのオフセット。初期設定値は「2」。
shadowDepth: 影の太さ。初期設定値は「5」。
shadowAlpha: 影の不透明度。初期設定値は「0.08」。

HTML

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

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