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


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


[Highcharts]完成形

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

スポンサーリンク

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

もっと簡単な方法があるのかもしれませんが、条件分岐で表示できたのでシェアします。
今回の完成形はこちら。
[Highcharts]完成形
yAxis(y軸)の一番上に(km)と表示させています。これはサンプルなので(円)とか(人)とかデータによって変える事ができます。

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

Highcharts

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

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

シンプルな折れ線グラフです。コードもシンプル。
y軸の目盛りすべてに「km」の単位が付いています。これを一番上のみに表示させる形式に変更します。
[Highcharts]グラフの設定
まずはカスタマイズ後のコード全文。8行目に(km)の指定がありますね。

y軸の設定をするには、yAxisで設定します。さらにy軸に単位を付けるにはlabelを指定します。
[Highcharts]ラベルの設定
label部分だけbeforeとafterを抜き出してみます。
[before]

[after]

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

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

和風デザイン勉強会