VB.NET-TIPS などプログラミングについて

2020/07/29

JavaScript jQueryで table の操作する方法その５・データ取得その２(明細行内からの取得:find())

データを表形式で表示する為に table タグを用いますが、以下のページでは table の外側からデータを取得する方法を説明しました。

⇒JavaScript jQueryで table の操作する方法その１・データ取得

上記の table に thead tbody のタグを記述して、 tr オブジェクトの何番目かを eq() メソッドの使って該当行の tr オブジェクトを取得し、その内部の td オブジェクトにアクセスし内部のデータを取得ていました。

今回の取得方法は、各 tr の中に取得のアクションを起すボタンを置いて、該当行の中身を取得し表示します。

以下のソースを見て下さい。 tbody の中の tr の各 td にクラスを宣言しています。さらにメモ欄の td には内部に input タグを設置しさらにクラスを宣言しています。

「class="btnGet"」のボタンクリックイベントの関数の中で parent() メソッドを2回使って tr タグのオブジェクトを取得しています。 tr タグのオブジェクトの find() メソッドを使って td および input タグのオブジェクトを取得します。取得したオブジェクトの text() および val() メソッドで内部の値を取得します。

尚、find()されたオブジェクトの存在をチェックする為に length プロパティが「0」以外かを判定しています。 find() が返すオブジェクトが存在すれば length プロパティが「1」になるので、 if の判定は true となります。

【今回使用したメソッドの説明】

・find()：指定要素が持つ全ての子要素および孫要素から、指定条件式に合致するものを選択します。
・text()：指定した要素が持つテキストノードを結合したものを返します。
・val() ：要素のvalue属性を返します。

<html>
<head>
<meta charset="utf-8">
<title>test jQuery get-5</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
<table border="1">
  <thead>
    <tr>
        <th>品名</th>
        <th>数量</th>
        <th>単価</th>
        <th>金額</th>
        <th>メモ</th>
        <th>取得</th>
    </tr>
  </thead>
  <tbody>
    <tr>
        <td class="Name">りんご</td>
        <td class="Number">2</td>
        <td class="Price">100</td>
        <td class="Amount">200</td>
        <td><input class="Memo" value="りんごです" /></td>
        <td><button class="btnGet">取得</button></td>
    </tr>
    <tr>
        <td class="Name">みかん</td>
        <td class="Number">5</td>
        <td class="Price">50</td>
        <td class="Amount">250</td>
        <td><input class="Memo" value="ああああ" /></td>
        <td><button class="btnGet">取得</button></td>
    </tr>
    <tr>
        <td class="Name">いちご</td>
        <td class="Number">3</td>
        <td class="Price">250</td>
        <td class="Amount">750</td>
        <td><input class="Memo" value="ＡＡＡＡ" /></td>
        <td><button class="btnGet">取得</button></td>
    </tr>
  </tbody>
</table>
<script>
$(function () {
    //<button class="btnGet">のクリックイベントの関数を宣言
    $(".btnGet").click(function(){
        //クリック行のjqueryオブジェクト取得
        var objTr = $(this).parent().parent();
		//表示用文字列クリア
		var strMsg = "";
		//のjqueryオブジェクト取得
        obj = objTr.find(".Name");
        if( obj.length ) {
            strMsg += "Name:" + obj.text() + "\n";
        }
		//のjqueryオブジェクト取得
        obj = objTr.find(".Number");
        if( obj.length ) {
            strMsg += "Number:" + obj.text() + "\n";
        }
		//のjqueryオブジェクト取得
        obj = objTr.find(".Price");
        if( obj.length ) {
            strMsg += "Price:" + obj.text() + "\n";
        }
		//のjqueryオブジェクト取得
        obj = objTr.find(".Amount");
        if( obj.length ) {
            strMsg += "Amount:" + obj.text() + "\n";
        }
		//のjqueryオブジェクト取得
        obj = objTr.find(".Memo");
        if( obj.length ) {
            strMsg += "Memo:" + obj.val() + "\n";
        }
		//明細行の内容表示
        alert(strMsg);
    });
});
</script>
</body>

今回の方法は、各明細行に対して個別に行う処理が異なる場合に有効になると思います。
例えば、各明細行の修正画面を別に作成し、その画面に飛ばすためのアクションとしてのボタンや、個別に削除や更新を行う場合に対応する PHP プログラムに遷移させたりできると思います。

JavaScript
0CM

- 2020/07/29
PHP PhpSpreadsheet\Chart ワークシートにチャートが存在するエクセルファイル（テンプレート）の系列データ部分を変更し別のファイルとして登録する方法について
今回は PhpSpreadsheet\Chart で「Bar Chart:棒グラフ」が作成されているエクセルファイルを読み込み、そのチャートが参照している系列データ部分を別のデータで書き変えを行う方法を説明します。

おおまかな手順は以下の様になります。

PhpSpreadsheet\IOFactory クラスの createReader メソッドで読込みオブジェクトを生成し、エクセルファイルの読込。（この時 setIncludeCharts(TRUE) メソッドでチャートの存在を指定する）

ワークシートの fromArray メソッドで系列データを設定。

PhpSpreadsheet\IOFactory クラスの createWriter メソッドで書込みオブジェクトを生成し、エクセルファイルの書込。（この時 setIncludeCharts(TRUE) メソッドでチャートの存在を指定する）

以下の記事のエクセルファイルを元にします。
⇒PHP PhpSpreadsheet\Chart ワークシート上にチャート(Bar Chart:棒グラフ)を作成する方法について

元となるエクセルファイル[test-g-2-1.xlsx]は以下の様になっています。

■ワークシートにチャートが存在するエクセルファイル（テンプレート）の系列データ部分を変更し別のファイルとして登録

<?php // ライブラリ読込 require '../vendor/autoload.php'; use PhpOffice\PhpSpreadsheet\Spreadsheet; use PhpOffice\PhpSpreadsheet\IOFactory; // エクセルファイル読込オブジェクト $objReader = IOFactory::createReader('Xlsx'); $objReader->setIncludeCharts(TRUE); // PHPExcelオブジェクト取得 $objSpreadsheet = $objReader->load("test-g-2-1.xlsx"); // ワークシートオブジェクト取得 $objWorksheet = $objSpreadsheet->getActiveSheet(); // チャート用テストデータ上書 $objWorksheet->fromArray( array( array( 22, 38, 19), array( 25, 49, 20), array( 31, 33, 25), array( 28, 44, 42), array( 40, 31, 13), ), NULL, 'B2' ); // エクセルファイル書込オブジェクト $objWriter = IOFactory::createWriter($objSpreadsheet, 'Xlsx'); $objWriter->setIncludeCharts(TRUE); // エクセルファイル書込 $objWriter->save('test-g-7-1.xlsx'); exit(); ?>

出力されたエクセルファイル[test-g-7-1.xlsx]を見てみると以下の様になります。

チャートが参照している系列データを変更すれば、表示されるチャートのグラフは違ったものになります。
このことを利用すれば、テンプレートのエクセルファイルとしてチャート含んだものを登録しておき、データ部だけを変えるだけで異なるエクセルファイルを出力することができます。
- PHP
- 0CM

2020/07/29

PHP PhpSpreadsheet\Chart ワークシート上に円グラフ・チャート(Pie Chart)とドーナツグラフ・チャート(Donut Chart)、及びレーダーチャート（Radar Chart）を作成する方法について

今回は先ず2個のチャート上にそれぞれ「Pie Chart:円グラフ」「Donut Chart:ドーナツグラフ」のグラフを作成し、その後で「Radar Chart:レーダーチャート」作成します。

■2個のチャート上にそれぞれ「Pie Chart:円グラフ」「Donut Chart:ドーナツグラフ」のグラフを作成

「Pie Chart:円グラフ」「Donut Chart:ドーナツグラフ」は共に系列データ等の指定方法は同じで、表示される図形が円かドーナツかの違いがあるだけです。

系列データとして設定できるのは1種類のデータの系列のみになります。以下のテストデータを例にとると、縦方向には「商品1」の「2016～2020の1列のデータ」が対象となります。同一チャート上に「商品1」及び「商品2」のグラフを「棒グラフ」等の様に同時には表示できません。

//  チャート用テストデータ生成
$objWorksheet->fromArray(
	array(
		array('売上', '商品1', '商品2', '商品3'),
		array(  2016,      12,      18,      15),
		array(  2017,      15,      19,      10),
		array(  2018,      21,      23,      20),
		array(  2019,      18,      14,      12),
		array(  2020,      20,      21,      23),
	)
);

以前は PhpSpreadsheet\Chart\PlotArea クラス生成で先頭の引数には「NULL」を指定していましたが、円グラフの各要素の値を表示するために PhpSpreadsheet\Chart\Layout クラスのオブジェクトを生成し、指定します。
PhpSpreadsheet\Chart\Layout クラスの setShowVal メソッドで値表示を指定し setShowPercent メソッドでパーセント表記の指定をします。（結果、値とパーセントの二つとも表示されます）

実際のソースは以下の様になります。
（「Pie Chart:円グラフ」は「商品1」を「Donut Chart:ドーナツグラフ」は「商品2」を対象とします。）

<?php
// ライブラリ読込
require '../vendor/autoload.php';
use PhpOffice\PhpSpreadsheet\Spreadsheet;
use PhpOffice\PhpSpreadsheet\Chart\Chart;
use PhpOffice\PhpSpreadsheet\Chart\DataSeries;
use PhpOffice\PhpSpreadsheet\Chart\DataSeriesValues;
use PhpOffice\PhpSpreadsheet\Chart\Layout;
use PhpOffice\PhpSpreadsheet\Chart\PlotArea;
use PhpOffice\PhpSpreadsheet\Chart\Title;
use PhpOffice\PhpSpreadsheet\Chart\Legend;
use PhpOffice\PhpSpreadsheet\IOFactory;

// Spreadsheetオブジェクト生成
$objSpreadsheet = new Spreadsheet();
// ワークシートオブジェクト取得
$objWorksheet = $objSpreadsheet->getActiveSheet();
//  チャート用テストデータ生成
$objWorksheet->fromArray(
	array(
		array('売上', '商品1', '商品2', '商品3'),
		array(  2016,      12,      18,      15),
		array(  2017,      15,      19,      10),
		array(  2018,      21,      23,      20),
		array(  2019,      18,      14,      12),
		array(  2020,      20,      21,      23),
	)
);

//=====================
//    Pie Chart
//=====================
//  系列ラベルの指定
$arrDataSeriesLabels1 = array(
	new DataSeriesValues(DataSeriesValues::DATASERIES_TYPE_STRING, 'Worksheet!$B$1', NULL, 1),       //商品1
);
//  X軸ラベルの指定
$arrCategorysDataSeries1 = array(
	new DataSeriesValues(DataSeriesValues::DATASERIES_TYPE_STRING, 'Worksheet!$A$2:$A$6', NULL, 5),	//2016 to 2020
);
//  描画データの指定
$arrDataSeriesValues1 = array(
	new DataSeriesValues(DataSeriesValues::DATASERIES_TYPE_NUMBER, 'Worksheet!$B$2:$B$6', NULL, 5),  //商品1
);
//	チャート・データシリーズの生成
$objSeries1 = new DataSeries(
	DataSeries::TYPE_PIECHART,                      // plotType
	NULL,			                                // plotGrouping (円グラフはグループ指定必要無し)
	range(0, count($arrDataSeriesValues1) - 1),     // plotOrder
	$arrDataSeriesLabels1,                          // plotLabel
	$arrCategorysDataSeries1,                       // plotCategory
	$arrDataSeriesValues1                           // plotValues
);

//	円グラフ用のレイアウト設定
$objLayout1 = new Layout();
$objLayout1->setShowVal(TRUE);
$objLayout1->setShowPercent(TRUE);
//	プロットエリアにチャート・データシリーズに設定
$objPlotArea1 = new PlotArea($objLayout1, array($objSeries1));
//	レジェンド生成（各折れ線の説明を行う）
$objLegend1 = new Legend(Legend::POSITION_TOPRIGHT, NULL, false);
//  チャート・タイトル生成
$objTitle1 = new Title('Pie Chart:商品1');
//	チャート生成
$objChart1 = new Chart(
	'chart1',       // name
	$objTitle1,     // title
	$objLegend1,    // legend
	$objPlotArea1,  // plotArea
	TRUE,           // plotVisibleOnly
	0,              // displayBlanksAs
	NULL,           // xAxisLabel
	NULL		    // yAxisLabel
);
//	ワークシート内のチャート位置設定
$objChart1->setTopLeftPosition('A8');        // 左上
$objChart1->setBottomRightPosition('G20');   // 右下
//	ワークシートにチャート追加
$objWorksheet->addChart($objChart1);

//=====================
//    Donut Chart
//=====================
//  系列ラベルの指定
$arrDataSeriesLabels2 = array(
	new DataSeriesValues(DataSeriesValues::DATASERIES_TYPE_STRING, 'Worksheet!$C$2', NULL, 1),       //商品2
);
//  X軸ラベルの指定
$arrCategorysDataSeries2 = array(
	new DataSeriesValues(DataSeriesValues::DATASERIES_TYPE_STRING, 'Worksheet!$A$2:$A$6', NULL, 5),	//2016 to 2020
);
//  描画データの指定
$arrDataSeriesValues2 = array(
	new DataSeriesValues(DataSeriesValues::DATASERIES_TYPE_NUMBER, 'Worksheet!$C$2:$C$6', NULL, 5),  //商品2
);
//	チャート・データシリーズの生成
$objSeries2 = new DataSeries(
	DataSeries::TYPE_DONUTCHART,		// plotType
	NULL,			                                // plotGrouping (ドーナツグラフはグループ指定必要無し)
	range(0, count($arrDataSeriesValues2) - 1),     // plotOrder
	$arrDataSeriesLabels2,                          // plotLabel
	$arrCategorysDataSeries2,                       // plotCategory
	$arrDataSeriesValues2                           // plotValues
);

//	円グラフ用のレイアウト設定
$objLayout2 = new Layout();
$objLayout2->setShowVal(TRUE);
$objLayout2->setShowPercent(TRUE);
//	プロットエリアにチャート・データシリーズに設定
$objPlotArea2 = new PlotArea($objLayout2, array($objSeries2));
//	レジェンド生成（各折れ線の説明を行う）
$objLegend2 = new Legend(Legend::POSITION_TOPRIGHT, NULL, false);
//  チャート・タイトル生成
$objTitle2 = new Title('Donut Chart:商品2');
//	チャート生成
$objChart2 = new Chart(
	'chart2',       // name
	$objTitle2,     // title
	$objLegend2,    // legend
	$objPlotArea2,  // plotArea
	TRUE,           // plotVisibleOnly
	0,              // displayBlanksAs
	NULL,           // xAxisLabel
	NULL		    // yAxisLabel
);
//	ワークシート内のチャート位置設定
$objChart2->setTopLeftPosition('H8');        // 左上
$objChart2->setBottomRightPosition('N20');   // 右下
//	ワークシートにチャート追加
$objWorksheet->addChart($objChart2);


// [test-g-6-1.xlsx]:Excel2007形式で保存する
$objWriter = IOFactory::createWriter($objSpreadsheet, 'Xlsx');
$objWriter->setIncludeCharts(TRUE);
$objWriter->save('test-g-6-1.xlsx');
exit();
?>

出力されたエクセルファイルを見てみると以下の様になります。

■「Radar Chart:レーダーチャート」のグラフを作成

「Radar Chart:レーダーチャート」のグラフを作成してみます。
「Radar Chart:レーダーチャート」とは折れ線グラフの線を環状に繋げたイメージです。

「系列ラベル」「X軸ラベル」「系列（描画）データ」は各参照系列ごと対応するものを同じ個数設定します。
実際のソースは以下の様になります。

<?php
// ライブラリ読込
require '../vendor/autoload.php';
use PhpOffice\PhpSpreadsheet\Spreadsheet;
use PhpOffice\PhpSpreadsheet\Chart\Chart;
use PhpOffice\PhpSpreadsheet\Chart\DataSeries;
use PhpOffice\PhpSpreadsheet\Chart\DataSeriesValues;
use PhpOffice\PhpSpreadsheet\Chart\Layout;
use PhpOffice\PhpSpreadsheet\Chart\PlotArea;
use PhpOffice\PhpSpreadsheet\Chart\Title;
use PhpOffice\PhpSpreadsheet\Chart\Legend;
use PhpOffice\PhpSpreadsheet\IOFactory;

// Spreadsheetオブジェクト生成
$objSpreadsheet = new Spreadsheet();
// ワークシートオブジェクト取得
$objWorksheet = $objSpreadsheet->getActiveSheet();
//  チャート用テストデータ生成
$objWorksheet->fromArray(
	array(
		array('売上', '商品1', '商品2', '商品3'),
		array(  2016,      12,      18,      15),
		array(  2017,      15,      19,      10),
		array(  2018,      21,      23,      20),
		array(  2019,      18,      14,      12),
		array(  2020,      20,      21,      23),
	)
);

//  系列ラベルの指定
$arrDataSeriesLabels = array(
	new DataSeriesValues(DataSeriesValues::DATASERIES_TYPE_STRING, 'Worksheet!$B$1', NULL, 1),       //商品1
	new DataSeriesValues(DataSeriesValues::DATASERIES_TYPE_STRING, 'Worksheet!$C$1', NULL, 1),       //商品2
	new DataSeriesValues(DataSeriesValues::DATASERIES_TYPE_STRING, 'Worksheet!$D$1', NULL, 1),       //商品3
);
//  X軸ラベルの指定
$arrCategorysDataSeries = array(
	new DataSeriesValues(DataSeriesValues::DATASERIES_TYPE_STRING, 'Worksheet!$A$2:$A$6', NULL, 5),	//2016 to 2020
	new DataSeriesValues(DataSeriesValues::DATASERIES_TYPE_STRING, 'Worksheet!$A$2:$A$6', NULL, 5),	//2016 to 2020
	new DataSeriesValues(DataSeriesValues::DATASERIES_TYPE_STRING, 'Worksheet!$A$2:$A$6', NULL, 5),	//2016 to 2020
);
//  描画データの指定
$arrDataSeriesValues = array(
	new DataSeriesValues(DataSeriesValues::DATASERIES_TYPE_NUMBER, 'Worksheet!$B$2:$B$6', NULL, 5),  //商品1
	new DataSeriesValues(DataSeriesValues::DATASERIES_TYPE_NUMBER, 'Worksheet!$C$2:$C$6', NULL, 5),  //商品2
	new DataSeriesValues(DataSeriesValues::DATASERIES_TYPE_NUMBER, 'Worksheet!$D$2:$D$6', NULL, 5),  //商品3
);

//	チャート・データシリーズの生成
$objSeries = new DataSeries(
	DataSeries::TYPE_RADARCHART,		            // plotType
	NULL,											// plotGrouping (レーダーチャートはグループ指定必要無し)
	range(0, count($arrDataSeriesValues) - 1),      // plotOrder
	$arrDataSeriesLabels,                           // plotLabel
	$arrCategorysDataSeries,                        // plotCategory
	$arrDataSeriesValues,                           // plotValues
    NULL,                                           // plotDirection
	NULL,											// smooth line
	DataSeries::STYLE_MARKER			            // plotStyle
);

//	プロットエリアにチャート・データシリーズに設定
$objPlotArea = new PlotArea(NULL, array($objSeries));
//	レジェンド生成
$objLegend = new Legend(Legend::POSITION_TOPRIGHT, NULL, false);
//  チャート・タイトル生成
$objTitle = new Title('Radar Chart');
//	チャート生成
$objChart = new Chart(
	'chart1',       // name
	$objTitle,      // title
	$objLegend,     // legend
	$objPlotArea,   // plotArea
	TRUE,           // plotVisibleOnly
	0,              // displayBlanksAs
	NULL,           // xAxisLabel
	NULL		    // yAxisLabel
);
//	ワークシート内のチャート位置設定
$objChart->setTopLeftPosition('A8');        // 左上
$objChart->setBottomRightPosition('F20');   // 右下
//	ワークシートにチャート追加
$objWorksheet->addChart($objChart);


// [test-g-6-2.xlsx]:Excel2007形式で保存する
$objWriter = IOFactory::createWriter($objSpreadsheet, 'Xlsx');
$objWriter->setIncludeCharts(TRUE);
$objWriter->save('test-g-6-2.xlsx');
exit();
?>

出力されたエクセルファイルを見てみると以下の様になります。

2020/07/28

PHP PhpSpreadsheet\Chart エクセルシート上に複数のチャートで異なるタイプのグラフ(Bar Chart:棒グラフ、Line Chart:線グラフ、Area Chart:面グラフ)を作成する方法について

今回は4個のチャート上にそれぞれ「Bar Chart:棒グラフ」「Bar Chart:棒グラフ(積み上げ)」「Line Chart:線グラフ」「Area Chart:面グラフ」のグラフを持つ様にしたいと思います。

■4個のチャート上にそれぞれ「Bar Chart:棒グラフ」「Bar Chart:棒グラフ(積み上げ)」「Line Chart:線グラフ」「Area Chart:面グラフ」持つ様に作成

グラフの対象データとなるものは全て同じものを使うため PhpSpreadsheet\DataSeries クラスで生成する「系列ラベル」「X軸ラベル」「描画データ」は最初に生成し、共通で参照します。

//  チャート用テストデータ生成
$objWorksheet->fromArray(
	array(
		array('売上', '商品1', '商品2', '商品3'),
		array(  2016,      12,      18,      15),
		array(  2017,      15,      19,      10),
		array(  2018,      21,      23,      20),
		array(  2019,      18,      14,      12),
		array(  2020,      20,      21,      23),
	)
);

//  系列ラベルの指定
$arrDataSeriesLabels = array(
	new DataSeriesValues(DataSeriesValues::DATASERIES_TYPE_STRING, 'Worksheet!$B$1', NULL, 1),       //商品1
	new DataSeriesValues(DataSeriesValues::DATASERIES_TYPE_STRING, 'Worksheet!$C$1', NULL, 1),       //商品2
	new DataSeriesValues(DataSeriesValues::DATASERIES_TYPE_STRING, 'Worksheet!$D$1', NULL, 1),       //商品3
);
//  X軸ラベルの指定
$arrCategorysDataSeries = array(
	new DataSeriesValues(DataSeriesValues::DATASERIES_TYPE_STRING, 'Worksheet!$A$2:$A$6', NULL, 5),	//2016 to 2020
);
//  描画データの指定
$arrDataSeriesValues = array(
	new DataSeriesValues(DataSeriesValues::DATASERIES_TYPE_NUMBER, 'Worksheet!$B$2:$B$6', NULL, 5),  //商品1
	new DataSeriesValues(DataSeriesValues::DATASERIES_TYPE_NUMBER, 'Worksheet!$C$2:$C$6', NULL, 5),  //商品2
	new DataSeriesValues(DataSeriesValues::DATASERIES_TYPE_NUMBER, 'Worksheet!$D$2:$D$6', NULL, 5),  //商品3
);

後は個別にチャートを生成するために以下のオブジェクトを個別に生成します。

チャート・データシリーズの生成。
レジェンド生成。（各折れ線の説明を行う）
チャート・タイトル生成。
ワークシートにチャート追加。

実際のソースは以下の様になります。

<?php
// ライブラリ読込
require '../vendor/autoload.php';
use PhpOffice\PhpSpreadsheet\Spreadsheet;
use PhpOffice\PhpSpreadsheet\Chart\Chart;
use PhpOffice\PhpSpreadsheet\Chart\DataSeries;
use PhpOffice\PhpSpreadsheet\Chart\DataSeriesValues;
use PhpOffice\PhpSpreadsheet\Chart\PlotArea;
use PhpOffice\PhpSpreadsheet\Chart\Title;
use PhpOffice\PhpSpreadsheet\Chart\Legend;
use PhpOffice\PhpSpreadsheet\IOFactory;

// Spreadsheetオブジェクト生成
$objSpreadsheet = new Spreadsheet();
// ワークシートオブジェクト取得
$objWorksheet = $objSpreadsheet->getActiveSheet();
//  チャート用テストデータ生成
$objWorksheet->fromArray(
	array(
		array('売上', '商品1', '商品2', '商品3'),
		array(  2016,      12,      18,      15),
		array(  2017,      15,      19,      10),
		array(  2018,      21,      23,      20),
		array(  2019,      18,      14,      12),
		array(  2020,      20,      21,      23),
	)
);

//  系列ラベルの指定
$arrDataSeriesLabels = array(
	new DataSeriesValues(DataSeriesValues::DATASERIES_TYPE_STRING, 'Worksheet!$B$1', NULL, 1),       //商品1
	new DataSeriesValues(DataSeriesValues::DATASERIES_TYPE_STRING, 'Worksheet!$C$1', NULL, 1),       //商品2
	new DataSeriesValues(DataSeriesValues::DATASERIES_TYPE_STRING, 'Worksheet!$D$1', NULL, 1),       //商品3
);
//  X軸ラベルの指定
$arrCategorysDataSeries = array(
	new DataSeriesValues(DataSeriesValues::DATASERIES_TYPE_STRING, 'Worksheet!$A$2:$A$6', NULL, 5),	//2016 to 2020
);
//  描画データの指定
$arrDataSeriesValues = array(
	new DataSeriesValues(DataSeriesValues::DATASERIES_TYPE_NUMBER, 'Worksheet!$B$2:$B$6', NULL, 5),  //商品1
	new DataSeriesValues(DataSeriesValues::DATASERIES_TYPE_NUMBER, 'Worksheet!$C$2:$C$6', NULL, 5),  //商品2
	new DataSeriesValues(DataSeriesValues::DATASERIES_TYPE_NUMBER, 'Worksheet!$D$2:$D$6', NULL, 5),  //商品3
);

//=====================
//    Bar Chart
//=====================
//	チャート・データシリーズの生成
$objSeries1 = new DataSeries(
	DataSeries::TYPE_BARCHART,		// plotType
	DataSeries::GROUPING_STANDARD,	// plotGrouping
	range(0, count($arrDataSeriesValues) - 1),      // plotOrder
	$arrDataSeriesLabels,                           // plotLabel
	$arrCategorysDataSeries,                        // plotCategory
	$arrDataSeriesValues                            // plotValues
);
//	プロットエリアにチャート・データシリーズに設定
$objPlotArea1 = new PlotArea(NULL, array($objSeries1));
//	レジェンド生成（各折れ線の説明を行う）
$objLegend1 = new Legend(Legend::POSITION_TOPRIGHT, NULL, false);
//  チャート・タイトル生成
$objTitle1 = new Title('売上データ:Bar Chart');
//	チャート生成
$objChart1 = new Chart(
	'chart1',       // name
	$objTitle1,     // title
	$objLegend1,    // legend
	$objPlotArea1,  // plotArea
	TRUE,           // plotVisibleOnly
	0,              // displayBlanksAs
	NULL,           // xAxisLabel
	NULL		    // yAxisLabel
);
//	ワークシート内のチャート位置設定
$objChart1->setTopLeftPosition('A8');        // 左上
$objChart1->setBottomRightPosition('G20');   // 右下
//	ワークシートにチャート追加
$objWorksheet->addChart($objChart1);

//=====================
//    Bar Chart:STACKED
//=====================
//	チャート・データシリーズの生成
$objSeries2 = new DataSeries(
	DataSeries::TYPE_BARCHART,		// plotType
	DataSeries::GROUPING_PERCENT_STACKED,    // plotGrouping
	range(0, count($arrDataSeriesValues) - 1),      // plotOrder
	$arrDataSeriesLabels,                           // plotLabel
	$arrCategorysDataSeries,                        // plotCategory
	$arrDataSeriesValues                            // plotValues
);
//	プロットエリアにチャート・データシリーズに設定
$objPlotArea2 = new PlotArea(NULL, array($objSeries2));
//	レジェンド生成（各折れ線の説明を行う）
$objLegend2 = new Legend(Legend::POSITION_TOPRIGHT, NULL, false);
//  チャート・タイトル生成
$objTitle2 = new Title('売上データ:Bar Chart:STACKED');
//	チャート生成
$objChart2 = new Chart(
	'chart2',       // name
	$objTitle2,     // title
	$objLegend2,    // legend
	$objPlotArea2,  // plotArea
	TRUE,           // plotVisibleOnly
	0,              // displayBlanksAs
	NULL,           // xAxisLabel
	NULL		    // yAxisLabel
);
//	ワークシート内のチャート位置設定
$objChart2->setTopLeftPosition('H8');        // 左上
$objChart2->setBottomRightPosition('N20');   // 右下
//	ワークシートにチャート追加
$objWorksheet->addChart($objChart2);

//=====================
//    Line Chart 
//=====================
//	チャート・データシリーズの生成
$objSeries3 = new DataSeries(
	DataSeries::TYPE_LINECHART,		// plotType
	DataSeries::GROUPING_STANDARD,	// plotGrouping
	range(0, count($arrDataSeriesValues) - 1),      // plotOrder
	$arrDataSeriesLabels,                           // plotLabel
	$arrCategorysDataSeries,                        // plotCategory
	$arrDataSeriesValues                            // plotValues
);
//	プロットエリアにチャート・データシリーズに設定
$objPlotArea3 = new PlotArea(NULL, array($objSeries3));
//	レジェンド生成（各折れ線の説明を行う）
$objLegend3 = new Legend(Legend::POSITION_TOPRIGHT, NULL, false);
//  チャート・タイトル生成
$objTitle3 = new Title('売上データ:Line Chart');
//	チャート生成
$objChart3 = new Chart(
	'chart3',       // name
	$objTitle3,     // title
	$objLegend3,    // legend
	$objPlotArea3,  // plotArea
	TRUE,           // plotVisibleOnly
	0,              // displayBlanksAs
	NULL,           // xAxisLabel
	NULL		    // yAxisLabel
);
//	ワークシート内のチャート位置設定
$objChart3->setTopLeftPosition('A21');      // 左上
$objChart3->setBottomRightPosition('G33');  // 右下
//	ワークシートにチャート追加
$objWorksheet->addChart($objChart3);

//=====================
//    Area Chart 
//=====================
//	チャート・データシリーズの生成
$objSeries4 = new DataSeries(
	DataSeries::TYPE_AREACHART,				// plotType
	DataSeries::GROUPING_PERCENT_STACKED,	// plotGrouping
	range(0, count($arrDataSeriesValues) - 1),      // plotOrder
	$arrDataSeriesLabels,                           // plotLabel
	$arrCategorysDataSeries,                        // plotCategory
	$arrDataSeriesValues                            // plotValues
);
//	プロットエリアにチャート・データシリーズに設定
$objPlotArea4 = new PlotArea(NULL, array($objSeries4));
//	レジェンド生成（各折れ線の説明を行う）
$objLegend4 = new Legend(Legend::POSITION_TOPRIGHT, NULL, false);
//  チャート・タイトル生成
$objTitle4 = new Title('売上データ:Area Chart');
//	チャート生成
$objChart4 = new Chart(
	'chart4',       // name
	$objTitle4,     // title
	$objLegend4,    // legend
	$objPlotArea4,  // plotArea
	TRUE,           // plotVisibleOnly
	0,              // displayBlanksAs
	NULL,           // xAxisLabel
	NULL		    // yAxisLabel
);
//	ワークシート内のチャート位置設定
$objChart4->setTopLeftPosition('H21');       // 左上
$objChart4->setBottomRightPosition('N33');   // 右下
//	ワークシートにチャート追加
$objWorksheet->addChart($objChart4);

// [test-g-5-1.xlsx]:Excel2007形式で保存する
$objWriter = IOFactory::createWriter($objSpreadsheet, 'Xlsx');
$objWriter->setIncludeCharts(TRUE);
$objWriter->save('test-g-5-1.xlsx');
exit();
?>

出力されたエクセルファイルを見てみると以下の様になります。
（4個のチャート上に個別のタイプのグラフが生成されています。）

■チャートの表示位置でのエラー発生!!

上記のソースを作成中に一部間違いをしまして、最後のグラフの出力位置を以下の様にしていました。

//	ワークシート内のチャート位置設定
$objChart4->setTopLeftPosition('H21');       // 左上
$objChart4->setBottomRightPosition('G33');   // 右下
//	ワークシートにチャート追加
$objWorksheet->addChart($objChart4);

このまま気が付かずに実行し「test-g-5-1.xlsx」をエクセルで開いたのですが、以下の様なエラー表示がされました。

チャート位置で「左上」が 'H21' で「右下」が 'G33' というのは明らかに指定がおかしいので、エクセルとしてもチャートの表示ができなかったのでしょう。

皆さんもチャートの位置指定にはご注意ください。

2020/07/28

PHP PhpSpreadsheet\Chart 1個のチャート上に異なるタイプのグラフ(Bar Chart:棒グラフ、Line Chart:線グラフ、Area Chart:面グラフ)を作成する方法について

今回は1個のチャート上に「Bar Chart:棒グラフ」「Line Chart:線グラフ」「Area Chart:面グラフ」を持つ様にしたいと思います。

■「Bar Chart:棒グラフ」「Line Chart:線グラフ」「Area Chart:面グラフ」を持つチャートを作成

商品1～3をそれぞれ「Bar Chart:棒グラフ」「Line Chart:線グラフ」「Area Chart:面グラフ」で表示します。
商品1～3毎に PhpSpreadsheet\Chart\DataSeries クラスでチャート・データシリーズの生成を行います。
この時それぞれ別に PhpSpreadsheet\Chart\DataSeriesValues クラスで描画データの指定の配列を生成しておきます。

プロットエリアオブジェクト生成に、商品1～3のチャート・データシリーズを配列にして指定します。その後、このプロットエリアオブジェクトをチャート生成時にしてすれば3個のグラフを指定したことになります。

その他の処理は今までのものとさほど変わりがありません。

<?php
// ライブラリ読込
require '../vendor/autoload.php';
use PhpOffice\PhpSpreadsheet\Spreadsheet;
use PhpOffice\PhpSpreadsheet\Chart\Chart;
use PhpOffice\PhpSpreadsheet\Chart\DataSeries;
use PhpOffice\PhpSpreadsheet\Chart\DataSeriesValues;
use PhpOffice\PhpSpreadsheet\Chart\PlotArea;
use PhpOffice\PhpSpreadsheet\Chart\Title;
use PhpOffice\PhpSpreadsheet\Chart\Legend;
use PhpOffice\PhpSpreadsheet\IOFactory;

// Spreadsheetオブジェクト生成
$objSpreadsheet = new Spreadsheet();
// ワークシートオブジェクト取得
$objWorksheet = $objSpreadsheet->getActiveSheet();
//  チャート用テストデータ生成
$objWorksheet->fromArray(
	array(
		array('売上', '商品1', '商品2', '商品3'),
		array(  2016,      12,      18,      15),
		array(  2017,      15,      19,      10),
		array(  2018,      21,      23,      20),
		array(  2019,      18,      14,      12),
		array(  2020,      20,      21,      23),
	)
);

//  系列ラベルの指定
$arrDataSeriesLabels1 = array(
	new DataSeriesValues(DataSeriesValues::DATASERIES_TYPE_STRING, 'Worksheet!$B$1', NULL, 1),       //商品1
);
$arrDataSeriesLabels2 = array(
	new DataSeriesValues(DataSeriesValues::DATASERIES_TYPE_STRING, 'Worksheet!$C$1', NULL, 1),       //商品2
);
$arrDataSeriesLabels3 = array(
	new DataSeriesValues(DataSeriesValues::DATASERIES_TYPE_STRING, 'Worksheet!$D$1', NULL, 1),       //商品3
);

//  X軸ラベルの指定
$arrCategorysDataSeries = array(
	new DataSeriesValues(DataSeriesValues::DATASERIES_TYPE_STRING, 'Worksheet!$A$2:$A$6', NULL, 5),	//2016 to 2020
);

//  商品1:描画データの指定
$arrDataSeriesValues1 = array(
	new DataSeriesValues(DataSeriesValues::DATASERIES_TYPE_NUMBER, 'Worksheet!$B$2:$B$6', NULL, 5),  //商品1
);
//	商品1:チャート・データシリーズの生成
$objSeries1 = new DataSeries(
	DataSeries::TYPE_BARCHART,		// plotType
	DataSeries::GROUPING_CLUSTERED,	// plotGrouping
	range(0, count($arrDataSeriesValues1) - 1),     // plotOrder
	$arrDataSeriesLabels1,                          // plotLabel
	$arrCategorysDataSeries,                        // plotCategory
	$arrDataSeriesValues1                           // plotValues
);

//  商品2:描画データの指定
$arrDataSeriesValues2 = array(
	new DataSeriesValues(DataSeriesValues::DATASERIES_TYPE_NUMBER, 'Worksheet!$C$2:$C$6', NULL, 5),  //商品2
);
//	商品2:チャート・データシリーズの生成
$objSeries2 = new DataSeries(
	DataSeries::TYPE_LINECHART,		// plotType
	DataSeries::GROUPING_STANDARD,	// plotGrouping
	range(0, count($arrDataSeriesValues2) - 1),     // plotOrder
	$arrDataSeriesLabels2,                          // plotLabel
	$arrCategorysDataSeries,                        // plotCategory
	$arrDataSeriesValues2                           // plotValues
);

//  商品3:描画データの指定
$arrDataSeriesValues3 = array(
	new DataSeriesValues(DataSeriesValues::DATASERIES_TYPE_NUMBER, 'Worksheet!$D$2:$D$6', NULL, 5),  //商品3
);
//	商品3:チャート・データシリーズの生成
$objSeries3 = new DataSeries(
	DataSeries::TYPE_AREACHART,		// plotType
	DataSeries::GROUPING_STANDARD,	// plotGrouping
	range(0, count($arrDataSeriesValues3) - 1),     // plotOrder
	$arrDataSeriesLabels3,                          // plotLabel
	$arrCategorysDataSeries,                        // plotCategory
	$arrDataSeriesValues3                           // plotValues
);

//	プロットエリアにチャート・データシリーズに設定
$objPlotArea = new PlotArea(NULL, array($objSeries1, $objSeries2, $objSeries3));
//	レジェンド生成（各折れ線の説明を行う）
$objLegend = new Legend(Legend::POSITION_TOPRIGHT, NULL, false);
//  チャート・タイトル生成
$objTitle = new Title('3種類-Chart');
//	チャート生成
$objChart = new Chart(
	'chart1',       // name
	$objTitle,      // title
	$objLegend,     // legend
	$objPlotArea,   // plotArea
	TRUE,           // plotVisibleOnly
	0,              // displayBlanksAs
	NULL,           // xAxisLabel
	NULL		    // yAxisLabel
);
//	ワークシート内のチャート位置設定
$objChart->setTopLeftPosition('A8');        // 左上
$objChart->setBottomRightPosition('G20');   // 右下

//	ワークシートにチャート追加
$objWorksheet->addChart($objChart);

// [test-g-4-1.xlsx]:Excel2007形式で保存する
$objWriter = IOFactory::createWriter($objSpreadsheet, 'Xlsx');
$objWriter->setIncludeCharts(TRUE);
$objWriter->save('test-g-4-1.xlsx');
exit();
?>

出力されたエクセルファイルを見てみると以下の様になります。
（1個のチャート上に3種類のタイプのグラフが生成されています。）

■ワークシートにチャートが存在するエクセルファイル（テンプレート）の系列データ部分を変更し別のファイルとして登録

■2個のチャート上にそれぞれ「Pie Chart:円グラフ」「Donut Chart:ドーナツグラフ」のグラフを作成

■「Radar Chart:レーダーチャート」のグラフを作成

■4個のチャート上にそれぞれ「Bar Chart:棒グラフ」「Bar Chart:棒グラフ(積み上げ)」「Line Chart:線グラフ」「Area Chart:面グラフ」持つ様に作成

■チャートの表示位置でのエラー発生!!

■「Bar Chart:棒グラフ」「Line Chart:線グラフ」「Area Chart:面グラフ」を持つチャートを作成