Highcharts : Y軸目盛の表示がくっついた時の改善案

使ったのは・・・
Highcharts 5.0.7

# 問題の状態
```html:myHighcharts.html
<!DOCTYPE html>
<html>
<head>
    <title>Highchartsの練習</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="http://code.highcharts.com/highcharts.js"></script>
    <script type="text/javascript" src="js/myHighcharts.js"></script>
</head>
<body>
    <div id="barChart" style="width:30%; height:30%;"></div>
</body>
</html>
```

```javascript:myHighcharts.js
/**
* 画面表示時にチャートを作成する.
*/
$(function () {
    var seriesData = [5.08, 2.05, 6.75];
    var barChartOptions = getBarChartOptions(seriesData);
    Highcharts.chart('barChart', barChartOptions);
});

/**
* チャートオブジェクトをオブジェクトを取得する.
* @param  {Array} seriesData チャートに表示するデータ配列.
* @return {Object} チャートオブジェクト.
*/
function getBarChartOptions(seriesData) {
    var yAxisTickInterval = 0.5;
    var yAxisRotation = 0;
    var barChartOptions = {
        chart: {
            type: 'bar'
        },
        title: {
            text: 'Highchartsの練習'
        },
        xAxis: {
            title: {
                text: 'X軸'
            },
            categories: ['でーた１', 'でーた２', 'でーた３']
        },
        yAxis: {
            title: {
                text: 'Y軸',
            },
            labels: {
                format: '{value:.1f}',
                rotation: yAxisRotation
            },
            tickInterval: yAxisTickInterval
        },
        series: [{
            data: seriesData
        }]
    };
    return barChartOptions;
}
```

![Screen Shot 2017-02-16 at 22.48.07.png](https://qiita-image-store.s3.amazonaws.com/0/159761/fccf9658-ea28-1a0a-7f00-83057b138048.png)



# 改善案１
## チャートの幅を広げる
```html:myHighcharts.html
<!DOCTYPE html>
<html>
<head>
    <title>Highchartsの練習</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="http://code.highcharts.com/highcharts.js"></script>
    <script type="text/javascript" src="js/myHighcharts.js"></script>
</head>
<body>
    <div id="barChart" style="width:80%; height:30%;"></div>
</body>
</html>
```

myHighcharts.jsは「問題の状態」と同じ

![Screen Shot 2017-02-16 at 22.52.48.png](https://qiita-image-store.s3.amazonaws.com/0/159761/3d957736-d2c8-5c9a-3d5c-1b6507edfe5f.png)

### デメリット
- チャートが画面に複数あるパーツの１である場合にレイアウトが崩れる


# 改善案２
## 目盛の最小値をデータの値によってに変える
myHighcharts.htmlは「問題の状態」と同じ


```javascript:myHighcharts.js
これより上は「問題の状態」と同じ
function getBarChartOptions(seriesData) {
    var yAxisTickInterval = 0.5;
    var yAxisRotation = 0;
    var yAxisMin = getYAxisMin(seriesData, yAxisTickInterval);
    var barChartOptions = {
        chart: {
            type: 'bar'
        },
        title: {
            text: 'Highchartsの練習'
        },
        xAxis: {
            title: {
                text: 'X軸'
            },
            categories: ['でーた１', 'でーた２', 'でーた３']
        },
        yAxis: {
            title: {
                text: 'Y軸',
            },
            labels: {
                format: '{value:.1f}',
                rotation: yAxisRotation
            },
            tickInterval: yAxisTickInterval,
            min: yAxisMin
        },
        series: [{
            data: seriesData
        }]
    };

    return barChartOptions;
}

/**
* Y軸の最小値を取得する
* @param  {Array} seriesData チャートに表示するデータ配列.
* @return {number} Y軸の最小値.
*/
function getYAxisMin(seriesData, yAxisTickInterval) {
    var yAxisMin = 0;
    for (var i = 0, l = seriesData.length; i < l; i++) {
        var n = seriesData[i];
        if (n != null && !isNaN(n)) {
            if (yAxisMin) {
                yAxisMin = Math.min(yAxisMin, n);
                continue;
            }
            yAxisMin = n;
        }
    }
    yAxisMin = Math.floor(yAxisMin / yAxisTickInterval);
    yAxisMin = yAxisMin * yAxisTickInterval;
    return yAxisMin;
}
```

![Screen Shot 2017-02-16 at 23.39.37.png](https://qiita-image-store.s3.amazonaws.com/0/159761/67f2ea27-a662-3867-c774-4938646837fe.png)


### デメリット
- 目盛で表示する幅がデータによって左右される
- データの値に幅があると結局「...」が表示されたり問題が解決しない

# 改善案３
## 表示する目盛の個数を決める
myHighcharts.htmlは「問題の状態」と同じ


```javascript:myHighcharts.js
これより上は「問題の状態」と同じ
function getBarChartOptions(seriesData) {
    var yAxisTickInterval = 0.5;
    var yAxisRotation = 0;
    var yAxisTickAmount = 7;
    var barChartOptions = {
        chart: {
            type: 'bar'
        },
        title: {
            text: 'Highchartsの練習'
        },
        xAxis: {
            title: {
                text: 'X軸'
            },
            categories: ['でーた１', 'でーた２', 'でーた３']
        },
        yAxis: {
            title: {
                text: 'Y軸',
            },
            labels: {
                format: '{value:.1f}',
                rotation: yAxisRotation
            },
            // tickInterval: yAxisTickInterval, 目盛幅は指定しない。
            tickAmount: yAxisTickAmount
        },
        series: [{
            data: seriesData
        }]
    };

    return barChartOptions;
}
```
 
ここでは「目盛幅(tickInterval)」を設定しません。
:alien:「メモリの数(tickAmount)」と一緒に指定するとうまく行きませんでした。:alien:

![Screen Shot 2017-02-16 at 23.58.03.png](https://qiita-image-store.s3.amazonaws.com/0/159761/adb3f62f-8849-0117-9f03-6c9af39e3cec.png)

### デメリット
- データの値によって目盛の幅が変わってしまう

# 改善案４
## メモリの表示を斜めにする
※. この方法は、Highcharts 5.0.7 を使えばデフォルトでできますが、Highcharts 4.0.4 ではデフォルトでできなかったのであえて「rotation」に値を指定しています。

```javascript:myHighcharts.js
これより上は「問題の状態」と同じ
function getBarChartOptions(seriesData) {
    var yAxisTickInterval = 0.5;
    var yAxisRotation = 75;
    var barChartOptions = {
        chart: {
これより下は「問題の状態」と同じ
```

![Screen Shot 2017-02-17 at 0.16.34.png](https://qiita-image-store.s3.amazonaws.com/0/159761/d690a52f-fe22-90ac-f935-8b3a8ab4a855.png)

### デメリット
- 目盛に表示している文字列が長いと90度ぐらいまで曲げないと表示が切れる
- 表示によっては角度を変えても見にくい


# 参考サイト
[Highcharts API ReferenceのyAxis](http://api.highcharts.com/highcharts/yAxis)
[Highcharts.jsでグラフの目盛を調整する | cly7796.net](http://cly7796.net/wp/javascript/to-adjust-the-scale-of-the-graph-in-highcharts-js/)
[配列の中の最大値を取得する(NaN, null対応) - Qiita](http://qiita.com/YusukeHirao/items/e848f5de40beaa52e002)