折れ線グラフ【Google Charts入門】- 配当金推移をチャート化する方法

vymdividend

Google Charts とは?

https://developers.google.com/chart

Google がオンラインで提供しているグラフ描画サービスです。

HTML/JavaScriptでこのAPIを使うと、手軽にいろんなチャートを使うことができ、データビジュアライゼーションをWeb実装することができます。

折れ線グラフを試してみる – Google Charts 【Line Chart】

Google Chartsの折れ線グラフのJavaScriptサンプルをカスタマイズして、使い方を探っていきます。

どの種類のチャートを使いたいか?にもよりますが、使い方はだいたいこのような感じです。

  1. Google Chartsパッケージを読み込む
  2. コールバック関数の設定
  3. データセットの設定
  4. オプションの設定
  5. 描画用インスタンスの生成と描画メソッド実行

今回は、バンガード社のETFVYMの年間配当利回りのデータを使って、折れ線グラフにしてみたいと思います。

Google Chartsサンプルソース

下記が、折れ線グラフのサンプルをカスタマイズしたものをです。

<html>
<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load('current', {'packages':['corechart']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['年', '配当利回り(%)'],
        ['2011',  3.15],
        ['2012',  3.51],
        ['2013',  3.54],
        ['2014',  3.06],
        ['2015',  3.13],
        ['2016',  3.30],
        ['2017',  3.17],
        ['2018',  3.09],
        ['2019',  3.64],
      ]);

      var options = {
        title: 'VYMの配当利回り推移',
        legend: { position: 'bottom' }
      };

      var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

      chart.draw(data, options);
    }
  </script>
</head>
<body>
  <div id="curve_chart" style="width: 900px; height: 500px"></div>
</body>
</html>

HTML

HTML上で、折れ線グラフを描画したい場所に、id名を指定します。

例:chart_div

JavaScript

チャートライブラリの読み込み

<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">

GoogleのCDNからチャートライブラリを読み込みます。

パッケージのロードと、コールバックの指定

// Visualization APIと、corechartパッケージをロードする
// Google Chartのpackages(['corechart'])を指定
google.charts.load('current', {'packages':['corechart']});

// ロード時のコールバックを"drawChart"に指定
google.charts.setOnLoadCallback(drawChart);

google.charts.load() で使いたいパッケージをロードします。

今回はコアパッケージのcorechartを使いたいので、指定します。

google.charts.setOnLoadCallback( ) でコールバック関数名を指定します。

コールバック関数の指定

   // コールバック関数
   // データテーブル、チャートのオプション設定、チャート描画
      function drawChart() {

        :
      }

コールバック関数、今回はdrawChart()を宣言していきます。

データテーブルの作成

折れ線グラフで使う、配当金の年間データをJSON形式で指定していきます。

        // データテーブルを作る
            var data = google.visualization.arrayToDataTable([
        ['年', '配当利回り(%)'],
        ['2011',  3.15],
        ['2012',  3.51],
        ['2013',  3.54],
        ['2014',  3.06],
        ['2015',  3.13],
        ['2016',  3.30],
        ['2017',  3.17],
        ['2018',  3.09],
        ['2019',  3.64],
      ]);
.DataTable()2次元の変更可能な値のテーブルを表します。
.addColumn()テーブルの形式
.addRows()データの追加

チャートのオプション設定

タイトルやサイズなどオプション指定をしていきます。

// チャートのオプション設定
  var options = {
        title: 'VYMの配当利回り推移',
        legend: { position: 'bottom' }
       'width':600,   // 描画領域の横幅
       'height':480};  // 描画領域の縦幅
      };
var options = {'title':'オールシーズンズ戦略 - 黄金のポートフォリオ', // タイトル
title:タイトル
legend:チャートの「凡例」の表示位置
width:600描画領域の横幅
height:480描画領域の縦幅

これで折れ線グラフを描画することができます。

まとめ

手軽にJavaScriptで豊富なグラフやチャート描画を選ぶことができる「Google Charts」のご紹介でした。

あわせて読みたい記事

あわせて読みたい書籍

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA