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
  }
};
// 省略:変更なし

1. jqPlotで折れ線グラフを作る

2. jqplot.canvasOverlay.min.js を読み込む

3. canvasOverlayオプションを追加する

4. Y軸特定の横線に色を付ける

5. Y軸の線っぽく見せるためにobjectsのhorizontalLineプロパティにちょっと工夫する

5-1. 横線の太さを細くする

5-2. 横線の影をなくす

5-3. 横線と端の隙間をなくす

方法1. xminプロパティとxmaxプロパティを使う

方法2. (非推奨)xOffsetプロパティを使う

参考