jQueryのjqPlotプラグインで作る負の値を含む散布図（分布図・点グラフ）に、斜めの直線を描き加える方法。
実装例（サンプル）
実装例（サンプル）のソースコード
読み込み
パスは、それぞれ、アップロードした場所を指定する。
<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.canvasOverlay.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" />
<!--[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.canvasOverlay.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.canvasOverlay.min.js
- jqplot.pointLabels.min.js
- jquery.jqplot.min.css
JavaScript
<script>
jQuery( function() {
jQuery . jqplot(
'jqPlot-sample',
[
[ [ -38, -65, 'A' ], [ -36, -22, 'B' ], [ -23, 36, 'C' ], [ 51, 63, 'D' ], [ 21, 13, 'E' ], [ 45, -29, 'F' ] ]
],
{
axesDefaults: {
min: -100,
max: 100,
},
seriesDefaults: {
color: '#7dffc7',
showLine: false,
markerOptions: {
size: 16
},
pointLabels: {
show: true,
location: 'n',
ypadding: -12,
}
},
canvasOverlay: {
show: true,
objects: [
{
line: {
lineWidth: 1,
color: 'gray',
shadow: false,
lineCap: 'round',
start: [ -90, -90 ],
stop: [ 90, 90 ]
}
},
{
line: {
lineWidth: 1,
color: 'gray',
shadow: false,
lineCap: 'round',
start: [ -90, 90 ],
stop: [ 90, -90 ]
}
},
{
horizontalLine: {
y: 0,
}
},
{
verticalLine: {
x: 0,
}
}
]
}
}
);
} );
</script>
jQuery( function() {
jQuery . jqplot(
'jqPlot-sample',
[
[ [ -38, -65, 'A' ], [ -36, -22, 'B' ], [ -23, 36, 'C' ], [ 51, 63, 'D' ], [ 21, 13, 'E' ], [ 45, -29, 'F' ] ]
],
{
axesDefaults: {
min: -100,
max: 100,
},
seriesDefaults: {
color: '#7dffc7',
showLine: false,
markerOptions: {
size: 16
},
pointLabels: {
show: true,
location: 'n',
ypadding: -12,
}
},
canvasOverlay: {
show: true,
objects: [
{
line: {
lineWidth: 1,
color: 'gray',
shadow: false,
lineCap: 'round',
start: [ -90, -90 ],
stop: [ 90, 90 ]
}
},
{
line: {
lineWidth: 1,
color: 'gray',
shadow: false,
lineCap: 'round',
start: [ -90, 90 ],
stop: [ 90, -90 ]
}
},
{
horizontalLine: {
y: 0,
}
},
{
verticalLine: {
x: 0,
}
}
]
}
}
);
} );
</script>
- axesDefaults
軸に関する初期設定オプション。
- min
軸の最小値を指定。
- max
軸の最大値を指定。
- seriesDefaults
グラフの種類や、系列の色、太さなど、系列に関する初期設定オプション。
- color
- showLine
系列の線を表示するか。「true」は表示。「false」は非表示。初期設定値は、「true」。
- markerOptions
系列のマーカーに関するオプション。
- size
系列のマーカーの大きさ。初期設定値は、「9」。
- pointLabels
データポイントに関するオプション。
- show
データポイントを表示するかどうか。「true」は表示。「false」は非表示。初期設定値は、「false」。
- location
データポイントを配置する位置（方角）。
- nw： 左上
- n： 上
- ne： 右上
- e： 右
- se： 右下
- s： 下
- sw： 左下
- w： 左
- ypadding
データポイントとラベルの間の垂直方向のパディング。
- canvasOverlay
グラフに描き加える線に関するオプション。
- show
グラフに線を描き加えるか。「true」は表示。「false」は非表示。
- objects
描き加える線の種類ごとに、配列で指定。
- line
直線。
- lineWidth
直線の太さ。
- color
直線の色。
- shadow
直線の影を表示するか。「true」は表示。「false」は非表示。
- lineCap
直線の端の形。
- round：円形
- butt：四角形
- square：四角形
- start
直線の始点。
[ Xの値, Yの値 ]のように、配列で指定。- stop
直線の終点。
[ Xの値, Yの値 ]のように、配列で指定。
- horizontalLine
水平の実線。
- y
水平の実線を描き加えるYの値。
- verticalLine
垂直の実線。
- x
垂直の実線を描き加えるXの値。
HTML
<div id="jqPlot-sample" style="height: 300px; width: 300px;"></div>