お金は友達

お金が大好きなblog主(ぷぅ@お金大好き)がお金に関して想うことを綴るブログです。

【GNI】業績の軌跡【可視化】

2020/07/05

四半期毎データにも要素選択グラフを追加しました。

2020/07/04

自由に要素(14種類)を描画できるグラフを追加しました。

2020/07/03

負の数字のあるデータ(利益関係)を追加しました。(見にくい?)

縦軸の目盛りの0点調整処理を追加しました。

2020/07/01

年毎のグラフを追加しました。

グラフにツールチップを設定しました。

2020/06/29

各種費用のグラフを追加しました。

こんにちは、なんとなく健康の為(ポイントの為)に日々、歩き続けているぷぅです。

今回、Vue.jsとSVGを利用して、GNIの業績変化を可視化する事に挑戦しました。

※現在、IEでは動作しません。

ほぼ丸1日これに費やしてしまった。

データ基は、IFRSに対応した2016年12月期以降の決算短信です。

前年のデータも記載されていることから2015年以降について描画してます。

現在、売上収益と売上総利益率のグラフだけ描画していますが、今後他のグラフも追加していきたいと思います。

※各種費用のグラフを追加しています。

グラフ下のスライダーをいじると、グラフの描画範囲を変更し、それに合わせて少し、縦軸の目盛りも変わったりします。

よかったらグラフぐりぐりしながら眺めてください。

年毎の業績変化

売上収益、各種利益及び売上総利益

棒グラフが順に売上収益、営業利益、税引前利益、親会社の所有者に帰属する当期利益、折れ線グラフが売上総利益率です

     {{(Math.round(data.val/10000))/10}}億 {{(Math.round(data.prof1/10000))/10}}億 {{(Math.round(data.prof2/10000))/10}}億 {{(Math.round(data.prof4/10000))/10}}億 {{(Math.round(data.val*10))/10}}% {{(Math.round(dataSet2[num-2]['valn']*10))/10}}% {{ data.q }} {{0 - zero_level[2]*maxy[2]*0.2}} {{maxy[2]*0.2 - zero_level[2]*maxy[2]*0.2}} {{maxy[2]*0.4 - zero_level[2]*maxy[2]*0.2}} {{maxy[2]*0.6 - zero_level[2]*maxy[2]*0.2}} {{maxy[2]*0.8 - zero_level[2]*maxy[2]*0.2}} {{maxy[2] - zero_level[2]*maxy[2]*0.2}} (億円) 0 20 40 60 80 100 (%)

主な費用

順に販管費、人件費、研究開発費の推移グラフです。

{{(Math.round(data.cost1/10000))/10}}億 {{(Math.round(data.cost2/10000))/10}}億 {{(Math.round(data.cost3/10000))/10}}億 {{ data.q }} {{0}} {{maxy[3]*0.2}} {{maxy[3]*0.4}} {{maxy[3]*0.6}} {{maxy[3]*0.8}} {{maxy[3]}} (億円) 0 20 40 60 80 100 (%)

描画要素選択用グラフ

14項目について、選択した要素について棒グラフを描画できます。

↓をクリックして要素を選択してください。〇〇率の折線グラフは今後追加できるようにする予定です。

                     
                
 
{{(Math.round(data.val/10000))/10 + x0 -x0}}億 {{(Math.round(data.prof1/10000))/10}}億 {{(Math.round(data.prof2/10000))/10}}億 {{(Math.round(data.prof3/10000))/10}}億 {{(Math.round(data.prof4/10000))/10}}億 {{(Math.round(data.net/10000))/10}}億 {{(Math.round(data.vala/10000))/10}}億 {{(Math.round(data.profa/10000))/10}}億 {{(Math.round(data.valb/10000))/10}}億 {{(Math.round(data.profb/10000))/10}}億 {{(Math.round(data.cost1/10000))/10}}億 {{(Math.round(data.cost2/10000))/10}}億 {{(Math.round(data.cost3/10000))/10}}億 {{(Math.round(data.cost4/10000))/10}}億 {{(Math.round(data.val*10))/10}}% {{(Math.round(dataSet2[num-2]['valn']*10))/10}}% {{ data.q }} {{0 - zero_level[4]*maxy[4]*0.2}} {{maxy[4]*0.2 - zero_level[4]*maxy[4]*0.2}} {{maxy[4]*0.4 - zero_level[4]*maxy[4]*0.2}} {{maxy[4]*0.6 - zero_level[4]*maxy[4]*0.2}} {{maxy[4]*0.8 - zero_level[4]*maxy[4]*0.2}} {{maxy[4] - zero_level[4]*maxy[4]*0.2}} (億円) 0 20 40 60 80 100 (%)

四半期毎の業績変化

売上収益、各種利益及び売上総利益

棒グラフが順に売上収益、営業利益、税引前利益、親会社の所有者に帰属する四半期利益、折れ線グラフが売上総利益率です

{{(Math.round(data.val/10000))/10 + x0 -x0}}億 {{(Math.round(data.prof1/10000))/10}}億 {{(Math.round(data.prof2/10000))/10}}億 {{(Math.round(data.prof4/10000))/10}}億 {{(Math.round(data.val*10))/10}}% {{(Math.round(dataSet2[num-2]['valn']*10))/10}}% {{ data.q }} {{0 - zero_level[0]*maxy[0]*0.2}} {{maxy[0]*0.2 - zero_level[0]*maxy[0]*0.2}} {{maxy[0]*0.4 - zero_level[0]*maxy[0]*0.2}} {{maxy[0]*0.6 - zero_level[0]*maxy[0]*0.2}} {{maxy[0]*0.8 - zero_level[0]*maxy[0]*0.2}} {{maxy[0] - zero_level[0]*maxy[0]*0.2}} (億円) 0 20 40 60 80 100 (%)

主な費用

順に販管費、人件費、研究開発費の推移グラフです。

{{(Math.round(data.cost1/10000))/10}}億 {{(Math.round(data.cost2/10000))/10}}億 {{(Math.round(data.cost3/10000))/10}}億 {{ data.q }} {{0}} {{maxy[1]*0.2}} {{maxy[1]*0.4}} {{maxy[1]*0.6}} {{maxy[1]*0.8}} {{maxy[1]}} (億円) 0 20 40 60 80 100 (%)

描画要素選択用グラフ

14項目について、選択した要素について棒グラフを描画できます。

↓をクリックして要素を選択してください。〇〇率の折線グラフは今後追加できるようにする予定です。

          
                
 
{{(Math.round(data.val/10000))/10 + x0 - x0}}億 {{(Math.round(data.prof1/10000))/10}}億 {{(Math.round(data.prof2/10000))/10}}億 {{(Math.round(data.prof3/10000))/10}}億 {{(Math.round(data.prof4/10000))/10}}億 {{(Math.round(data.net/10000))/10}}億 {{(Math.round(data.vala/10000))/10}}億 {{(Math.round(data.profa/10000))/10}}億 {{(Math.round(data.valb/10000))/10}}億 {{(Math.round(data.profb/10000))/10}}億 {{(Math.round(data.cost1/10000))/10}}億 {{(Math.round(data.cost2/10000))/10}}億 {{(Math.round(data.cost3/10000))/10}}億 {{(Math.round(data.cost4/10000))/10}}億 {{(Math.round(data.val*10))/10}}% {{(Math.round(dataSet2[num-2]['valn']*10))/10}}% {{ data.q }} {{0 - zero_level[5]*maxy[5]*0.2}} {{maxy[5]*0.2 - zero_level[5]*maxy[5]*0.2}} {{maxy[5]*0.4 - zero_level[5]*maxy[5]*0.2}} {{maxy[5]*0.6 - zero_level[5]*maxy[5]*0.2}} {{maxy[5]*0.8 - zero_level[5]*maxy[5]*0.2}} {{maxy[5] - zero_level[5]*maxy[5]*0.2}} (億円) 0 20 40 60 80 100 (%)

今後の改修予定

  • 負の数字があるデータ(利益関係)の追加(縦軸の調整処理) 7/3済
  • セグメントデータの追加   7/4済
  • ボタンによるグラフ要素の表示・非表示設定の追加 7/4済
  • 四半期データに自由描画グラフ追加 7/5済
  • %データの追加(~率)、第2軸の目盛り処理の追加
  • 株価データ(月足くらい?要検討)の追加
  • 他の銘柄のグラフの作成

まとめ

Vue.jsを利用して、GNIの業績変化を可視化しました。

とりあえず、試験的に、四半期毎の売上収益と売上総利益率を描画しました。

今回の為に手元にデータベースを作成して、色々な数字を入力しているので、今後他のグラフの追加や、いい感じのレイアウトにできるように更新していきたいと思います。

※4半期毎のデータは、決算短信の数字から独自に計算した値です。誤りが含まれる可能性があるので利用にはご注意下さい。

その他のGNI関連の記事は↓

rpuu.hateblo.jp

 

バイオは現物、株式投資は自己責任で。

ではでは、皆さんがよい投資生活を送れますように。

読者登録してもらうと更新の励みになりますのでよろしくお願いします。