jqPlotでつくった折れ線グラグにおいてY軸の特定値に引いた横線に色を付ける方法

![Screen Shot 2017-08-14 at 22.06.32.png](https://qiita-image-store.s3.amazonaws.com/0/159761/582a8b9c-e947-56b7-ac0c-b7f3998c6825.png)
[jqPlot Charts and Graphs for jQuery](http://www.jqplot.com/index.php)

手頃なグラフを作ってY軸「80」の横線に色を付けます。
プラグインの読込はCDNからしています、ダウンロードが面倒だったので・・・・。
![Screen Shot 2017-08-17 at 0.31.41.png](https://qiita-image-store.s3.amazonaws.com/0/159761/ca2833f7-ca60-180c-a92d-76d3cafee591.png)

- 環境
    - 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で折れ線グラフを作る
![Screen Shot 2017-08-14 at 22.49.36.png](https://qiita-image-store.s3.amazonaws.com/0/159761/b679b912-e14c-a940-662e-bf9769dbf3bc.png)

```html: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>
```

```JavaScript: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](http://www.jqplot.com/docs/files/plugins/jqplot-canvasOverlay-js.html) とは・・・
jqPlotのプラグインの1つで、グラフに線を描けるようになります。

```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>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.canvasOverlay.min.js"></script>
<!-- 省略:変更なし -->
```

# 3. canvasOverlayオプションを追加する
![Screen Shot 2017-08-14 at 23.05.44.png](https://qiita-image-store.s3.amazonaws.com/0/159761/8294df8d-cc58-828a-8d5f-80a7c36e1fe3.png)

- showプロパティ(グラフに線を描き加えるか)に「true」を指定
- objectsのhorizontalLineのyプロパティ(横線を描き加えるYの値)に「80」を指定

```JavaScript:myJqPlot.js
// 省略:変更なし
/**
 * 横線の設定.
 * @type {Object}
 */
var myHorizontalLine = {
  horizontalLine: {
    y: 80
  }
};

var options = {
  title: 'jqPlotでY軸の横線に色を付ける方法',
  canvasOverlay: {
    show: true,
    objects: [myHorizontalLine]
  }
};
// 省略:変更なし
```
# 4. Y軸特定の横線に色を付ける
![Screen Shot 2017-08-14 at 23.16.00.png](https://qiita-image-store.s3.amazonaws.com/0/159761/5352e46e-eca8-ee35-6bee-cb78300f592a.png)

- objectsのhorizontalLineのcolor(横線の色)プロパティに「red」を指定

```JavaScript:myJqPlot.js
// 省略:変更なし
/**
 * 横線の設定.
 * @type {Object}
 */
var myHorizontalLine = {
  horizontalLine: {
    y: 80,
    color: 'red'
  }
};
// 省略:変更なし
```

# 5. Y軸の線っぽく見せるためにobjectsのhorizontalLineプロパティにちょっと工夫する
## 5-1. 横線の太さを細くする
![Screen Shot 2017-08-17 at 0.12.26.png](https://qiita-image-store.s3.amazonaws.com/0/159761/46a83c3e-7c63-1974-7370-ed09744085cc.png)

- lineWidthプロパティ(横線の太さ)に「0.5」を指定

```JavaScript:myJqPlot.js
// 省略:変更なし
var myHorizontalLine = {
  horizontalLine: {
    y: 80,
    color: 'red',
    lineWidth: 0.5
  }
};
// 省略:変更なし
```
## 5-2. 横線の影をなくす
![Screen Shot 2017-08-17 at 0.19.55.png](https://qiita-image-store.s3.amazonaws.com/0/159761/d3c5d082-f9d0-a48d-d00a-94f1bd4a48ab.png)

- shadowプロパティ(横線の影を表示するか)に「false」を指定

```JavaScript:myJqPlot.js
// 省略:変更なし
var myHorizontalLine = {
  horizontalLine: {
    y: 80,
    color: 'red',
    lineWidth: 0.5,
    shadow: false
  }
};
// 省略:変更なし
```

## 5-3. 横線と端の隙間をなくす
![Screen Shot 2017-08-17 at 0.31.41.png](https://qiita-image-store.s3.amazonaws.com/0/159761/a867e03e-5888-b3aa-c294-1753ad67aeaf.png)
### 方法1. xminプロパティとxmaxプロパティを使う
- xminプロパティ(描き加える水平線の最小のXの値)に「0」を指定
- xmaxプロパティ(描き加える水平線の最大のXの値)に「7」を指定

```JavaScript: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](view-source:http://www.jqplot.com/docs/files/jqplot-core-js.html#Legend.xoffset)

が、本家サイトの[Sample](http://www.jqplot.com/examples/canvas-overlay.php)でも使われているのでご紹介します。

- xOffsetプロパティ(水平方向のオフセット値)に「0」を指定

```JavaScript:myJqPlot.js
// 省略:変更なし
var myHorizontalLine = {
  horizontalLine: {
    y: 80,
    color: 'red',
    lineWidth: 0.5,
    shadow: false,
    xOffset: 0
  }
};
// 省略:変更なし
```

# 参考
- [折れ線グラフの水平の実線をカスタマイズ](http://aungjcs.github.io/my-references/jqplot/ref.html)
- [jqplot.com/examples](http://www.jqplot.com/examples/)