SpreadJS レポートシート入門4 - チャート（1） - | MESCIUS.devlog

JavaScriptスプレッドシートライブラリ「SpreadJS（スプレッドJS）」ではExcel互換のスプレッドシート機能だけでなく、さまざまなレイアウトの帳票が開発できる「レポートシート」機能が利用可能です。

この連載では、レポートシートについて、基本的な使い方や便利な応用例などをご紹介します。今回は2025年3月26日にリリースした最新バージョン「V18J」の新機能「データチャート」を使用して、チャートやクロス集計表を含むダッシュボード形式の帳票の作成方法を解説いたします。

データチャートについては以下の記事もご覧ください。

テンプレートシート（帳票レイアウト定義）の作成
Webアプリケーションにレポートシートを組み込む
- 開発環境
- Webアプリケーションの作成
さいごに

テンプレートシート（帳票レイアウト定義）の作成

デザイナの起動

まずは帳票レイアウトを定義するテンプレートシートを作成していきます。コードで組むことも可能ですが、GUIでデザインできる製品付属のSpreadJSデザイナや、オンラインデザイナを使用する方法がおすすめです。

今回はデスクトップアプリのSpreadJSデザイナを使用していきます。無償のトライアル版は以下よりダウンロード可能です。

インストール方法等は製品ヘルプをご覧ください。

デザイナを起動し、メニューから「挿入」-「レポートシート」を選択すると、ワークブックにレポートシートが追加され、帳票のデザインが可能になります。

データソース（テーブル）の追加

まずは帳票に表示するデータソース（テーブル）の設定を行います。今回はREST APIのモックサーバーを手軽に構築できるライブラリ「json-server」を使って連携を行います。json-serverの使用方法については以下の記事で解説しているのでこちらをご覧ください。

今回は以下のようなJSONデータを使用します（長いので一部のみ抜粋）。こちらよりダウンロード可能です。

{
    "sales": [
        {
            "month": "2024/04",
            "category": "家具",
            "product": "ソファ",
            "sales": 700000,
            "store": "東京本店",
            "age": "10代"
        },
        {
            "month": "2024/04",
            "category": "家電",
            "product": "冷蔵庫",
            "sales": 850000,
            "store": "大阪支店",
            "age": "20代"
        },
・・・（省略）・・・

プロジェクトのフォルダに上記JSONファイルを配置し、ターミナル等から以下のコマンドを起動してモックのAPIを立ち上げます。

json-server sales.json -p 3000

以下のような画面が立ち上がったらAPIの起動は成功です。

APIが起動したら、「テーブルの追加」のメニューから起動したAPIのURLを設定し、「Sales」テーブルを追加します。

積み上げ縦棒チャートを追加する

テーブルが追加出来たら、帳票をデザインしていきます。まずはデータチャートを使用して、月ごとの売り上げの推移を示す縦棒チャートを作成します。「挿入」⇒「データチャート」のメニューを選択し、縦棒チャートを追加します。

右側のパネルから「データバインディング」のメニューを選択し、「Sales」テーブルを選択して表示されるフィールドから、以下のフィールドを各項目にドラッグ＆ドロップしてデータチャートのバインド設定を行います。

項目	設定値
値	Sum(sales)
カテゴリ	month
色	category

設定が完了すると、以下のようにデータチャートで縦棒チャートが作成され、シート上にデータが無くてもチャートが作成できることが確認できます。

あとは「インスペクター」のメニューからチャートの外観などを調整します。

タイトル

プロパティ	設定値
タイトル	月別の売上状況
フォントファミリー	IPAexゴシック
フォントサイズ	14

ツールチップ

プロパティ	設定値
フォントファミリー	IPAexゴシック
フォントサイズ	8

カテゴリ軸

プロパティ	設定値
フォントファミリー	IPAexゴシック
フォントサイズ	8

値軸

プロパティ	設定値
フォントファミリー	IPAexゴシック
フォントサイズ	8
表示形式	カスタム
カスタム	“¥”#,##0

凡例

プロパティ	設定値
フォントファミリー	IPAexゴシック
フォントサイズ	8
位置	下

設定が完了すると以下のような積み上げ縦棒チャートが作成されます。

円チャート（支店別の売上比率）を追加する

次に同じくデータチャートを使用して、支店別の売上比率を円チャートで表示します。「挿入」⇒「データチャート」のメニューを選択し、円チャートを追加します。

先ほどと同様に、右側のパネルから「データバインディング」のメニューを選択し、「Sales」テーブルを選択して表示されるフィールドから、以下のフィールドを各項目にドラッグ＆ドロップしてデータチャートのバインド設定を行います。

項目	設定値
値	Sum(sales)
カテゴリ	store

データバインドが完了したら、こちらも「インスペクター」のメニューからチャートの外観などを調整します。

タイトル

プロパティ	設定値
タイトル	支店別の売上比率
フォントファミリー	IPAexゴシック
フォントサイズ	9

データラベル

プロパティ	設定値
フォントファミリー	IPAexゴシック
フォントサイズ	7

ツールチップ

プロパティ	設定値
フォントファミリー	IPAexゴシック
フォントサイズ	8

凡例

プロパティ	設定値
フォントファミリー	IPAexゴシック
フォントサイズ	7
位置	下
余白	5

設定が完了すると以下のような円チャートが作成されます。

円チャート（購入者年代別の売上比率）を追加する

次に購入者年代別の売上比率を示す円チャートを追加します。先ほど追加したチャートをコピーして貼り付けます。

右側のパネルから「データバインディング」のメニューを選択し、「カテゴリ」に設定されている「store」を「age」に変更し、購入者の年代別の売上比率を表示するように修正します。

項目	設定値
カテゴリ	age

「インスペクター」のメニューからチャートのタイトルを修正します。

タイトル

プロパティ	設定値
タイトル	購入者年代別の売上比率

設定が完了すると以下のように2つ目の円チャートが作成されます。

クロス集計表を追加する

最後に仕上げとして月、および支店ごとの売り上げをクロス集計した明細表を追加します。

V18Jの新機能である「コンテナ」を使用することで、UI操作によるクロス集計表の作成を簡単に実現できるので、今回はコンテナを使用してクロス集計表を作成する方法もご紹介します。

クロス集計表を追加したいセルを右クリックし、「コンテナの挿入」を選択すると、以下のようにコンテナが追加されます。

左側の「データソース」のパネルからフィールドをドラッグ＆ドロップしてデータバインドを行います。ラベルが自動で表示されますが、今回は使用しないので、左側のパネルから各ラベルのチェックを外してラベルを非表示にします。

次にパネルから「sales」のフィールドを設定したセルのセル型をサマリーに変更します。

さらにコンテナの外側に集計用のセルを定義します。

あとはExcelの感覚でセルの罫線や背景色、文字色などを調整します。また、1～2行目のセルを結合し見出しを作成します。

スピルしたくないセルをピン留めする

以上でレイアウトの作成は完了なので、ここで一度プレビューしてみると、以下のように左側の棒グラフと右側の円グラフの間に空列が追加されてしまいます。

これはレポートシートを実行したときにクロス集計表の部分にデータが流し込まれ、セルがスピル（挿入）された分の空列が、左側のチャートの横に挿入されてしまったためです。

行数固定のレイアウトなどであれば「スピル時に上書きする」のオプションで対応可能ですが（詳細はこちらの記事をご覧ください）、今回はグループ型とサマリー型のセルを使用しているため、このオプションは使用できません。

このような場合は伸長する対象の列のうち、伸長させたくないセルをピン留めすることで対応が可能です。今回の場合は結合したA1セル、およびC3～C24セルに対して右側のパネルから「列をピン留め」のオプションをONにします。

設定後、再度プレビューを実行すると、空列が挿入されていないことが確認できます。

Webアプリケーションにレポートシートを組み込む

最後に仕上げとして作成したテンプレートシートを保存して、Webアプリケーションに組み込んでレポートシートを実行してみたいと思います。あらかじめ先ほど作成したテンプレートシートをsjs形式で保存しておいてください。ファイル名は「dashboard-report.sjs」としました。

開発環境

今回は開発環境として以下を使用します。

Webアプリケーションの作成

「index.html」ファイルを作成し、製品版、またはトライアル版に含まれるSpreadJSの各種ライブラリをコピーして参照を追加し、加えてレポートシートを表示する領域を定義します。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>レポートシートサンプル</title>
    <link rel="stylesheet" type="text/css" href="css/gc.spread.sheets.excel2013white.18.0.6.css">
    <script src="scripts/gc.spread.sheets.all.18.0.6.min.js" type="text/javascript"></script>
    <script src="scripts/gc.spread.sheets.resources.ja.18.0.6.min.js" type="text/javascript"></script>
    <script src="scripts/gc.spread.sheets.io.18.0.6.min.js" type="text/javascript"></script>
    <script src="scripts/gc.spread.sheets.shapes.18.0.6.min.js" type="text/javascript"></script>
    <script src="scripts/gc.spread.sheets.charts.18.0.6.min.js" type="text/javascript"></script>
    <script src="scripts/gc.spread.sheets.datacharts.18.0.6.min.js" type="text/javascript"></script>
    <script src="scripts/gc.spread.sheets.print.18.0.6.min.js" type="text/javascript"></script>
    <script src="scripts/gc.spread.sheets.pdf.18.0.6.min.js" type="text/javascript"></script>
    <script src="scripts/gc.spread.report.reportsheet.18.0.6.min.js" type='text/javascript'></script>
    <script src="scripts/app.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="css/styles.css">

</head>

<body>
    <div class="btn-container">
        <button id="previous">前のページ</button>
        <span id="current"></span>ページ／<span id="all"></span>ページ
        <button id="next">次のページ</button>
        <button id="print">印刷</button>
    </div>
    <div class="show-area">
        <div id="ss"></div>
    </div>
</body>

</html>

「scripts」フォルダ配下に「app.js」ファイルを作成し、先ほど保存したsjsファイルを読み込んでレポートシートを実行します。
※ ライセンスキーを設定しない場合、トライアル版を示すメッセージが表示されます。ライセンスキーの設定方法についてはこちらをご覧ください。

// 日本語カルチャー設定
GC.Spread.Common.CultureManager.culture("ja-jp");
GC.Spread.Sheets.LicenseKey = "ここにSpreadJSのライセンスキーを設定します";

// SpreadJSの設定
document.addEventListener("DOMContentLoaded", () => {
    const previousButton = document.getElementById('previous');
    const nextButton = document.getElementById('next');
    const printButton = document.getElementById('print');
    const spread = new GC.Spread.Sheets.Workbook("ss");
    let reportSheet;
    //----------------------------------------------------------------
    // sjs形式のテンプレートシートを読み込んでレポートシートを実行します
    //----------------------------------------------------------------
    const res = fetch('reports/dashboard-report.sjs').then((response) => response.blob())
        .then((myBlob) => {
            spread.open(myBlob, () => {
                console.log(`読み込み成功`);
                reportSheet = spread.getSheetTab(0);

                // レポートシートのオプション設定
                reportSheet.renderMode('PaginatedPreview');
                reportSheet.options.printAllPages = true;

                // レポートシートの印刷設定
                var printInfo = reportSheet.printInfo();
                printInfo.showBorder(false);
                printInfo.zoomFactor(1);
                reportSheet.printInfo(printInfo);
                initPage();
            }, (e) => {
                console.log(`***ERR*** エラーコード（${e.errorCode}） : ${e.errorMessage}`);
            });
        });


    //------------------------------------------
    // 前のページボタン押下時の処理
    //------------------------------------------    
    previousButton.onclick = function () {
        const page = reportSheet.currentPage();
        if (page != 0) {
            reportSheet.currentPage(page - 1);
            initPage()
        }
    }

    //------------------------------------------
    // 次のページボタン押下時の処理
    //------------------------------------------    
    nextButton.onclick = function () {
        const page = reportSheet.currentPage();
        if (page < reportSheet.getPagesCount() - 1) {
            reportSheet.currentPage(page + 1);
            initPage()
        }
    }

    //------------------------------------------
    // 印刷ボタン押下時の処理
    //------------------------------------------
    printButton.onclick = function () {
        spread.print();
    }

    //------------------------------------------
    // 現在のページと全ページ数の表示
    //------------------------------------------      
    function initPage() {
        document.getElementById('current').innerHTML = reportSheet.currentPage() + 1;
        document.getElementById('all').innerHTML = reportSheet.getPagesCount();
    }
});

「css/styles.css」を作成し、スタイルの設定を追加します。

body {
    width: 1130px;
}

.btn-container {
    margin: 15px;
 }

.show-area {
    margin: 15px;
    border: solid black;
    height: 670px;
}

#ss {
    width: 1095px;
    height: 670px;
}

以上でWebアプリケーションの作成は完了です。「index.html」を右クリックして「Open with Live Server」を実行し、開発サーバーでアプリケーションを起動します。
※ アプリケーションの実行前に、あらかじめjson-serverを実行してAPIを起動してください。

起動したアプリケーション上でレポートシートが実行され、データチャートを使用した帳票をブラウザ上に表示することができました。

今回作成したアプリケーションは以下よりダウンロード可能です。

さいごに

今回はSpreadJSの「レポートシート」でチャート（データチャート）を使用した帳票の作成方法を解説しました。レポートシートを使用することで、SpreadJSを使用した帳票開発が格段に楽になりますので、是非お試しいただけますと幸いです。

弊社Webサイトには、レポートシートで作成した数々の帳票サンプルが確認できるデモアプリケーションや、無料のトライアル版がございますので、こちらもご確認ください。

＼この記事をシェアする／