jQueryのjqPlotプラグインで、ツールチップ風ハイライト表示付き縦棒グラフを描く方法。
実装例(サンプル)
4月
5月
6月
7月
8月
9月
0
20
40
60
80
100
実装例(サンプル)の動作について
縦棒(バー)にマウスカーソル(マウスポインタ)を合わせると、Yの値を、ツールチップ風に表示する。
実装例(サンプル)のソースコード
読み込み
パスは、それぞれ、アップロードした場所を指定する。
<script language="javascript" type="text/javascript" src="jquery-1.7.1.min.js"></script>
<!--[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.highlighter.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.jqplot.min.css" />
<!--[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.highlighter.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.highlighter.min.js
- jquery.jqplot.min.css
JavaScript
<script>
jQuery( function() {
jQuery . jqplot(
'jqPlot-sample',
[
[ [ '4月', 65 ], [ '5月', 72 ], [ '6月', 74 ], [ '7月', 63 ], [ '8月', 85 ], [ '9月', 90 ] ]
],
{
seriesDefaults: {
renderer: jQuery . jqplot . BarRenderer,
},
axes: {
xaxis: {
renderer: jQuery . jqplot . CategoryAxisRenderer,
}
},
highlighter: {
show: true,
showMarker: false,
tooltipLocation: 'n',
tooltipOffset: -7,
tooltipAxes: 'y',
formatString: ' %s '
}
}
);
} );
</script>
jQuery( function() {
jQuery . jqplot(
'jqPlot-sample',
[
[ [ '4月', 65 ], [ '5月', 72 ], [ '6月', 74 ], [ '7月', 63 ], [ '8月', 85 ], [ '9月', 90 ] ]
],
{
seriesDefaults: {
renderer: jQuery . jqplot . BarRenderer,
},
axes: {
xaxis: {
renderer: jQuery . jqplot . CategoryAxisRenderer,
}
},
highlighter: {
show: true,
showMarker: false,
tooltipLocation: 'n',
tooltipOffset: -7,
tooltipAxes: 'y',
formatString: ' %s '
}
}
);
} );
</script>
- 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
: ピラミッドグラフ
- axes
軸に関するオプション。
- xaxis
X軸に関するオプション。
- renderer
jQuery . jqplot . CategoryAxisRenderer
: X軸をカテゴリとして扱う。
- highlighter
ハイライトに関するオプション。
- show
ハイライトを表示するか。「true」を指定すると表示。「false」を指定すると非表示。初期設定値は「false」。
- showMarker
マーカーを表示するか。「true」を指定すると表示。「false」を指定すると非表示。初期設定値は「true」。
- tooltipLocation
ツールチップを表示する位置。
- nw: 左上
- n: 上
- ne: 右上
- e: 右
- se: 右下
- s: 下
- sw: 左下
- w: 左
- tooltipOffset
ハイライトからツールチップのピクセル単位のオフセット値。初期設定値は「2」。
- tooltipAxes
ツールチップに表示する値。
x
: Xの値を表示。y
: Yの値を表示。both
: XとYの値を表示。xy
: XとYの値を表示。yx
: YとXの値を表示。
- formatString
ツールチップの形式を指定。
HTML
<div id="jqPlot-sample" style="height: 300px; width: 300px;"></div>