jQueryのjqPlotプラグインで、凡例付きの複数系列の散布図（分布図・点グラフ）を作る方法。
- seriesColorsオプションで、系列の色を指定。
- axesオプション内のxaxisのticksプロパティに、X軸上の目盛りを指定。
- axesオプション内のxaxisのtickOptionsのformatStringプロパティで、X軸上の目盛りのラベルの形式を指定。
- axesオプション内のxaxisのlabelプロパティに、X軸のラベルを指定。
- axesオプション内のyaxisのticksプロパティに、Y軸上の目盛りを指定。
- axesオプション内のyaxisのtickOptionsのformatStringプロパティで、Y軸上の目盛りのラベルの形式を指定。
- axesオプション内のyaxisのlabelプロパティに、Y軸のラベルを指定。
- seriesDefaultsオプション内のshowLineプロパティに「false」を指定し、系列の線を非表示にする。
- seriesDefaultsオプション内のmarkerOptionsのsizeプロパティに「6」を指定し、マーカーのサイズを小さくする。
- seriesDefaultsオプション内のmarkerOptionsのshadowプロパティに「false」を指定し、系列の線を非表示にする。
- seriesオプション内のlabelプロパティで、系列ラベルの文字列を指定。
- legendオプション内のshowプロパティに「true」を指定し、系列ラベルを表示。
- legendオプション内のplacementプロパティに「outside」を指定し、系列ラベルの表示位置をグラフの外側にする。
- legendオプション内のlocationプロパティに「ne」を指定し、系列ラベルの表示位置をグラフの右上にする。
- gridオプション内のborderWidthプロパティに「0.5」を指定し、グリッドの幅を細くする。
- gridオプション内のshadowプロパティに「false」を指定し、グリッドの影を非表示にする。
実装例（サンプル）
実装例（サンプル）のソースコード
読み込み
パスは、それぞれ、アップロードした場所を指定する。
<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>
<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>
<link rel="stylesheet" type="text/css" href="jquery.jqplot.min.css" />
読み込むファイル。
JavaScript
<script>
jQuery( function() {
jQuery . jqplot(
'jqPlot-sample',
[
[ [ 49, 99 ], [ 73, 51 ], [ 48, 78 ], [ 88, 86 ], [ 43, 69 ], [ 92, 63 ], [ 62, 59 ], [ 31, 48 ], [ 26, 95 ], [ 69, 82 ], [ 46, 58 ], [ 52, 26 ], [ 85, 25 ], [ 72, 25 ], [ 21, 44 ], [ 87, 81 ], [ 50, 86 ], [ 24, 90 ], [ 64, 95 ], [ 76, 100 ], [ 95, 53 ], [ 79, 11 ], [ 46, 81 ], [ 42, 13 ], [ 92, 98 ], [ 78, 10 ], [ 34, 18 ], [ 37, 43 ], [ 45, 100 ], [ 13, 90 ], [ 27, 21 ], [ 55, 20 ], [ 97, 46 ], [ 26, 73 ], [ 64, 71 ], [ 81, 58 ], [ 38, 97 ], [ 65, 75 ], [ 63, 35 ] ],
[ [ 75, 27 ], [ 72, 36 ], [ 77, 18 ], [ 49, 20 ], [ 42, 83 ], [ 32, 67 ], [ 40, 39 ], [ 59, 80 ], [ 16, 48 ], [ 73, 78 ], [ 92, 6 ], [ 35, 7 ], [ 55, 8 ], [ 62, 1 ], [ 75, 67 ], [ 23, 81 ], [ 40, 6 ], [ 4, 5 ], [ 29, 50 ], [ 31, 3 ], [ 76, 42 ], [ 16, 26 ], [ 1, 63 ], [ 30, 61 ], [ 32, 20 ], [ 34, 65 ], [ 37, 35 ], [ 52, 13 ], [ 5, 56 ], [ 55, 45 ], [ 57, 70 ], [ 80, 79 ], [ 66, 76 ], [ 62, 21 ], [ 82, 60 ], [ 47, 46 ], [ 33, 58 ], [ 26, 27 ], [ 51, 74 ] ]
],
{
seriesColors: [ 'red', 'blue' ],
axes: {
xaxis: {
ticks: [ 0, 25, 50, 75, 100 ],
tickOptions: {
formatString: '%d点',
},
label:'理科'
},
yaxis: {
ticks: [ 0, 25, 50, 75, 100 ],
tickOptions: {
formatString: '%d点',
},
label:'数学'
}
},
seriesDefaults: {
showLine: false,
markerOptions: {
size: 6,
shadow: false,
},
},
series: [
{ label: 'Ａクラス' },
{ label: 'Ｂクラス' }
],
legend: {
show: true,
placement: 'outside',
location: 'ne',
},
grid: {
borderWidth: 0.5,
shadow: false,
}
}
);
} );
</script>
jQuery( function() {
jQuery . jqplot(
'jqPlot-sample',
[
[ [ 49, 99 ], [ 73, 51 ], [ 48, 78 ], [ 88, 86 ], [ 43, 69 ], [ 92, 63 ], [ 62, 59 ], [ 31, 48 ], [ 26, 95 ], [ 69, 82 ], [ 46, 58 ], [ 52, 26 ], [ 85, 25 ], [ 72, 25 ], [ 21, 44 ], [ 87, 81 ], [ 50, 86 ], [ 24, 90 ], [ 64, 95 ], [ 76, 100 ], [ 95, 53 ], [ 79, 11 ], [ 46, 81 ], [ 42, 13 ], [ 92, 98 ], [ 78, 10 ], [ 34, 18 ], [ 37, 43 ], [ 45, 100 ], [ 13, 90 ], [ 27, 21 ], [ 55, 20 ], [ 97, 46 ], [ 26, 73 ], [ 64, 71 ], [ 81, 58 ], [ 38, 97 ], [ 65, 75 ], [ 63, 35 ] ],
[ [ 75, 27 ], [ 72, 36 ], [ 77, 18 ], [ 49, 20 ], [ 42, 83 ], [ 32, 67 ], [ 40, 39 ], [ 59, 80 ], [ 16, 48 ], [ 73, 78 ], [ 92, 6 ], [ 35, 7 ], [ 55, 8 ], [ 62, 1 ], [ 75, 67 ], [ 23, 81 ], [ 40, 6 ], [ 4, 5 ], [ 29, 50 ], [ 31, 3 ], [ 76, 42 ], [ 16, 26 ], [ 1, 63 ], [ 30, 61 ], [ 32, 20 ], [ 34, 65 ], [ 37, 35 ], [ 52, 13 ], [ 5, 56 ], [ 55, 45 ], [ 57, 70 ], [ 80, 79 ], [ 66, 76 ], [ 62, 21 ], [ 82, 60 ], [ 47, 46 ], [ 33, 58 ], [ 26, 27 ], [ 51, 74 ] ]
],
{
seriesColors: [ 'red', 'blue' ],
axes: {
xaxis: {
ticks: [ 0, 25, 50, 75, 100 ],
tickOptions: {
formatString: '%d点',
},
label:'理科'
},
yaxis: {
ticks: [ 0, 25, 50, 75, 100 ],
tickOptions: {
formatString: '%d点',
},
label:'数学'
}
},
seriesDefaults: {
showLine: false,
markerOptions: {
size: 6,
shadow: false,
},
},
series: [
{ label: 'Ａクラス' },
{ label: 'Ｂクラス' }
],
legend: {
show: true,
placement: 'outside',
location: 'ne',
},
grid: {
borderWidth: 0.5,
shadow: false,
}
}
);
} );
</script>
- seriesColors
系列の色を配列で順番に指定。
- axes
軸に関するオプション。
- xaxis
X軸に関するオプション。
- ticks
X軸上の目盛りを指定。
指定しない場合は、自動的に計算する。
- tickOptions
目盛りに関するオプション。
- formatString
目盛りのラベルの形式を指定。
%d： 整数%f： 小数%g： データ値%s:文字列
- label
- yaxis
Y軸に関するオプション。
- ticks
Y軸上の目盛りを指定。
指定しない場合は、自動的に計算する。
- tickOptions
-
- formatString
目盛りのラベルの形式を指定。
%d： 整数%f： 小数%g： データ値%s:文字列
- label
- seriesDefaults
グラフの種類や、系列の色、太さなど、系列に関する初期設定オプション。
- color
- showLine
系列の線を表示するか。「true」は表示。「false」は非表示。初期設定値は、「true」。
- markerOptions
系列のマーカーに関するオプション。
- size
系列のマーカーの大きさ。初期設定値は、「9」。
- series
各系列ごとに指定する系列に関するオプション。１つ目の系列から順に、配列で指定する。
- label
- grid
グリッドに関するオプション。
- borderWidth
グリッドの幅。初期設定値は、「2.0」。
- shadow
グリッドの影を表示するか。「true」は表示。「false」は非表示。初期設定値は、「true」。
HTML
<div id="jqPlot-sample" style="height: 300px; width: 300px;"></div>