JSONデータを変数にする【Google Charts入門】JavaScript

JSONGoogleCahrt

円グラフのJSONを変数にしてみる

過去記事の円グラフ【Pie Chart】をベースに、JSONデータ部分を変数にしてみます。

Google Chartsサンプルソース

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

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

      // Load the Visualization API and the corechart package.
      google.charts.load('current', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.charts.setOnLoadCallback(drawChart);

      let strTitle = ["株式", "債券"];
      let numPercent = [40, 60];

      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {

        // Create the data table. データテーブルを作る
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Topping');
        data.addColumn('number', 'Slices');
        data.addRows([
          [strTitle[0], numPercent[0]],
          [strTitle[1], numPercent[1]]
        ]);

        // チャートのオプション設定
        var options = {'title':'ポートフォリオ', // タイトル
                 //'pieHole': 0.4,  // 円グラフをドーナツ型に指定
                       'width':600,   // 描画領域の横幅
                       'height':480,  // 描画領域の縦幅
                       colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6'],  // 色設定
                       is3D: true };

        // いくつかのオプションで、インスタンスとチャートの描画
        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>

  <body>
    <!--Div that will hold the pie chart-->
    <div id="chart_div"></div>
  </body>
</html>

変数の宣言

今回は、円グラフPieChart で使いたいので、データテーブルに合わせたデータ構造と型にしていきます。

[[ラベル名, 数値], [ラベル名, 数値]...]

“ラベル名”と、”パーセントの値”を変数に宣言します。

2行使うので配列にしています。

let strTitle = ["株式", "債券"];
let numPercent = [40,  60];

addRowsでデータ追加

addRowsで、”ラベル名”と”パーセント”を追加していきます。

       // Create the data table. データテーブルを作る
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Topping');
        data.addColumn('number', 'Slices');
        data.addRows([
          [strTitle[0], numPercent[0]],
          [strTitle[1], numPercent[1]]
        ]);

配列で宣言したので

strTitle[0]文字列“株式”
numPercent[0]数値40
strTitle[1]文字列“株式”
numPercent[1]数値60

データの数が増えてきたら、JSONデータを直接読み込んで型変換したり、ループ文で回した方が効率的ですが、いったんこれでテストできました。

まとめ

手軽にJavaScriptで豊富なグラフやチャート描画を選ぶことができる「Google Charts」で、JSONデータ型を扱う方法でした。

あわせて読みたい記事

あわせて読みたい書籍

コメントを残す

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

CAPTCHA