【初心者用】 Highchartsの使い方3 軸の設定方法編

今回はHighchartsの使い方第三弾として、軸の設定方法を書いてみようと思います。
軸はどうでもいいようで、実は(グラフィック的に)とても大切なのです(`・ω・ ´ )

今回はグラフを作りながら
どのような軸の設定方法があるのか、見ていこうと思います
「ポータブルゲーム機ZEGA(仮)の月間販売台数の推移」というグラフを作って説明していきます

で、ひとまず何も考えずに
ただデータを入力して作ったグラフが↓になります。

Highcharts Example

グラフとしては成り立っていますが、
ちょっと物足りない感がありますのでここから微修正していきます


1. 軸に文字をプラスする
Highcharts Example

まず、このようにx軸y軸に文字を足す事が出来ます。
どのようなコードを入れたかは、グラフ上で右クリック→「ページのソースを表示」から見てください。

Highchartsのコードは最初の画面から少しスクロールすれば出てきますが、
下のグラフに行くほどかなり見ずらくなると思います。
ブログの文章を頼りに注意して見てみてください
(時間がある時に、スクリーンショット等で見やすく表示する予定です^^;)
(またこの作業を以後は「ソースを確認してください」と言っていきます)

ソースを見るとx軸(xAxis)とy軸(yAxis)のセクション内に「labels: 」という塊が
(最初に描いたグラフと比べて)プラスされていると思います。
これが、軸に文字をプラスする記述になります
return this.value の後の '' 内で囲まれた所を変えれば
好きな文字に変える事ができます。


2. 軸の桁を調整する

1の作業を行った結果、y軸に大きな数字が出現するようになりました
これだと0が多くて、少し見ずらいので調整します

Highcharts Example


ソースを確認してもらうとわかるように
y軸(yAxis)のreturn this.value の後に /10000 を入れたのと、その後の
’’の中身を'台'から'万台'に変えました
これで数値は÷10000されて見やすくなったと思います。


3. y軸の位置を変更する

現在、y軸は左側にありますが、右側に反転させることも可能です

Highcharts Example

これはy軸(yAxis)の最後に opposite: true を入れる事で可能になります。
棒グラフと折れ線グラフなどデータの種類が異なるものを
一つのグラフで表示させる時に使用します
今回の様に一つのデータでも反転はもちろん可能です

このopposite: true は軸だけでなく、
凡例(legend)の順番を反転させる時にも使えるので覚えると便利です

4. グラフに線を入れる

Highcharts Example


ソースを確認してもらうと、
先ほどのy軸内(yAxis)の「opposite: true」の後に
「PlotLines」というセクションが追加されていると思います。

これによって何処の数値にラインを引くか、また線の色や太さなども設定できます。
今回はy軸に入れていますがx軸に入れて使うことも可能です。



5. 軸の最小値・最大値を変更する


これまで軸の数値はHighchartsが自動で設定してくれていましたが、
もうちょっとメリハリを付けたグラフにしたい時は、軸のセクションで 「min」や「max」を使えば
軸の数値を変える事が出来ます。

Highcharts Example

ソースを見てみてると、y軸(yAxis)のセクションに

min: 100000,

が追加されていると思います。
これは軸の最小値を100000(10万)にすると意味になります。
最大値はmaxにして同じようにやればオッケイです。

今回は10万のようにキリの良い数字を最小値にしているので、上手く表示されていますが、
例えば最小値を99999にしても上手くいかないので、その辺は「センス」が必要なのかもしれません


6. x軸の値を自動的に入力させる

Highcharts Example


グラフ自体は先ほどのものと変わっていませんが、
ソースを見てみてください(ここまで来るとかなりスクロールしないと見えません…スミマセン)

「legend」のセクションの下に、
「plotOptions」というセクションが追加されている事が解ると思います。
またデータもこれまでは、[1, 324859], [2, 172479], [3, 222648]…という風に[x値,y値]のように、
入力していましたが、今回のは[324859,172479,222648,256915,183661,305219]ということで
y軸の値だけになっています。

この作業は今回のグラフではあまりありがたみが感じられませんが、
データ数が多くなってくると非常に重宝します。


「plotOptios」の中のpointStartsをいじれば、
例えばデータが5月からだった場合に…↓

Highcharts Example

という風にpointStartの値を変更すれば容易にx軸を変更すること出来ます。

ただこの方法は数値を単純に1ずつ増やすことしかできないので
(何か記述を増やしたりすれば、2ずつ増やす…ということも出来るかもしれませんが、よく解りません)
例えば、「12月から1月になる場合」などには対応できません。
年や年度をx軸に取る場合にはよくこの方法は使います。

最初は少し難しいのですが、
慣れればとても便利になります


7. 柔軟なx軸の設定

1~5のように[x軸,y軸]というデータを入力していった場合、
例えば11月、12月、1月というようなデータを入力したい時に1月が 13 に対応してしまうので
軸が見ずらくなる事が予想されます。
これを解消するには、x軸をカテゴリー化させる方法があります。

Highcharts Example

まず、さきほどまで使っていたx軸の中身(xAxisの中)と先ほど追加したplotOptions:を消して、
ソースの様にx軸にcategories:を入れます。

この’’で囲まれたものがx軸の値に相当し、ここには好きな数値や文字を入れる事が出来ます
これだと12月、1月というのを上手く表示できますし、数値以外でも文字も入れれるので、
様々なグラフをつくる事が出来ます。

この方法のデメリットとしては、データが多くなると入力が面倒になりますし、
x軸のひとつのデータに対する間隔が短くなってしまうので、
下のグラフの様にx軸の文字が重なってしまい、見栄えが悪くなります

Highcharts Example

これを避ける為にはカテゴリーの’’の中身を一部空欄にすればokです

Highcharts Example
(ソースを確認してみてください)
categoriesの’’の中身が一部空欄になっていると思います
空欄でも「一つのカテゴリー」として認識されるのでこの方法で上手くいきます

ただ、この方法をやるとポインタを棒グラフにあてた時に出るtooltipに
カテゴリー名(x軸名)が表示されなくなってしまいます。
私もこれをなんとかしたいと思っているのですが、まだ解決策は解かりません…
解る方教えてくださると助かります



簡単でしたが、軸の設定はこのようになります。

まだ軸以外にも細かい設定はいくつかありますので
気が向いたら第2弾やろうと思います。

また、もっといい方法を知っている方は
コメント欄にて教えてくださると助かります!!
私はHighchartsのexampleしか情報源がないのでまだ知らない事だらけだと思います…(泣)

ちなみに最後に少し出たtooltipですが、
今回グラフごとに適宜調整を入れました。
その辺も含めて時間がある時にまた少し紹介できたらな…と思っています( ^ω^)

関連記事
  
このエントリーをはてなブックマークに追加

イーロン・マスク 破壊者か創造神か (朝日文庫)
竹内一正
朝日新聞出版
売り上げランキング: 9,596

■よく読まれている人気記事


コメントの投稿

非公開コメント


author imageAuthor:Lynx
各データの推移を見守り中。
御連絡はこちらまでお願いします。



最新記事