[Highcharts]エクセルみたいに、y軸の上に単位を付ける方法

WEB上にJavaScriptで綺麗なグラフを描画してくれるHighcharts。
今回はyAxis(y軸)の一番上に単位を表示させる方法を紹介します。エクセルなどでは良くある方法なので、こういった表示の依頼が来ることもあるかも？

if(条件分岐で)一番上だけに単位を表示させる

もっと簡単な方法があるのかもしれませんが、条件分岐で表示できたのでシェアします。
今回の完成形はこちら。

yAxis（y軸）の一番上に(km)と表示させています。これはサンプルなので（円）とか（人）とかデータによって変える事ができます。

今回のカスタマイズは、Highchartsを利用したことがある人向けの記事です。
過去のHighcharts関連記事はこちら。これから導入しようと思う人は導入編をどうぞ。

Highcharts公式サイト（英語）

Highchartsはif を使った条件分岐ができる。

今回は簡単な条件分岐で、グラフの目盛りが分かっている時に使えます。
まずは、編集前の状態。
下記Highcharts公式サイトのでもグラフを使ってカスタマイズしてみます。

Highcharts公式サイト Demo

シンプルな折れ線グラフです。コードもシンプル。
y軸の目盛りすべてに「km」の単位が付いています。これを一番上のみに表示させる形式に変更します。

まずはカスタマイズ後のコード全文。8行目に(km)の指定がありますね。

yAxis: {
       labels: {
            formatter: function () {
                var label = this.axis.defaultLabelFormatter.call(this);
                    if (this.value !== 250) {
                    return Highcharts.numberFormat(this.value, 0);
                }
                return '(km)<br>'+label;
            }
        }
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]

y軸の設定をするには、yAxisで設定します。さらにy軸に単位を付けるにはlabelを指定します。

label部分だけbeforeとafterを抜き出してみます。
[before]

 labels: {
            format: '{value} km'
        }

[after]

labels: {
            formatter: function () {
                var label = this.axis.defaultLabelFormatter.call(this);
                if (this.value !== 250) {
                    return Highcharts.numberFormat(this.value, 0);
                }
                return '(km)<br>'+label;
            }
        }

afterの方に「if」を使った条件分岐が入っています。
formatter:function()で単位や小数点表示を細かく指定できます。
4行目の250は、y軸の最大値です。表示するグラフによって変更してください。
5行目は小数点表示の指定。小数点以下非表示にしたいので、this.valueの後の数字を0にします。

そして、条件分岐。

4行目のif～は英語と同じく「もしも・・・なら」の意味です。このif(){xxx}で条件分岐を指定します。
コードの内容を日本語訳すると、
「もし、y軸のラベルが250ではない場合は、値のみの表示、そうでなければ、(km)＋改行＋値の表示をする」
となります。
7行目のreturn ‘(km)<br>’+labelのlabelは、3行目で指定している変数のvar label の事です。