☆Yuus Memo☆
非エンジニアの方でも業務を効率化できるプログラムを紹介します!
PHP

【PHP】Web上に色々なグラフを表示する

皆さんこんにちは!
最近本当に寒くなってきて、朝起きるのが辛くなってきましたね。
私は、寒いのが苦手なのでこれからの季節は何もする気が起きず、とても憂鬱です。

今日は、PHPでグラフを作成する方法を書いていきたいと思います。
PHPに限らず、データを可視化するためにグラフを描画する機会はとても多いです。

PHPの場合、ECサイトの管理画面や業務システムで売上や粗利などのデータをグラフにしたり、集計結果を伝えるための手段として使われているかと思います。

ライブラリーを説明する際に私は基本的に、生のPHPで書いていますが、Laravelなどのフレームワークでも同じように使えるので、応用して使ってください。
分からない部分は、お気軽にコメントください。

最近のWebアプリでのグラフ

今回の記事では、サーバーサイドで「GDライブラリ」を使用してグラフ画像を動的に生成・出力する方法を紹介しますが、このやり方は様々なグラフが簡単に描画出来る一方、サーバーへの負荷がかかります。

その為、PHP(サーバーサイド)でデータのみ作成し、JSON形式でデータを渡しJavaScriptで描画するといった流れが多くなっています。
JavaScriptで描画するグラフは、派手なアニメーションを付けたり出来るのでホームページ上に表示するグラフなどで、アニメーションを付けて表示すると面白いです。

JavaScriptでのグラフ描画を行う場合、PHPとJavaScript双方でコードを書かなければならないので、業務システムやECサイトの管理画面などで使用するグラフの場合、PHP(サーバーサイド)でグラフを生成する事が多いです。

Yuu

ホームページなどの多くの人に訴えるグラフは、「JavaScript」で作成。
業務システムやECサイトの管理画面などは「PHP」で生成(派手さより速度や見易さを重視するため)するようにすると良いかと思います。

PHPIotの準備

前置きが長くなってしまいましたが、早速始めていきましょう!!
今回は「PHPlot」というライブラリを使用します。

PHPlotは、とてもシンプルですが公式ドキュメントが非常に分かりやすく丁寧です。

PHPlotのダウンロード

PHPlotはComposerで入れるか、GitHubから直接ダウンロードする方法があります。

今回は、GitHubからダウンロードしてみます。

まず、Webサーバー上のディレクトリへ移動して次のコマンドを実行してください。

git clone https://github.com/davefx/PHPlot.git

現在のディレクトリへGitHubから、ライブラリをCloneします。
現在のディレクトリに「PHPlot」のライブラリが入ったディレクトリが出来上がっていればOKです。

これで、準備完了です。

PHPlotでグラフを描画

早速、グラフを書いてみましょう。
公式ドキュメントに目を通していただいた方は、お分かりだと思いますが、非常に簡単かつシンプルです。

折れ線グラフの描画

まずグラフの定番、「折れ線グラフ」をPHPで描画します。
PHPファイルを作成し、以下のコードを書き写してください。

<?php
declare(strict_types=1);

require_once 'PHPlot/phplot/phplot.php';

// dummy data
$data = [
    ["2020/1", 5],
    ["2020/2", 4],
    ["2020/3", 11],
    ["2020/4", 8],
    ["2020/5", 7],
    ["2020/6", 5],
];

// PHPlotのインスタンスを生成
$plot = new PHPlot(1000, 800);
// データをセット
$plot->SetDataValues($data);
// 描画
$plot->DrawGraph();

実行してみると、Web上にグラフが表示されたかと思います。
ダミーデータを見て分かるように、半月分の何かの数値データをグラフかしています。

// PHPlotのインスタンスを生成
$plot = new PHPlot(1000, 800);
// データをセット
$plot->SetDataValues($data);
// 描画
$plot->DrawGraph();

PHPlotのインスタンスを作り、SetDataValues()メソッドに配列データを渡し、DrawGraph()でグラフを描画します。

ただ、このグラフは欠点があります。
配列の「年月」日本語表示にしてみてください。
文字化けしてしまいますよね。

PHPlotは内部で、グラフィックライブラリの「GD」を使用しています。
GDは日本語を表示する事が出来ません。
下記の記事で使用した「ipagp.ttf」を現在のディレクトリへディレクトリを作成し、コピーしてください。

TCPDF
【PHP】PDFで帳票出力 皆さんこんにちは!!PHPでWebの業務システムを作っていると、必ず帳票(レポート類)を出力する処理が必要になります。 PHPで...

折れ線グラフの見出しを日本語にしてみる

フォントを準備したら、下記のように編集してください。

<?php
declare(strict_types=1);

require_once 'PHPlot/phplot/phplot.php';

// dummy data
$data = [
    ["2020年1月", 5],
    ["2020年2月", 4],
    ["2020年3月", 11],
    ["2020年4月", 8],
    ["2020年5月", 7],
    ["2020年6月", 5],
];

// PHPlotのインスタンスを生成
$plot = new PHPlot(1000, 800);

// -----追加------
// フォントを読み込む
$plot->SetTTFPath(dirname(__FILE__) . '/fonts');
$plot->SetDefaultTTFont('ipagp.ttf');
// -----ここまで------

// データをセット
$plot->SetDataValues($data);
// 描画
$plot->DrawGraph();

追加部分でグラフの見出しに使用するフォントを指定しています。
日本語で見出しが表示されたかと思います。

すごく簡単ですね!!
この様に、アロー演算子でメソッドを呼び出し値を渡すだけで、簡単にグラフが出来上がります。

Imageファイルへの出力

ファイルへの出力も簡単です。
下記のコードを書き写してください。

<?php
declare(strict_types=1);

require_once 'PHPlot/phplot/phplot.php';

// dummy data
$data = [
    ["2020年1月", 5],
    ["2020年2月", 4],
    ["2020年3月", 11],
    ["2020年4月", 8],
    ["2020年5月", 7],
    ["2020年6月", 5],
];

// PHPlotのインスタンスを生成
$plot = new PHPlot(1000, 800);

// -----追加------
// フォントを読み込む
$plot->SetTTFPath(dirname(__FILE__) . '/fonts');
$plot->SetDefaultTTFont('ipagp.ttf');
// -----ここまで------

// データをセット
$plot->SetDataValues($data);

// 描画
// ファイルへ保存(追加)
$plot->setFileFormat('png');
$plot->SetIsInline(true);
$plot->setOutputFile(dirname(__FILE__) . '/line-chart.png');

$plot->DrawGraph();

コードの変更は以下の部分です。

// 描画
// ファイルへ保存(追加)
$plot->setFileFormat('png');
$plot->SetIsInline(true);
$plot->setOutputFile(dirname(__FILE__) . '/line-chart.png');

$plot->DrawGraph();

3行追加することで、png形式のファイルがカレントディレクトリに生成されたかと思います。

Imageファイルとして取り出せれば、以前紹介した、PDF帳票にグラフを差し込んだり出来ます。

色々なグラフを描画してみよう!

PHPlotは折れ線グラフだけでなく、様々なグラフを描画する事が出来ます。
基本的なコードはあまり変わらないので、解説は公式ドキュメントを参照していただければと思います。

棒グラフ

<?php
declare(strict_types=1);

require_once 'PHPlot/phplot/phplot.php';

// dummy data
$data = [
    ['2015年', 10, 42, 67],
    ['2016年', 12, 45, 62],
    ['2017年', 18, 52, 78],
    ['2018年', 12, 31, 56],
    ['2019年', 8 , 38, 70],
    ['2020年', 15, 40, 72],
];

// 凡例のラベル
$legend = ["山田", "佐藤", "田中"];

// PHPlotのインスタンスを生成
$plot = new PHPlot(1000,1000);
$plot->SetTTFPath(dirname(__FILE__).'/fonts');
$plot->SetDefaultTTFont('ipagp.ttf');

// グラフのタイプ
$plot->SetPlotType('bars');
$plot->SetDataType('text-data');
//$plot->SetShading(0); // コメントを外すと、平面になります。

// 凡例を表示
$plot->SetLegend($legend);
$plot->SEtImageBorderType('plain');

// 描画
$plot->SetDataValues($data);
$plot->DrawGraph();

円グラフ

<?php
declare(strict_types=1);

require_once 'PHPlot/phplot/phplot.php';

// dummy data
$data = [
    ['牛肉', 30],
    ['豚肉', 20],
    ['鶏肉', 15],
    ['羊肉',    8],
    ['馬肉',4],
];

// 凡例のラベル データの配列から見出しを抜き出す。
$legend = [];
foreach ($data as $d) {
    $legend[] = $d[0];
}

// PHPlotのインスタンスを生成
$plot = new PHPlot(1000,1000);
$plot->SetTTFPath(dirname(__FILE__).'/fonts');
$plot->SetDefaultTTFont('ipagp.ttf');

// グラフのタイプ
$plot->SetPlotType('pie');
$plot->SetDataType('text-data-single');
$plot->SetShading(0); // コメントを外すと、平面になります。
//$plot->SetImageBorderType('plain'); // 枠で囲む

// 凡例を表示
$plot->SetLegend($legend);

// 描画
$plot->SetDataValues($data);
$plot->DrawGraph();

いかがでしょうか?
2種類のグラフを作ってみましたが、SetPlotType()メソッドの引数を変更するだけでグラフを変更することができるので、データの種類に応じて様々な表現ができることが分かったのではないでしょうか。

まとめ

今回は、PHPでグラフを描画する方法をお伝えしてきました。
簡単にグラフを作成することができるので、WebアプリケーションでもTCPDFなどと組み合わせて、様々な帳票を作成できる事が分かったかと思います。

Webアプリケーションの帳票作成は非常に手間がかかる部分ですので、こういったライブラリを上手く使い、効率的に開発を進められるようになってください。

今回は紹介していませんが、他にも様々なPHPのグラフライブラリがあります。

開発案件にあったライブラリを使用してみてください。
お勧めのライブラリなどがありましたら、是非私にも教えてください!!

最後までお読みいただきありがとうございました!!

世界最大級オンライン学習プラットフォーム!!

Udemyは世界最大級のオンライン学習プラットフォームで、世界中の学びたい人と教えたい人をオンラインでつなぐサービスです。
AI・データサイエンスなど最先端のIT技術から、プレゼンなどビジネススキルに関する講座まで10万以上(※海外講座含む)あるため、自分が学びたい講座をみつけることができます。


コメントを残す