PowerShell Core入門 - 基本コマンドの使い方(241) グラフを書く - Google Charts

PowerShellスクリプトからグラフを描画する方法として「Google Charts」を利用するために、今回はまずGoogle Chartsについて紹介しよう。PowerShell自体の話は出て来ないが、PowerShellからGoogle Chartsを利用する上で今回の説明は避けることができない。PowerShellはグルー的な言語として使うことも想定されているので、ほかの技術の使い方を把握していくことも大切だ。

→連載「PowerShell Core入門 - 基本コマンドの使い方」の過去回はこちらを参照。

【こちらもオススメ】
【連載】Google Workspaceをビジネスで活用する
【連載】ゼロからはじめるJavaScript

Google Chartsとは

Googleは数値データをグラフに変換するためのAPIを提供している。現在は「Charts | Google Developers」においてまとまった情報が提供されており、「Google Charts」という名称が使われている。

Charts ｜ Google Developers

Google ChartsはGoogleの提供するJavaScriptライブラリを使用してグラフをレンダリングするサービスだ。Google ChartsはSVGを生成する。WebブラウザはこのSVGをレンダリングするわけだが、このデータがインタラクティブなグラフになっている。

Google Chartsには主要なグラフが用意されており、オプションを指定することでさまざまなカスタマイズを行えるようになっている。Google Chartsを使えば、業務で必要になるようなグラフの作成はほぼ網羅できるのではないかと思う。

Google Chartsを使ってみよう

まず、Google Chartsの使い方を把握する必要がある。Google Chartsに関してはすでに優れたドキュメントが提供されているので、基本的にはそれに従ってチュートリアル的に作業を行えば、一通り扱えるようになるはずだ。まず、次のWebページを読むところから始める。

Google グラフの使用 | Charts | Google Developers

例えば、上記ドキュメントには円グラフのサンプルとして次のようなHTMLコードが掲載されている。

<html>
  <head>
    <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);

      // 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([
          ['Mushrooms', 3],
          ['Onions', 1],
          ['Olives', 1],
          ['Zucchini', 1],
          ['Pepperoni', 2]
        ]);

        // Set chart options
        var options = {'title':'How Much Pizza I Ate Last Night',
                       'width':400,
                       'height':300};

        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>

  <body>
    <div id="chart_div"></div>
  </body>
</html>

このHTMLは、単体で独立して機能するようになっている。まずはこのHTMLコードをファイルに保存してWebブラウザで開いてみよう。次のように表示される。

円グラフのサンプルをMicrosoft Edgeで開いたところ

この円グラフはインタラクティブに動作するようになっており、円グラフの上にマウスカーソルをホバーさせたり、クリックしたりすると次のように表示が変化する。

円グラフにマウスカーソルをホバー/クリックしたところ

このサンプルHTMLが行っている主な処理は、次のようになっている。

https://www.gstatic.com/charts/loader.jsを読み込む
corechartパッケージを読み込む
グラフデータを用意する
グラフオプションを設定する
グラフを描画する

要するに、このHTMLデータを生成することができれば、目的とするグラフを得られることになる。

Google ChartsのAPIにはある程度の一貫性がある。例えば、先ほどのHTMLに含まれている「google.visualization.PieChart()」という処理を「google.visualization.BarChart()」という処理に変えると、レンダリングされるグラフが円グラフから横棒ブラフに変わる。

<html>
  <head>
    <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);

      // 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([
          ['Mushrooms', 3],
          ['Onions', 1],
          ['Olives', 1],
          ['Zucchini', 1],
          ['Pepperoni', 2]
        ]);

        // Set chart options
        var options = {'title':'How Much Pizza I Ate Last Night',
                       'width':500,
                       'height':300};

        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>

  <body>
    <div id="chart_div"></div>
  </body>
</html>

このファイルをWebブラウザで開くと次のようになる。

横棒グラフのサンプルをMicrosoft Edgeで開いたところ

表示されるグラフが円グラフから棒グラフに変わったことがおわかりいただけるだろう。このように、Google ChartsのAPIにはある程度の一貫性がある。レンダリングするグラフの種類を変えたり、オプションを変更したりする方法を一度理解してしまえば、かなり自由にグラフを作成できるようになる。

日本語を含むグラフの描画

この手のAPIは、英語では使えても日本語になると問題が発生するといったことが多い。だが、Google Chartsにはその辺りの問題はない。例えば、先ほどのHTMLの中身を次のように日本語を含むものに書き換えてみる。

<html>
  <head>
    <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);

      // 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', 'トッピング');
        data.addColumn('number', 'スライス');
        data.addRows([
          ['マッシュルーム', 3],
          ['玉ねぎ', 1],
          ['オリーブ', 1],
          ['ズッキーニ', 1],
          ['ペパロニ', 2]
        ]);

        // Set chart options
        var options = {'title':'昨晩食べたピザのピース数',
                       'width':500,
                       'height':300};

        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>

  <body>
    <div id="chart_div"></div>
  </body>
</html>

このファイルをWebブラウザで開くと次のようになる。

タイトルやラベルが日本語になったことを確認

問題なく日本語が扱えていることがわかる。

Google Chartsを使うにはある程度JavaScriptを扱う必要があるのだが、基本的にはこのようにサンプルのHTML/JavaScriptを編集すれば使える程度にシンプルなものなので、実際利用する際、「JavaScriptを知らないので困る」というようなことは起こりにくいのではないかと思う。

グラフデータを画像へ変換する方法

本連載では、最終的にここからグラフを画像データに編集・保存して使うことを想定している。いくつか方法は考えられるが、Google Chartsのグラフオブジェクトに用意されているgetImageURI()を使う方法がシンプルでわかりやすいのでそちらを紹介したい。

まず、次のようにグラフを画像データに変換するための処理を加えたHTMLを見てみよう。

<html>
  <head>
    <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);

      // 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', 'トッピング');
        data.addColumn('number', 'スライス');
        data.addRows([
          ['マッシュルーム', 3],
          ['玉ねぎ', 1],
          ['オリーブ', 1],
          ['ズッキーニ', 1],
          ['ペパロニ', 2]
        ]);

        // Set chart options
        var options = {'title':'昨晩食べたピザのピース数',
                       'width':500,
                       'height':300};

        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
        chart.draw(data, options);

        alert(chart.getImageURI());
      }
    </script>
  </head>

  <body>
    <div id="chart_div"></div>
  </body>
</html>

このHTMLには、グラフをレンダリングした後に「alert(chart.getImageURI());」という処理を追加している。

詳しい説明は省略するが、「chart.getImageURI()」という処理を行うとレンダリングしたグラフをPNG画像としてHTMLに直接埋め込んだ場合の文字列が得られる。その文字列を「alert()」で見えるようにしたのがこのHTMLファイルだ。Microsoft Edgeで開く、次のようになる。

SVGのグラフをPNG画像としてHTMLに埋め込む場合に使われる文字列を表示

表示されている文字列のうち「data:image/png;base64,」というのは決まり文句のようなもので、それ以降の文字列が実際のPNG画像データをBase64という形式にエンコードしたものになっている。

つまり、その対象となる文字列を抜き出してデコードすれば、PNG画像が取り出せることになる。画像に変換するにはこのパスが利用できるので、使おうということだ。

複数の技術を組み合わせることもPowerShellの仕事

PowerShellはユーザー向けのインタラクティブシェルであり、Windowsを操作するためのシェルであり、オブジェクト指向でかつシェルライクシンタックスを備えたプログラミング言語であり、ほかの言語やコマンドの機能を組み合わせるためのグルー言語でもある。PowerShellは、本来的にほかのさまざまな機能を組み合わせることが得意な作りになっているのだ。

このようにHTML、JavaScript、Microsoft Edgeを使ってレンダリングしたグラフを画像データに変換するといった処理も、PowerShellスクリプトであれば比較的手軽に実現できる。PowerShellの便利なところだ。