ビジネスの指標を直感的に見せる！データチャートの「ファンネルチャート」と「ツリーマップチャート」

2025年10月30日にリリースされた「SpreadJS（スプレッドJS）」の最新バージョン「V18.2J」では、データチャートで使用できるチャート種別としてに新しく「ファンネルチャート」と「ツリーマップチャート」が追加されました。

本記事では、データチャートのファンネルチャートとツリーマップチャートを作成してカスタマイズする方法について解説します。

開発環境
事前準備
サンプルの構成
サンプルの実装
ファンネルチャートの作成
ファンネルチャートのカスタマイズ
ツリーマップチャートの作成
ツリーマップチャートのカスタマイズ（データチャートの汎用スタイル）
さいごに

開発環境

事前準備

今回作成するファイルは次の4つです。

index.html	ページ本体。ページの要素としてSpreadJSコントロールを配置します
app.js	SpreadJSコントロールを作成するコードを記載します
data.js	データチャートに表示するデータを記載します
styles.css	各種ページ要素のスタイル定義を記載します

SpreadJSコントロールの使用にはSpreadJSのモジュールを環境に配置する必要があります。npmなどから入手する方法もありますが、今回は環境に直接SpreadJSのモジュールを配置していきます。あらかじめSpreadJSの製品版かトライアル版をご用意ください。トライアル版は以下より無償で入手可能です。

製品版、またはトライアル版をダウンロードしたら、ZIPファイルを解凍し、以下のファイルを環境にコピーします。CSSファイルは以下に記載のもの含め7種類あるのでお好みのテーマのものを選択してください。

scripts/gc.spread.sheets.all.18.2.4.min.js
scripts/plugins/gc.spread.sheets.shapes.18.2.4.min.js
scripts/plugins/gc.spread.sheets.datacharts.18.2.4.min.js
scripts/resources/gc.spread.sheets.resources.ja.18.2.4.min.js
css/gc.spread.sheets.excel2013white.18.2.4.css

サンプルの構成

今回作成するサンプルの概要は次のとおりです。

SpreadJSは以下の2種類のチャート機能を提供しています。

シート上に設定された値をデータソースとするExcel互換チャート
データマネージャーで追加したテーブルをデータソースとするデータチャート

今回紹介するのは後者のデータチャートに追加された「ファンネルチャート」と「ツリーマップチャート」です。

このサンプルではファンネルチャートとツリーマップチャートをそれぞれ別のシート上に配置し、データチャート構成パネルと連結することで実行時に各チャートを動的に変更できるようにします。

Excel互換チャートとデータチャートの違いやデータチャート構成パネル、およびデータチャートの基本的な使用方法については、以下の記事で詳しく解説しているのでご一読いただければと思います。

サンプルの実装

最初に、SpreadJSライブラリの参照設定をHTMLファイルに追加し、SpreadJSのモジュールに加えて、前述の「app.js」、「data.js」、および「styles.css」への参照も追加します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link href="css/gc.spread.sheets.excel2013white.18.2.4.css" rel="stylesheet" />
    <script src="scripts/gc.spread.sheets.all.18.2.4.min.js"></script>
    <script src="scripts/plugins/gc.spread.sheets.shapes.18.2.4.min.js"></script>
    <script src="scripts/plugins/gc.spread.sheets.datacharts.18.2.4.min.js"></script>
    <script src="scripts/resources/gc.spread.sheets.resources.ja.18.2.4.min.js"></script>
    <link href="css/styles.css" rel="stylesheet" />
    <script src="scripts/data.js"></script>
    <script src="scripts/app.js"></script>
</head>
<body>
    <div id="ss"></div>
    <div class="check-config">
        <button type="button" id="check-button">構成内容の確認</button>
    </div>
    <div id="chart-panel"></div>
</body>
</html>

続いて「app.js」を以下のように作成します。
※ ライセンスキーを設定しない場合、トライアル版を示すメッセージが表示されます。ライセンスキーの設定方法についてはこちらをご覧ください。

なお、下記の「・・・（中略）・・・」については以降の項目で解説します。

// 名前空間のエイリアス名
const spreadNS = GC.Spread.Sheets;

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

window.onload = async () => {
  // SpreadJSの生成
  const spread = new spreadNS.Workbook("ss", { sheetCount: 2 });

  // シートの設定
  spread.getSheet(0).name('ファンネル');
  spread.getSheet(1).name('ツリーマップ');
  for (i in spread.sheets) {
    spread.getSheet(i).options.gridline.showHorizontalGridline = false;
    spread.getSheet(i).options.gridline.showVerticalGridline = false;
    spread.getSheet(i).options.selectionBorderColor = "transparent";
  }

  // データチャート用テーブルの作成
  // funnelRecords, funnelColumns, treemapRecords, treemapColumns <== data.jsで定義
  await initDataManager(spread, funnelRecords, funnelColumns, 'Funnel');
  await initDataManager(spread, treemapRecords, treemapColumns, 'Treemap');

  // データチャートの作成
  initFunnelDataChart(spread.getSheet(0));
  initTreemapDataChart(spread.getSheet(1));

  // データチャート構成パネルの作成
  ・・・（中略）・・・

  // データチャート構成パネルの設定内容の確認
  ・・・（中略）・・・
}

// ■■■ データチャート用テーブルの作成 ■■■
const initDataManager = async (spread, records, columns, tablename) => {
  await spread.dataManager().addTable(tablename, {
    data: records.map(record => {
      const item = {};
      columns.forEach((column, index) => {
        item[column] = record[index];
      });
      return item;
    }),
  }).fetch();
}

// ■■■ ファンネルチャート ■■■
const initFunnelDataChart = (sheet) => {
  ・・・（中略）・・・
}

// ■■■ ツリーマップチャート ■■■
const initTreemapDataChart = (sheet) => {
  ・・・（中略）・・・
}

initDataManagerでは、DataManagerクラスのaddTableメソッドを使って各データチャートに連結するテーブルを作成します。ファンネルチャートを作成するinitFunnelDataChartとツリーマップチャートを作成するinitTreemapDataChartについては、後の項目で解説します。

続いて、ファンネルチャートとツリーマップチャートに設定するデータと列構成を次のように作成します。

// ファンネルチャートのデータ
const funnelRecords = [
  ['訪問', 5350],
  ['閲覧', 3503],
  ['カート', 1651],
  ['購入手続き', 916],
  ['決済', 587],
];

// ファンネルチャートの列構成
const funnelColumns = ['Stage', 'Count'];

// ツリーマップチャートのデータ
const treemapRecords = [
  ['北海道地', '北海道', 518900],
  ['東北地方', '青森', 270500],
  ['東北地方', '岩手', 260800],
  ['東北地方', '宮城', 363100],
  ['東北地方', '秋田', 477500],
  ['東北地方', '山形', 349500],
  ['東北地方', '福島', 381900],
  ['関東地方', '茨城', 352800],
  ['関東地方', '栃木', 316600],
  ['関東地方', '群馬', 74100],
  ['関東地方', '埼玉', 144700],
  ['関東地方', '千葉', 295800],
  ['関東地方', '東京', 468],
  ['関東地方', '神奈川', 14200],
  ['北陸地方', '新潟', 588600],
  ['北陸地方', '富山', 184300],
  ['北陸地方', '石川', 117600],
  ['北陸地方', '福井', 124000],
  ['中部地方', '山梨', 24100],
  ['中部地方', '長野', 187800],
  ['中部地方', '岐阜', 103200],
  ['中部地方', '静岡', 76700],
  ['中部地方', '愛知', 128000],
  ['近畿地方', '三重', 131100],
  ['近畿地方', '滋賀', 157000],
  ['近畿地方', '京都', 70800],
  ['近畿地方', '大阪', 20100],
  ['近畿地方', '兵庫', 173400],
  ['近畿地方', '奈良', 41500],
  ['近畿地方', '和歌山', 29900],
  ['中国地方', '鳥取', 64000],
  ['中国地方', '島根', 87400],
  ['中国地方', '岡山', 148900],
  ['中国地方', '広島', 109900],
  ['中国地方', '山口', 89200],
  ['四国地方', '徳島', 52900],
  ['四国地方', '香川', 52300],
  ['四国地方', '愛媛', 65700],
  ['四国地方', '高知', 49100],
  ['九州地方', '福岡', 173900],
  ['九州地方', '佐賀', 128000],
  ['九州地方', '長崎', 47500],
  ['九州地方', '熊本', 167500],
  ['九州地方', '大分', 97300],
  ['九州地方', '宮崎', 66400],
  ['九州地方', '鹿児島', 86800],
  ['九州地方', '沖縄', 1870],
];

// ツリーマップチャートの列構成
const treemapColumns = ['Region', 'Prefecture', 'Production'];

最後に「styles.css」にスタイルを記述します。

/* SpreadJSのスタイル */
#ss {
   position: absolute;
   top: 0px;
   left: 0px;
   inline-size: 900px;
   block-size: 500px;
   border: 1px solid silver;
}

/* データチャート構成パネルのスタイル */
.check-config{
   position: absolute;
   top: 0px;
   left: 910px;
   inline-size: 310px;
   block-size: 30px;
}

#chart-panel{
   position: absolute;
   top: 30px;
   left: 910px;
   inline-size: 310px;
   block-size: 470px;
   border: 1px solid silver;
}

/* その他のスタイル */
body {
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
}

ファンネルチャートの作成

ファンネルチャートは、見込み客が商談を経て受注に至るまでの営業プロセスなどを可視化することで、目標に至るまでのボトルネックを特定する際に利用されます。

ここでは「ウェブサイト訪問者のコンバージョン（※）」をファンネルチャートにしています。
※ コンバージョン： Webサイト訪問者が購入や会員登録などに至る行動

先ほどの「app.js」で省略していたinitFunnelDataChartは次のように記述します。

// ■■■ ファンネルチャート ■■■
const initFunnelDataChart = (sheet) => {
  // ファンネルチャートの生成
  const funnelDataChart = sheet.dataCharts.add(
    'funnel',
    20, 20, 800, 410,
    spreadNS.DataCharts.DataChartType.funnel
  );

  // ファンネルチャートの設定
  funnelDataChart.setChartConfig({
    tableName: 'Funnel',
    plots: [{
      type: spreadNS.DataCharts.DataChartType.funnel,
      encodings: {
        values: [{ field: 'Count', aggregate: spreadNS.DataCharts.Aggregate.sum }],
        category: { field: 'Stage' }, // カテゴリと値のバインディング
        // details: [{ field: 'Stage' }], // 詳細と値のバインディング
      },
      config: {
        funnel: {
          funnelType: spreadNS.DataCharts.FunnelType.default,
          orientation: spreadNS.DataCharts.Orientation.vertical,
          reversed: false,
          topWidth: 0.7,
          bottomWidth: 0.3,
          neckHeight: 0.3
        },
        palette: ["#ddca9a", "#778deb", "#cb9fbb", "#b5eae2", "#7270be", "#a6c7a7"],
        text: [{
          textStyle: {
            color: 'darkblue', fontFamily: 'メイリオ',
            fontSize: 16
          }, template: '{valueField.value}'
        }],
        tooltip: [{ textStyle: { color: "blue", fontFamily: 'メイリオ', fontSize: 16 } }],
        updateAnimation: {
          duration: 600,
          easing: spreadNS.DataCharts.AnimationEasing.linear,
        },
      }
    }],
    config: {
      header: {
        padding: { top: 10, },
        textStyle: { color: 'blue', fontFamily: 'メイリオ', fontSize: 20, fontWeight: 'Bold' },
        title: 'ウェブサイト訪問者のコンバージョン',
      },
      plotAreas: [{ padding: { left: 20, right: 20, top: 10, bottom: 20 } }],
    }
  });
}

最初にWorksheetクラスのdataChartsプロパティが参照するDataChartManagerクラスのaddメソッドを使ってファンネルチャート（funnelDataChart）を作成します。

次に、作成したfunnelDataChart（DataChartクラス）のsetChartConfigメソッドを使ってファンネルチャートを構成します。このメソッドではIDataChartConfigインターフェイスの3つのプロパティを使って、連結するデータテーブルの名称、プロット領域のスタイル、チャートのタイトルやカラーパレットなどを設定します。

プロパティ	設定値のデータ型	説明
tableName	String	連結するテーブル名
plots	IPlotOption配列	プロット領域のスタイル
config	IConfigOption	タイトルやカラーパレットなど

ファンネルチャートの各種設定を試せるデモがあるので、そちらもご活用ください。

ファンネルチャートのカスタマイズ

ファンネルのタイプ、方向、反転、上下幅などのファンネルチャート独自のスタイルは、IPlotOptionのconfigプロパティ（IPlotConfigOptionインターフェイス）のfunnelプロパティが参照するIFunnelOptionインターフェイスの各プロパティで設定します。

IfunnelOptionのプロパティ	説明
funnelType	横棒／デフォルト／ピラミッド　（※1）
orientation	水平／垂直
reversed	反転の有無
topWidth	最上部の幅　（※2）
bottomWidth	最下部の幅　（※2）
neckHeight	ネックの高さ　（※2）

※1 後述の「カテゴリと値」のバインディングでのみ有効
※2 後述の「詳細と値」のバインディングでのみ有効

ファンネルチャートには、下記の2つのデータバインディングモードがあります。

バインディングモード	説明
カテゴリと値	セグメントの高さはすべて同じで、各セグメントの上部の幅でデータの大きさを表現します。
詳細と値	セグメントの高さでデータの大きさを表現し、全体の形状は最上部と最下部の幅、およびネックの高さで設定します。

これらのモードは、IPlotOptionインターフェイスのencodingsプロパティが参照するIPlotEncodingsOptionインターフェイスを使って切り替えることができます。

  funnelDataChart.setChartConfig({
    tableName: 'Funnel',
    plots: [{
      type: spreadNS.DataCharts.DataChartType.funnel,
      encodings: {
        values: [{ field: 'Count', aggregate: spreadNS.DataCharts.Aggregate.sum }],
        category: { field: 'Stage' }, // カテゴリと値のバインディング
        // details: [{ field: 'Stage' }], // 詳細と値のバインディング
      },
      ・・・（中略）・・・
    }],
    config: {
      ・・・（中略）・・・
    }
  });

以下の動画では、データチャート構成パネルを使って「カテゴリと値」でバインディングしたファンネルチャートのスタイルを変更しています。

データチャート構成パネルで「データバインディング」タブをアクティブにし、Stageフィールドの連結先を変更することでデータバインディングモード（カテゴリと値／詳細と値）を変更できます。

データチャートの汎用スタイルについては、末尾の「データチャートの汎用スタイルのカスタマイズ」をご参照ください。

ツリーマップチャートの作成

ツリーマップチャートは、階層構造を持つデータにおいてカテゴリとサブカテゴリの相対的な割合を表示する場合に使用されます。

ここでは、令和7年の米収穫量を表すツリーマップチャートを作成します。この例では「地方」がカテゴリに、「都道府県」がサブカテゴリになります。最初に掲載した「app.js」で省略していたinitTreemapDataChartを次のように記述します。

// ■■■ ツリーマップチャート ■■■
const initTreemapDataChart = (sheet) => {
  // ツリーマップチャートの生成
  const treemapDataChart = sheet.dataCharts.add(
    'treemap',
    20, 20, 800, 410,
    spreadNS.DataCharts.DataChartType.treemap
  );

  // ツリーマップチャートの設定
  treemapDataChart.setChartConfig({
    tableName: 'Treemap',
    plots: [{
      type: spreadNS.DataCharts.DataChartType.treemap,
      encodings: {
        values: [{ field: 'Production', aggregate: spreadNS.DataCharts.Aggregate.sum }],
        details: [{ field: 'Region' }, { field: 'Prefecture' }],
      },
      config: {
        palette: ["#ddca9a", "#778deb", "#cb9fbb", "#b5eae2", "#7270be", "#a6c7a7"],
        style: { fillOpacity: 0.6 },
        text: [{
          textStyle: { color: 'darkblue', fontFamily: 'メイリオ', fontSize: 16 },
          template: '{detailFields.value}',
        }],
        tooltip: [{ textStyle: { color: "blue", fontFamily: 'メイリオ', fontSize: 16 } }],
        updateAnimation: {
          duration: 600,
          easing: spreadNS.DataCharts.AnimationEasing.linear,
        },
      }
    }],
    config: {
      header: {
        padding: { top: 10, },
        textStyle: { color: 'blue', fontFamily: 'メイリオ', fontSize: 20, fontWeight: 'Bold' },
        title: '令和７年米収穫　[単位：t]',
      },
      plotAreas: [{ padding: { left: 20, right: 20, top: 10, bottom: 20 } }],
    }
  });
}

ツリーマップチャートの作成方法は、ファンネルチャートと同じです。

また、ツリーマップチャートのデモをご用意しているので、そちらもご参照ください。

ツリーマップチャートのカスタマイズ
（データチャートの汎用スタイル）

ツリーマップチャートでは、ツリーマップ専用のスタイルはありませんが、カラーパレット、グラフの透明度、枠線スタイル、背景、余白、ツールチップなどのデータチャートの汎用スタイルをカスタマイズすることが可能です。このサンプルでは、次の項目をカスタマイズしています。

カラーパレット（IDataChartConfig -> plots -> config -> palette）
グラフの透明度（IDataChartConfig -> plots -> config -> style -> fillOpacity）
データラベル（IDataChartConfig -> plots -> config -> text）
ツールチップ（IDataChartConfig -> plots -> config -> tooltip）
アニメーション（IDataChartConfig -> plots -> config -> updateAnimation）
タイトル（IDataChartConfig -> config -> header）
余白（IDataChartConfig -> config -> plotAreas -> padding）

表記	説明
IDataChartConfig -> plots -> config	IPlotConfigOptionインターフェイス
IDataChartConfig -> config	IConfigOptionインターフェイス

また、データチャートの各要素のスタイルについてヘルプで詳しく解説しているので、ご一読いただければと思います。

今回ご紹介した内容については以下のデモアプリケーションで確認できます（“Run Project”をクリックするとデモが起動します）。上記で省略していた「データチャート構成パネル」に関連するコードについては、このデモアプリケーションでご確認ください。

さいごに

今回の記事では、データチャートのファンネルチャートとツリーマップチャートを作成してカスタマイズする方法についてご紹介しました。

製品サイトでは、SpreadJSの機能を手軽に体験できるデモアプリケーションやトライアル版も公開しておりますので、こちらもご確認ください。

また、ご導入前の製品に関するご相談、ご導入後の各種サービスに関するご質問など、お気軽にお問合せください。

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