jQueryのjqPlotプラグインによる、データポイントラベル付き縦棒グラフにおいて、値が「0」のデータポイントラベルを表示させない方法。
seriesDefaultsオプション内のpointLabelsのhideZerosプロパティに、trueを指定することで、「0」の値のデータポイントラベルを非表示にできる。
実装例（サンプル）
実装例（サンプル）のソースコード
読み込み
パスは、それぞれ、アップロードした場所を指定する。
<!--[if lt IE 9]>
<script language="javascript" type="text/javascript" src="excanvas.min.js"></script>
<![endif]-->
<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>
<script language="javascript" type="text/javascript" src="plugins/jqplot.pointLabels.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.jqplot.min.css" />
読み込むファイル。
- jquery-1.7.1.min.js
- jquery.jqplot.min.js
- jqplot.barRenderer.min.js
- jqplot.categoryAxisRenderer.min.js
- jqplot.pointLabels.min.js
- jquery.jqplot.min.css
- jqplot.barRenderer.min.js
棒グラフを作るときに必要。
- jqplot.categoryAxisRenderer.min.js
軸をカテゴリ（区分）として扱い、グリッドをカテゴリ区切り線として表示させたいときに必要。
- jqplot.pointLabels.min.js
ポイントデータラベルを表示させたいときに必要。
JavaScript
jQuery( function() {
jQuery . jqplot(
'jqPlot-sample',
[
[ [ '4月', 65 ], [ '5月', 72 ], [ '6月', 0 ], [ '7月', 63 ], [ '8月', 100 ], [ '9月', 86 ] ]
],
{
axes: {
xaxis: {
renderer: jQuery . jqplot . CategoryAxisRenderer,
},
yaxis: {
ticks: [ '0', '25', '50', '75', '100' ],
}
},
seriesDefaults: {
renderer: jQuery . jqplot . BarRenderer,
pointLabels: {
show: true,
location: 'n',
ypadding: -5,
escapeHTML: false,
edgeTolerance: -20,
formatString: '<b style="color: blue;">%d</b>',
hideZeros: true
}
}
}
);
} );
</script>
- axes
軸に関するオプション。
- xaxis
X軸に関するオプション。
- renderer
jQuery . jqplot . CategoryAxisRenderer： X軸をカテゴリとして扱う。
- yaxis
Y軸に関するオプション。
- ticks
Y軸上の目盛りを指定。
指定しない場合は、自動的に計算する。
- 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： ピラミッドグラフ
- pointLabels
データポイントに関するオプション。
- show
データポイントを表示するかどうか。「true」は表示。「false」は非表示。初期設定値は、「false」。
- location
データポイントを配置する位置（方角）。
- nw： 左上
- n： 上
- ne： 右上
- e： 右
- se： 右下
- s： 下
- sw： 左下
- w： 左
- ypadding
データポイントとラベルの間の垂直方向のパディング。
- escapeHTML
データポイントラベルのHTMLをエスケープするか。「true」はエスケープする。「false」はエスケープしない。初期設定値は、「true」。
- edgeTolerance
データポイントラベル表示条件となる、軸からの距離。ピクセル単位の数値で指定する。
負の値を指定すると、グリッドの境界から、はみ出すことができるようになる。
- formatString
データポイントラベルの形式を指定。
%d： 整数%f： 小数%g： データ値%s:文字列
- hideZeros
値が「0」のデータポイントラベルを表示しないか。「true」は非表示。「false」は表示。初期設定値は、「false」。