jQueryのjqPlotプラグインで、負の値（マイナスの値）を含む面グラフを作る方法。
- seriesDefaultsオプションのshowMarkerプロパティに「false」を指定し、マーカーを非表示にする。
- seriesDefaultsオプションのfillプロパティに「true」を指定し、折れ線グラフの系列の線の下を塗りつぶす。
- seriesDefaultsオプションのfillToZeroプロパティに「true」を指定し、折れ線グラフの系列の線の下であっても、0以下は塗りつぶさず、値が負の値である場合だけ、0と負の値の間を塗りつぶす。
- 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, -7 ], [ 3, 4 ], [ 4, 8 ], [ 5, -5 ], [ 6, 5 ] ];
jQuery . jqplot(
'jqPlot-sample',
[
sample
],
{
seriesDefaults: {
showMarker: false,
fill: true,
fillToZero: true,
},
axes: {
xaxis: {
pad: 0
}
},
}
);
} );
</script>
jQuery( function() {
sample = [ [ 1, 5 ], [ 2, -7 ], [ 3, 4 ], [ 4, 8 ], [ 5, -5 ], [ 6, 5 ] ];
jQuery . jqplot(
'jqPlot-sample',
[
sample
],
{
seriesDefaults: {
showMarker: false,
fill: true,
fillToZero: true,
},
axes: {
xaxis: {
pad: 0
}
},
}
);
} );
</script>
HTML
<div id="jqPlot-sample" style="height: 300px; width: 300px;"></div>