【初心者用】 Highchartsの使い方4 複数のデータ取り扱い編

今回は、前回のHighchartsの使い方3 軸の設定方法 初心者用で伝えきれなかった 部分と
複数のデータを扱う場合のグラフの描き方等紹介していこうと思います。
前回は説明部分を「ソースを見て」と省いてしまい、見辛くなってしまったので
今回は解りやすくなるよう、なるべくHighchartsのコードを書くようにしてます
ただ、全部は表示できないので、適宜ソースを確認してくださいね(ソースの確認方法はHighchartsの使い方3)を参照)

説明に使うグラフは前回同様に「ZEGA週間販売台数の推移」を使います
では、まず前回の最後の状態のグラフを表示します

Highcharts Example

この状態だとグラフの左側に余白があり、ちょっと見栄えが悪いので、
そこを調節してみます


Highcharts Example

ソースを確認してください。
Highchartsのコードの上の方に

----------------------

marginRight: 100,
marginLeft: 40,
marginBottom: 50

----------------------

と記述があると思います。
これがグラフの余白を表す部分で、今回はmarginLeftを100から40に変更しました。
あと、y軸(yAxis)のセクションからPlotLinesを削除しときました(見栄えが悪かったので)



次に、このグラフに折れ線グラフを追加してみようと思います。

Highcharts Example

今回の変更点は
コードの最後の方にある、seriesのセクションに"前年同月比"という部分を追加しました。

--------------

},{
name: '前年同月比',
type: 'spline',
color: 'red',
data: [50.8,89.5,65.5,100.5,120.5,147.5,66.2,98.5,88.8,104.5,127.5]

---------------

の部分ですね。
基本的には上の"月間販売台数"のコードをコピーして、
name、type、color、dataを変更していきます。

typeは折れ線グラフの種類を意味し、lineとsplineというものがあり、今回は滑らかな線を描くsplineを採用しています。
colorには、HTMLの色コードを入力しますが、(私はこのサイトをよく利用しています)
今回の様にredとかgreenのように色の名前を直接入力してもOKです

またtypeとcolorは省略が可能です。(上の例だと、nameとdataだけでokです。)
この場合のtypeは、先ほど見たmarginLeftとかが記述してある所の上にある「type」で書かれているものになります
(今回の場合lineと記述してあります。勿論ここをsplineやcolumnに変更してもOKです)

colorは省略すると、勝手に色が指定されます
(ランダムではなく決まった色が指定されます。)


ただグラフを見て解るように「前年同月比」の折れ線グラフがうまく機能していません
これは前年同月値の値が、右にある「月間販売台数」の軸の値として表示されているからです
これを直すには、前年同月比用にもう一つ軸を設定する必要があります


Highcharts Example


ソースを確認してください。
まず、y軸のセクションに軸の塊を一つ追加しました。
(下の緑色の部分)

------------------

yAxis: [{
title: {
text: '月間販売台数 '
},
labels: {
formatter: function() {
     return this.value /10000 +'万台';
}
},
opposite: true
},{
title: {
text: '前年同月比'
},
labels: {
formatter: function() {
     return this.value + '%';
}
}
}
],

----------------------

seriesと同じように基本的には上の軸の記述をコピペして必要な所だけ訂正します。
注意してもらいたいのは、yAxisの最初の部分で [ を使い、最後の部分も ]を使っている所です
(赤で表示しているところ)

これは、軸が二つになったので、「ここまでがyAxisだよ」と形で
{  }の代わりに [ ] を使っています。これコピペだけだと忘れてしまうので注意が必要です。

あと、よく見てみると、
前年同月比のseriesのセクションで

yAxis: 1,

が追加されています(ソースを確認してください)
これは前年同月比は「1の軸(yAxisのセクションで2番目に書かれた軸)」を使ってグラフを書きなさいという意味です。
Highchartsでは最初に書かれている軸(ここでは月間販売台数の軸)を0として扱い、0の軸を使う時は
特に記述する必要がありませんが、0以外の軸を使う時は今回の様にseriesでどの軸を使うか
記述しないといけません。

データをさらに増やして軸をもう一つ増やす場合、(例えば、累計販売台数のデータを追加)
今回同様に、まず軸を記述して、累計販売台数のseriesで、yAxis: 2, と記述すればOKです
(3番目に記述された軸なので 2 になるわけですね。時間がある方はやってみてください)


次にデータが欠損している場合について見てみます

Highcharts Example

今回、2013年1月と6月で前年同月比のデータが欠損した場合を想定しています。

-------------

name: '前年同月比',
type: 'spline',
yAxis: 1,
color: 'red',
data: [50.8,0,65.5,100.5,120.5,147.5,null,98.5,88.8,104.5,127.5]

---------------

1月の所ではデータ欠損を 「0」 と入力していますが、
これだと折れ線グラフが急降下してしまい、例えデータが欠損しているという注釈を入れたとしても
視覚的には「下がっている」というイメージになってしまい、これは本意ではありません。
(データがないだけで本当はいい数字(100%以上)が出ているかもしれませんから…)

これを避ける為に「null」を使います。
6月ではnullを使っていますが、これだとデータが抜けている事が良く解ります。
棒グラフだとあまりありがたみがないのですが、折れ線グラフだとnullはよく使うと思います。

個人的には、5月と7月を点線かなにかで結べるような機能が欲しいと思っています。
もしやり方を知っている方、教えてくださると助かります(>_<)



最後にtooltipの使い方を見てます。
上のグラフの折れ線グラフにマウスのカーソルを合わせると、

前年同月比
x軸のseriesの名前 : データの値

というポップアップが出ると思いますが、
データの値の後に出る単位が「%」ではなく「台」となっており見栄えが悪いです

それを訂正したのが↓のグラフになります Highcharts Example

マウスを当てた時に出るポップアップはtooltipと呼ばれ、
tooltipセクションの記述を変更することができます。

-----------

tooltip: {
formatter: function () {
return '' + this.series.name + '
' +
this.x + ': ' + this.y +
(this.series.name == '前年同月比' ? '%' : '台' );
}
},

------------

今回変更したのは、括弧の中の赤字部分で
ここを簡単に訳すと、

「シリーズネームが'前年同月比'という名前だったらその後に'%'をつけ、
それ以外のシリーズネームだったら、シリーズネームの後に'台'をつけろ」

となります(三項演算子と呼ばれるものです)

ソースを確認してもらえれば解りますが、
これまでこの部分は

(this.series.name == '月間販売台数' ? '台' : '台' );

としていましたので、前年同月比の折れ線グラフを追加しても、
(シリーズネームが'月間販売台数'ではなかったので)シリーズネームの後に「台」がついていました。
(そもそも一つのデータを取り扱う場合は、この括弧の部分は本来必要ありません。)

また、それ以外の部分も変更が可能で、
tooltipの背景の色を変えたり、文字のサイズ・色も変更可能です



今回は以上になります。
前回よりは解りやすく書いたと思いますがどうでしょうか?
(Highchartsの使い方3の訂正はまた気が向いた時に…やります)

解らない所等ありましたら、
気軽にコメント欄にて教えてください、共に頑張りましょう!

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

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

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


コメントの投稿

非公開コメント


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



最新記事