【告知】 ブログ デザイン変更に伴う諸問題について

12/31 14:47 更新

ブログのデザイン変更に伴う諸問題の解決、やっと完了しました。
IEでの表示の方も全記事対応させたつもりです。一度に多くの記事を見ると(カテゴリ欄や月別アーカイブス欄から)グラフが表示されないことが多いようなので(IEだと重い!)、注意してください。

今年はHighCharsFreQuentをご覧いただきありがとうございました。

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

お気に入りサイト

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


【月別】 日本 総額輸入額・輸出額 & 貿易収支 推移

日本の月別の総額輸出入額と貿易収支の推移をグラフ化しました。

東日本大震災から日本の貿易額はどのように推移してきたのか…
月一で発表される財務省発表のデータを基に見ていきましょう!



Highcharts Example


Highcharts Example
※1億円以下は四捨五入
※輸出はFOB価格、輸入はCIF価格です

グラフを見ると、貿易収支がマイナスの月が多いことがわかります。
ただ個人的には、原発停止による化石燃料の増大のせいで輸入総額が急増して
貿易収支が明確に赤字になっていると思っていたので、そうでもない事が解り少し安心しました^^;

ただ、グローバル競争や為替戦争が激しくなっている昨今、
今のまま何もしないと日本は輸出が減少していきジリ貧状態になってしまいます。

日本が得意としている「モノづくり」をこれからも続けていくには、
政府や大企業に頼るのではなく、日本人一人一人が高い意識・願望を持って生活する
必要があるのかなと思います。みんなが意識を高く持てば需要が生まれ、企業がそれを実現するような
モノを作り出そうとすることで技術が磨かれ、日本の企業の国際競争力がアップすると思います。

年別の貿易総額・貿易収支の推移はこちらです

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

お気に入りサイト

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


【初心者用】 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の訂正はまた気が向いた時に…やります)

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

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

お気に入りサイト

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


【2011年】 時計メーカー・ブランドランキング

時計メーカー・ブランドの売上高をグラフ化してみました

ジェトロのサイトを見ていたら、「スイス時計産業の世界戦略」というレポートがあったので
その中で紹介されていたランキングをグラフしました。

日本だとカシオ・セイコー・シチズンが有名ですが、
世界だとどれぐらいの順位なんでしょう…
時計店でバイトした事もあるので
私、、気になります!!(`・ω・´)

なんかスミマセン//


Highcharts Example
2012年9月14日現在、1フラン=83円ぐらいなので1位のスウォッチは4940億ぐらいの売上げになります
にしてもスイス勢が強いですね…
たしかに時計=スイスのイメージが強いですが、、

っていうかスウォッチってこんなにデカイ会社だったんですね^^;
もっとファッショナブルな小さめの会社かと思っていました、



次にブランド別の売上高を見てみましょう!!

Highcharts Example
ロレックス、、さすがですね(笑)
日本勢がいないのが残念です(´;ω;`)
Gショック・オシアナス・アッテサどうした…
ここでもスウォッチは強いですね
どれだけブランド持ってはるんですか!!本当に…

日本勢にもブランド力を付けて頑張って欲しいですが、
時計って性能云々というよりも「ブランド」がモノを言うので
そういう意味ではやっぱり「メイド・イン・スイス」は強いですよね…^^;


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

お気に入りサイト

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


Index for HighCharts FreQuent
author imageAuthor:Lynx
データをグラフ化&推移を見守り中。
御連絡はこちらまでお願い致します。



最新記事