jQueryのjqPlotプラグインで、特定の値と折れ線の間を塗りつぶす面グラフを作る方法。
- seriesDefaultsオプションのshowMarkerプロパティに「false」を指定し、マーカーを非表示にする。
- seriesDefaultsオプションのfillプロパティに「true」を指定し、折れ線グラフの系列の線の下を塗りつぶす。
- seriesDefaultsオプションのfillToZeroプロパティに「true」を指定する。
- seriesDefaultsオプションのfillToValueプロパティに「-5」を指定し、折れ線グラフの系列の線の下であっても、-5以下は塗りつぶさず、値が-5より小さい値である場合だけ、その値と-5の間を塗りつぶす。
- axesオプションのxaxisのpadプロパティに「0」を指定し、x軸の余白をなくす。
実装例（サンプル）
実装例（サンプル）のソースコード
読み込み
パスは、それぞれ、アップロードした場所を指定する。
<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() {
sample = [ [ 1, 5 ], [ 2, -10 ], [ 3, 4 ], [ 4, 8 ], [ 5, -8 ], [ 6, 2 ] ];
jQuery . jqplot(
'jqPlot-sample',
[
sample
],
{
axes: {
xaxis: {
pad: 0
}
},
seriesDefaults: {
showMarker: false,
fill: true,
fillToZero: true,
fillToValue: -5,
},
}
);
} );
</script>
jQuery( function() {
sample = [ [ 1, 5 ], [ 2, -10 ], [ 3, 4 ], [ 4, 8 ], [ 5, -8 ], [ 6, 2 ] ];
jQuery . jqplot(
'jqPlot-sample',
[
sample
],
{
axes: {
xaxis: {
pad: 0
}
},
seriesDefaults: {
showMarker: false,
fill: true,
fillToZero: true,
fillToValue: -5,
},
}
);
} );
</script>
HTML
<div id="jqPlot-sample" style="height: 300px; width: 300px;"></div>