syncfusion-flutter-funnel-charts

Syncfusion Flutter Funnel Chart

このスキルでは、データをファネル形状で可視化する Syncfusion Flutter の SfFunnelChart ウィジェットを扱います。通常、値が段階的に減少するプロセスの各段階を表すために使用します。

このスキルを使用するタイミング

次のような場合に、このスキルを使用します。

• コンバージョンファネルを可視化する：営業またはマーケティングプロセスの各段階を表示する
• 階層データを表示する：段階的に減少する値を示す
• プロセスの段階を追跡する：ワークフロー、パイプライン、または逐次プロセスにおける各段階を追跡する
• コンバージョン率を分析する：異なる段階（見込み客、顧客候補、顧客）ごとのコンバージョン率を分析する
• 営業パイプラインを表示する：さまざまな段階を進む案件を示す
• フィルタリングプロセスを可視化する：各ステップでデータが減少する様子を示す
• 採用ファネルを表示する：採用段階を進む候補者を示す
• マーケティング分析を作成する：認知からコンバージョンまでのユーザージャーニーを示す
• プロセス効率を表す：各段階でのデータの減少を示す
• 分析ダッシュボードを構築する：ビジネス指標をファネルで可視化する

主な機能

• ネックと本体のセグメントによるファネルの可視化
• 単一選択と複数選択に対応したインタラクティブな選択
• 外観や有効化モードをカスタマイズできる豊富なツールチップ
• 柔軟な配置（内側／外側）とスタイル設定に対応したデータラベル
• カスタマイズや切り替えに対応した凡例
• 特定のデータポイントを強調するセグメントの分離
• 視覚的に明確に区切るためのセグメント間の間隔
• 再生時間と遅延をカスタマイズできるアニメーション
• 色を自動適用するパレットカラー
• PNG 画像および PDF ドキュメントへのエクスポート機能
• 右から左へ記述する言語に対応したRTL サポート
• セマンティックラベルとスクリーンリーダーに対応したアクセシビリティ機能
• 幅と高さを設定できるレスポンシブなサイズ調整
• 複数のモードに対応した空のポイントの処理
• データに基づく色を設定するカラー マッピング

ドキュメントとナビゲーションガイド

はじめに

📄 参照： references/getting-started.md

• インストールとパッケージの設定
• SfFunnelChart の基本的な実装
• データソースの追加とバインド
• 最初のチャートの作成
• パッケージの依存関係とインポート
• クイックスタートのコード例

コンポーネントの概要

📄 参照： references/overview.md

• SfFunnelChart ウィジェットの概要と機能
• ファネルチャートを他の種類のチャートより使用する場面
• 主な機能と性能
• 一般的なユースケースとシナリオ
• コンポーネントのアーキテクチャ

ファネルのカスタマイズ

📄 参照： references/funnel-customization.md

• ファネルのサイズ設定（高さと幅）
• ネックのサイズのカスタマイズ（neckHeight と neckWidth）
• セグメント間の間隔（gapRatio）
• セグメントの分離（explode、explodeIndex、explodeOffset）
• セグメントの境界線と不透明度
• パレットカラーの適用
• 外観のカスタマイズ

シリーズのカスタマイズ

📄 参照： references/series-customization.md

• アニメーション設定（再生時間と遅延）
• 空のポイントの処理（gap、zero、drop、average モード）
• 空のポイントのカスタマイズ（色、境界線）
• データポイントのカラー マッピング（pointColorMapper）
• シリーズレベルのスタイル設定オプション

データラベル

📄 参照： references/datalabel.md

• データラベルの有効化と配置
• ラベルの配置オプション（outer、auto、top、bottom、middle）
• ラベルの位置（内側／外側）
• データラベルのスタイル設定（色、フォント、境界線）
• シリーズの色をラベルに使用する
• 値がゼロのラベルを非表示にする
• オーバーフローモードの処理
• builder を使用したデータラベルテンプレート

凡例

📄 参照： references/legend.md

• 凡例の有効化（isVisible）
• 凡例の表示スタイルのカスタマイズ
• 凡例タイトルの設定
• 凡例の位置（上、下、左、右、自動）
• 凡例のオーバーフローモード（スクロール、折り返し）
• 系列の表示／非表示の切り替え
• オフセットを指定した浮動凡例
• ビルダーを使用した凡例項目のテンプレート

ツールチップ

📄 参照： references/tooltip.md

• ツールチップの有効化（TooltipBehavior）
• ツールチップの表示スタイル（色、境界線、エレベーション）のカスタマイズ
• ツールチップの書式設定とテンプレート
• ツールチップの位置（自動、ポインター）
• 表示モード（タップ、ダブルタップ、長押し）
• ツールチップの表示時間とアニメーション
• カスタムツールチップビルダー

選択

📄 参照： references/selection.md

• 選択の有効化（SelectionBehavior）
• 単一選択と複数選択
• 選択中のセグメント（色、境界線、不透明度）のカスタマイズ
• 選択されていないセグメントのカスタマイズ
• レンダリング時の初期選択
• 選択動作の切り替え
• メソッドを使用したプログラムによる選択

グラフのタイトルと外観

📄 参照： references/chart-title.md

• グラフタイトルの追加とスタイル設定
• タイトルの配置（near、center、far）
• タイトルの背景と境界線
• タイトルテキストのスタイル設定

📄 参照： references/chart-appearance.md

• グラフのサイズ（幅／高さ）
• グラフのマージン設定
• 背景色と画像
• 境界線のカスタマイズ

コールバックとイベント

📄 参照： references/callbacks.md

• onLegendItemRender - 凡例項目のカスタマイズ
• onTooltipRender - ツールチップの内容のカスタマイズ
• onDataLabelRender - データラベルのカスタマイズ
• onLegendTapped - 凡例のタップ処理
• onSelectionChanged - 選択イベントの処理
• onDataLabelTapped - データラベルのタップ処理
• onPointTap - セグメントのタップ処理
• onPointDoubleTap - ダブルタップの処理
• onPointLongPress - 長押しの処理
• onChartTouchInteractionUp/Down/Move - タッチ操作
• onRendererCreated - 系列コントローラーへのアクセス

よく使われるパターンとベストプラクティス

📄 参照： references/common-patterns.md

• 営業パイプラインのファネルパターン
• 色を使用したマーケティングコンバージョン
• 強調表示するセグメントの切り離し
• カスタムネックサイズの設定方法
• コントローラーを使用した動的な更新
• パターンの組み合わせ例
• パターンの選択ガイド

高度な機能

📄 参照： references/methods.md

• FunnelSeriesController のメソッド
• pixelToPoint 変換
• 動的なデータ更新
• プログラムによる制御

📄 参照： references/export-funnel-chart.md

• グラフを PNG 画像としてエクスポート
• グラフを PDF ドキュメントとしてエクスポート
• 画像品質とピクセル比
• PDF ドキュメントの作成

ローカライズとアクセシビリティ

📄 参照： references/accessibility.md

• スクリーンリーダーのサポート
• 色のコントラスト要件
• 大きなフォントのサポート
• タッチターゲットのサイズ
• アクセシブルな操作

📄 参照： references/right-to-left.md

• アラビア語、ヘブライ語などの RTL サポート
• Directionality ウィジェットの使用
• RTL ロケールの設定
• RTL における凡例とツールチップの動作

クイックスタートの例

基本的なファネルグラフ

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.dart';

class BasicFunnelChart extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final List<ChartData> chartData = [
      ChartData('Prospects', 500),
      ChartData('Qualified', 350),
      ChartData('Contacted', 250),
      ChartData('Negotiating', 150),
      ChartData('Won', 100)
    ];
    
    return Scaffold(
      appBar: AppBar(title: Text('Sales Funnel')),
      body: Center(
        child: SfFunnelChart(
          title: ChartTitle(text: 'Sales Pipeline Analysis'),
          legend: Legend(isVisible: true),
          series: FunnelSeries<ChartData, String>(
            dataSource: chartData,
            xValueMapper: (ChartData data, _) => data.stage,
            yValueMapper: (ChartData data, _) => data.value,
            dataLabelSettings: DataLabelSettings(isVisible: true)
          )
        )
      )
    );
  }
}

class ChartData {
  ChartData(this.stage, this.value);
  final String stage;
  final double value;
}

カスタマイズしたファネルグラフ

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.dart';

class CustomFunnelChart extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final List<ChartData> chartData = [
      ChartData('Awareness', 1000, Colors.blue),
      ChartData('Interest', 750, Colors.green),
      ChartData('Consideration', 500, Colors.orange),
      ChartData('Intent', 300, Colors.purple),
      ChartData('Purchase', 150, Colors.red)
    ];
    
    return Scaffold(
      appBar: AppBar(title: Text('Marketing Funnel')),
      body: Center(
        child: SfFunnelChart(
          title: ChartTitle(
            text: 'Customer Journey Analysis',
            textStyle: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)
          ),
          legend: Legend(
            isVisible: true,
            position: LegendPosition.bottom
          ),
          tooltipBehavior: TooltipBehavior(enable: true),
          series: FunnelSeries<ChartData, String>(
            dataSource: chartData,
            xValueMapper: (ChartData data, _) => data.stage,
            yValueMapper: (ChartData data, _) => data.value,
            pointColorMapper: (ChartData data, _) => data.color,
            // Customize funnel appearance
            height: '80%',
            width: '80%',
            neckHeight: '20%',
            neckWidth: '15%',
            gapRatio: 0.1,
            explode: true,
            explodeIndex: 4,
            explodeOffset: '10%',
            dataLabelSettings: DataLabelSettings(
              isVisible: true,
              labelPosition: ChartDataLabelPosition.inside,
              textStyle: TextStyle(
                color: Colors.white,
                fontWeight: FontWeight.bold
              )
            )
          )
        )
      )
    );
  }
}

class ChartData {
  ChartData(this.stage, this.value, this.color);
  final String stage;
  final double value;
  final Color color;
}

ツールチップと選択機能を備えたファネルグラフ

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.dart';

class InteractiveFunnelChart extends StatefulWidget {
  @override
  _InteractiveFunnelChartState createState() => _InteractiveFunnelChartState();
}

class _InteractiveFunnelChartState extends State<InteractiveFunnelChart> {
  late TooltipBehavior _tooltipBehavior;
  late SelectionBehavior _selectionBehavior;

  @override
  void initState() {
    _tooltipBehavior = TooltipBehavior(
      enable: true,
      format: 'point.x: point.y leads',
      color: Colors.black87,
      textStyle: TextStyle(color: Colors.white)
    );
    
    _selectionBehavior = SelectionBehavior(
      enable: true,
      selectedColor: Colors.deepOrange,
      unselectedColor: Colors.grey[300]
    );
    
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    final List<ChartData> chartData = [
      ChartData('Visitors', 5000),
      ChartData('Sign-ups', 3500),
      ChartData('Active Users', 2000),
      ChartData('Premium Users', 800),
      ChartData('Renewals', 500)
    ];
    
    return Scaffold(
      appBar: AppBar(title: Text('Subscription Funnel')),
      body: Center(
        child: SfFunnelChart(
          title: ChartTitle(text: 'User Conversion Funnel'),
          legend: Legend(isVisible: true),
          tooltipBehavior: _tooltipBehavior,
          series: FunnelSeries<ChartData, String>(
            dataSource: chartData,
            xValueMapper: (ChartData data, _) => data.stage,
            yValueMapper: (ChartData data, _) => data.count,
            selectionBehavior: _selectionBehavior,
            dataLabelSettings: DataLabelSettings(
              isVisible: true,
              labelPosition: ChartDataLabelPosition.outside
            )
          )
        )
      )
    );
  }
}

class ChartData {
  ChartData(this.stage, this.count);
  final String stage;
  final double count;
}

よく使われるパターン

📄 詳細な実装パターンについては、references/common-patterns.md を参照してください。

クイックパターンの概要

1. 営業パイプラインファネル - 営業ステージを明確な流れで示す基本的なファネル
2. 色分けしたマーケティングコンバージョン - 視覚的な階層構造を持つ、色分けされたステージ
3. セグメントの強調表示 - セグメントを展開して重要なステージを強調
4. ネックサイズのカスタマイズ - 視覚効果に合わせてネックの寸法を調整
5. 動的な更新 - FunnelSeriesController を使用したリアルタイムのデータ更新

各パターンには、コード例、使用する場面、ベストプラクティスが含まれています。完全な実装については、一般的なパターンのリファレンスをご覧ください。

主なプロパティ

SfFunnelChart の主要プロパティ

• series - データソースを含む FunnelSeries の設定
• title - チャートのタイトル（ChartTitle）
• legend - 凡例の設定（Legend）
• tooltipBehavior - ツールチップの設定（TooltipBehavior）
• palette - シリーズのカラーパレット
• backgroundColor - チャートの背景色
• backgroundImage - 背景画像
• borderColor - チャートの枠線の色
• borderWidth - チャートの枠線の幅
• margin - チャートのマージン（EdgeInsets）
• enableMultiSelection - 複数セグメントの選択を有効化
• onSelectionChanged - 選択変更時のコールバック
• onLegendItemRender - 凡例項目の描画時のコールバック
• onTooltipRender - ツールチップの描画時のコールバック
• onDataLabelRender - データラベルの描画時のコールバック
• onLegendTapped - 凡例のタップ時のコールバック
• onDataLabelTapped - データラベルのタップ時のコールバック
• onChartTouchInteractionUp/Down/Move - タッチ操作時のコールバック

FunnelSeries の主要プロパティ

• dataSource - データソースのリスト
• xValueMapper - データから x 軸の値をマッピング
• yValueMapper - データから y 軸の値をマッピング
• pointColorMapper - データから色をマッピング
• name - 凡例に表示するシリーズ名
• height - ファネルの高さ（割合、例：'80%'）
• width - ファネルの幅（割合、例：'80%'）
• neckHeight - ネックの高さ（割合、例：'20%'）
• neckWidth - ネックの幅（割合、例：'15%'）
• gapRatio - セグメント間の間隔（0～1）
• explode - セグメントの展開を有効化
• explodeIndex - 展開するセグメントのインデックス
• explodeOffset - 展開距離（割合）
• opacity - シリーズの不透明度（0～1）
• borderWidth - セグメントの枠線の幅
• borderColor - セグメントの枠線の色
• dataLabelSettings - データラベルの設定
• selectionBehavior - 選択動作の設定
• enableTooltip - シリーズのツールチップを有効化
• animationDuration - アニメーション時間（ミリ秒）
• animationDelay - アニメーションの遅延時間（ミリ秒）
• emptyPointSettings - 空のポイントの処理
• initialSelectedDataIndexes - 初期選択インデックス
• onPointTap - ポイントのタップ時のコールバック
• onPointDoubleTap - ポイントのダブルタップ時のコールバック
• onPointLongPress - ポイントの長押し時のコールバック
• onRendererCreated - レンダラー作成時のコールバック

DataLabelSettings のプロパティ

• isVisible - データラベルの表示／非表示
• labelPosition - 位置（内側／外側）
• labelAlignment - 配置（outer、auto、top、bottom、middle）
• textStyle - テキストのスタイル設定
• color - ラベルの背景色
• borderColor - ラベルの枠線の色
• borderWidth - ラベルの枠線の幅
• borderRadius - ラベルの角の半径
• margin - ラベルのマージン
• opacity - ラベルの不透明度
• angle - ラベルの回転角度
• useSeriesColor - ラベルの背景にシリーズの色を使用
• showZeroValue - 値がゼロの場合もラベルを表示
• overflowMode - オーバーフローの処理（none、trim、hide、shift）

Legend Properties

• isVisible - 凡例の表示／非表示
• position - 位置（auto、top、bottom、left、right）
• orientation - 方向（auto、horizontal、vertical）
• title - 凡例のタイトル（LegendTitle）
• overflowMode - オーバーフローモード（scroll、wrap）
• toggleSeriesVisibility - 系列の表示／非表示の切り替えを有効化
• backgroundColor - 凡例の背景色
• borderColor - 凡例の枠線の色
• borderWidth - 凡例の枠線の幅
• opacity - 凡例の不透明度
• padding - 凡例のパディング
• iconHeight - 凡例アイコンの高さ
• iconWidth - 凡例アイコンの幅
• offset - 凡例のフローティングオフセット

TooltipBehavior Properties

• enable - ツールチップを有効化
• color - ツールチップの背景色
• borderColor - ツールチップの枠線の色
• borderWidth - ツールチップの枠線の幅
• opacity - ツールチップの不透明度
• duration - 表示時間（ミリ秒）
• animationDuration - アニメーション時間
• elevation - ツールチップの高さ／影
• format - ツールチップのテキスト形式
• header - ツールチップのヘッダーテキスト
• tooltipPosition - 位置（auto、pointer）
• activationMode - アクティベーションモード（tap、doubleTap、longPress、none）
• builder - カスタムツールチップビルダー

SelectionBehavior Properties

• enable - 選択を有効化
• selectedColor - 選択したセグメントの色
• unselectedColor - 選択していないセグメントの色
• selectedBorderColor - 選択したセグメントの枠線の色
• selectedBorderWidth - 選択したセグメントの枠線の幅
• unselectedBorderColor - 選択していないセグメントの枠線の色
• unselectedBorderWidth - 選択していないセグメントの枠線の幅
• selectedOpacity - 選択したセグメントの不透明度
• unselectedOpacity - 選択していないセグメントの不透明度
• toggleSelection - 選択の切り替えを有効化

一般的なユースケース

1. 営業パイプライン - 商談が営業段階（見込み顧客 → 受注）を進む状況を追跡
2. マーケティングファネル - 顧客の行動プロセス（認知 → 購入）を可視化
3. コンバージョン分析 - プロセスの各段階におけるユーザーのコンバージョン率を表示
4. 採用プロセス - 採用段階を進む候補者の状況を表示
5. Eコマースファネル - ショッピングカートの放棄とチェックアウトの流れを追跡
6. リード管理 - 見込み顧客の選別とコンバージョンのプロセスを監視
7. サブスクリプションファネル - ユーザーのオンボーディングとサブスクリプションの流れを分析
8. ウェブ分析 - 訪問者のエンゲージメントとコンバージョンの指標を表示
9. プロセス効率 - ワークフローのボトルネックと離脱ポイントを可視化
10. カスタマージャーニー - 認知からロイヤルティまでの顧客接点をマッピング