jqPlot Charts and Graphs for jQuery
手頃なグラフを作ってY軸「80」の横線に色を付けます。
プラグインの読込はCDNからしています、ダウンロードが面倒だったので・・・・。
- 環境
- OS : macOS Sierra Version 10.12.6
- ブラウザ : Chrome Version 59.0.3071.115 (Official Build) (64-bit)
- JQuery : 1.9.1
- jqPlot : 1.0.9
1. jqPlotで折れ線グラフを作る
html
<!DOCTYPE html>
<html>
<head>
<title>MyJqPlot</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="js/myJqPlot.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/jquery.jqplot.min.css">
</head>
<body>
<div id="chart" style="height: 300px; width: 400px;"></div>
</body>
</html>
myJqPlot.js
var allSeries = [[[ 1, 83 ], [ 2, 61 ], [ 3, 79 ], [ 4, 88 ], [ 5, 62 ], [ 6, 75 ]]];
var options = {
title: 'jqPlotでY軸の横線に色を付ける方法',
};
$(document).ready(function(){
$.jqplot("chart", allSeries, options);
});
2. jqplot.canvasOverlay.min.js を読み込む
jqplot.canvasOverlay.js とは・・・
jqPlotのプラグインの1つで、グラフに線を描けるようになります。
html
<!-- 省略:変更なし -->
<head>
<title>MyJqPlot</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="js/myJqPlot.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.canvasOverlay.min.js"></script>
<!-- 省略:変更なし -->
3. canvasOverlayオプションを追加する
- showプロパティ(グラフに線を描き加えるか)に「true」を指定
- objectsのhorizontalLineのyプロパティ(横線を描き加えるYの値)に「80」を指定
myJqPlot.js
// 省略:変更なし
/**
* 横線の設定.
* @type {Object}
*/
var myHorizontalLine = {
horizontalLine: {
y: 80
}
};
var options = {
title: 'jqPlotでY軸の横線に色を付ける方法',
canvasOverlay: {
show: true,
objects: [myHorizontalLine]
}
};
// 省略:変更なし
4. Y軸特定の横線に色を付ける
- objectsのhorizontalLineのcolor(横線の色)プロパティに「red」を指定
myJqPlot.js
// 省略:変更なし
/**
* 横線の設定.
* @type {Object}
*/
var myHorizontalLine = {
horizontalLine: {
y: 80,
color: 'red'
}
};
// 省略:変更なし
5. Y軸の線っぽく見せるためにobjectsのhorizontalLineプロパティにちょっと工夫する
5-1. 横線の太さを細くする
- lineWidthプロパティ(横線の太さ)に「0.5」を指定
myJqPlot.js
// 省略:変更なし
var myHorizontalLine = {
horizontalLine: {
y: 80,
color: 'red',
lineWidth: 0.5
}
};
// 省略:変更なし
5-2. 横線の影をなくす
- shadowプロパティ(横線の影を表示するか)に「false」を指定
myJqPlot.js
// 省略:変更なし
var myHorizontalLine = {
horizontalLine: {
y: 80,
color: 'red',
lineWidth: 0.5,
shadow: false
}
};
// 省略:変更なし
5-3. 横線と端の隙間をなくす
方法1. xminプロパティとxmaxプロパティを使う
- xminプロパティ(描き加える水平線の最小のXの値)に「0」を指定
- xmaxプロパティ(描き加える水平線の最大のXの値)に「7」を指定
myJqPlot.js
// 省略:変更なし
var myHorizontalLine = {
horizontalLine: {
y: 80,
color: 'red',
lineWidth: 0.5,
shadow: false,
xmin: 0,
xmax: 7
}
};
// 省略:変更なし
方法2. (非推奨)xOffsetプロパティを使う
xOffsetプロパティの使用は、非推奨です。
xoffset
DEPRECATED. Set the margins on the legend using the marginTop, marginLeft, etc. properties or via CSS margin styling of the .jqplot-table-legend class.
jqplot.core.js#Legend.xoffset
が、本家サイトのSampleでも使われているのでご紹介します。
- xOffsetプロパティ(水平方向のオフセット値)に「0」を指定
myJqPlot.js
// 省略:変更なし
var myHorizontalLine = {
horizontalLine: {
y: 80,
color: 'red',
lineWidth: 0.5,
shadow: false,
xOffset: 0
}
};
// 省略:変更なし