syncfusion-flutter-pyramid-charts

ピラミッドチャートの実装（SfPyramidChart）

Syncfusion Flutter の SfPyramidChart ウィジェットは、高性能なピラミッドチャートを Dart でネイティブに描画します。比例データや階層データを積み重ねた三角形のセグメントとして可視化できるため、セールスファネル、人口分布、組織階層、プロセスの段階分析に最適です。

このスキルを使用する場面

• Flutter アプリケーションでピラミッドチャートを描画したい場合
• SfPyramidChart、PyramidSeries、または syncfusion_flutter_charts に言及している場合
• ピラミッドのセグメント（色、間隔、分離、モード）をカスタマイズしたい場合
• ピラミッドチャートにラベル、凡例、ツールチップ、または選択機能を追加したい場合
• ピラミッドチャートを PNG または PDF としてエクスポートしたい場合
• Syncfusion Flutter チャートの RTL サポートやアクセシビリティについて質問している場合

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

はじめに

📄 参照: references/getting-started.md

• パッケージのインストールと pubspec.yaml の設定
• インポート文と基本的なウィジェットの初期化
• xValueMapper / yValueMapper によるデータソースのバインド
• タイトル、データラベル、凡例、ツールチップの追加
• 最小限の実行可能なサンプル

ピラミッドのカスタマイズ

📄 参照: references/pyramid-customization.md

• PyramidMode：linear（高さベース）と surface（面積ベース）
• height と width（パーセント文字列）によるピラミッドサイズの変更
• gapRatio（0～1）によるセグメント間の間隔
• セグメントの分離：explode、explodeIndex、explodeOffset
• パレットの色、境界線の色／幅、不透明度、pointColorMapper

系列のカスタマイズ

📄 参照: references/series-customization.md

• アニメーション：animationDuration と animationDelay
• EmptyPointSettings による null／空のデータポイントの処理
• 空のポイントのモード：gap、zero、drop、average
• pointColorMapper によるデータポイントごとの色の割り当て

データラベル

📄 参照: references/data-labels.md

• DataLabelSettings(isVisible: true) によるデータラベルの有効化
• 内側／外側への配置（labelPosition）
• コネクターラインの設定（種類、色、長さ）
• builder によるカスタムラベルテンプレート
• スマートラベルと labelIntersectAction
• オーバーフローモードとゼロ値ラベルの非表示

凡例とツールチップ

📄 参照: references/legend-and-tooltip.md

• 凡例の有効化と配置
• 凡例のタイトル、項目テンプレート、オーバーフロー時の動作
• 凡例のタップによる系列の表示切り替え
• TooltipBehavior によるツールチップの有効化
• ツールチップの書式設定、カスタムテンプレート、アクティブ化モード

選択とコールバック

📄 参照: references/selection-and-callbacks.md

• SelectionBehavior によるセグメント選択の有効化
• 複数選択、選択の切り替え、初期選択
• selectDataPoints によるプログラムからの選択
• 主なコールバック：onPointTap、onSelectionChanged、onTooltipRender
• PyramidSeriesController による動的なデータ更新のための onRendererCreated

外観、エクスポート、RTL

📄 参照: references/appearance-export-rtl.md

• チャートタイトルのカスタマイズ（ChartTitle）
• チャートのサイズ、余白、背景色／画像
• チャートを PNG 画像または PDF ドキュメントとしてエクスポート
• Directionality ウィジェットまたはロケールによる RTL サポート
• アクセシビリティ：コントラスト、フォントの拡大、タップ領域
• 座標変換のための pixelToPoint メソッド

クイックスタートの例

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

class PyramidChartExample extends StatelessWidget {
  final List<ChartData> chartData = [
    ChartData('Enterprise', 654),
    ChartData('Mid-Market', 575),
    ChartData('SMB', 446),
    ChartData('Startup', 341),
    ChartData('Individual', 160),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SfPyramidChart(
        title: ChartTitle(text: 'Sales Pipeline'),
        legend: Legend(isVisible: true),
        series: PyramidSeries<ChartData, String>(
          dataSource: chartData,
          xValueMapper: (ChartData data, _) => data.x,
          yValueMapper: (ChartData data, _) => data.y,
          dataLabelSettings: DataLabelSettings(isVisible: true),
        ),
      ),
    );
  }
}

class ChartData {
  ChartData(this.x, this.y);
  final String x;
  final double y;
}

よくあるパターン

特定のセグメントを分離する

PyramidSeries<ChartData, String>(
  explode: true,
  explodeIndex: 0,      // Index of segment to highlight
  explodeOffset: '5%',  // Distance the segment moves out
  dataSource: chartData,
  xValueMapper: (ChartData data, _) => data.x,
  yValueMapper: (ChartData data, _) => data.y,
)

Surface モード（面積比例）

PyramidSeries<ChartData, String>(
  pyramidMode: PyramidMode.surface,  // Area ∝ Y value (vs linear: height ∝ Y)
  dataSource: chartData,
  xValueMapper: (ChartData data, _) => data.x,
  yValueMapper: (ChartData data, _) => data.y,
)

ツールチップと選択機能を併用する

// In initState:
_tooltipBehavior = TooltipBehavior(enable: true);
_selectionBehavior = SelectionBehavior(enable: true);

// In widget:
SfPyramidChart(
  tooltipBehavior: _tooltipBehavior,
  series: PyramidSeries<ChartData, String>(
    selectionBehavior: _selectionBehavior,
    dataSource: chartData,
    xValueMapper: (ChartData data, _) => data.x,
    yValueMapper: (ChartData data, _) => data.y,
  ),
)

主なプロパティ

プロパティ	型	説明
series	PyramidSeries	ピラミッドデータ系列（チャートごとに 1 つ）
title	ChartTitle	チャートタイトルウィジェット
legend	Legend	凡例の設定
tooltipBehavior	TooltipBehavior	ツールチップの有効化／カスタマイズ
enableMultiSelection	bool	複数セグメントの選択を許可
palette	List<Color>	カスタムセグメントカラー
pyramidMode	PyramidMode	サイズ設定（linear または surface）
gapRatio	double	セグメント間の間隔（0～1）
explode	bool	タップ時のセグメントの分離を有効化