syncfusion-flutter-cartesian-charts

Syncfusion Flutter Cartesian Charts の実装

SfCartesianChart は、syncfusion_flutter_charts パッケージの高性能な Flutter ウィジェットです。直交座標（X/Y）上にプロットする 30 種類以上のチャートタイプに対応しています。リアルタイムデータ、豊富なインタラクティブ機能、高度なカスタマイズをサポートします。

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

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

• Flutter で折れ線、面、縦棒、横棒、スプライン、散布図、金融チャートを表示する
• 軸の種類（数値、カテゴリ、日時、対数）を設定する
• ズーム、パン、ツールチップ、トラックボール、十字線による操作を追加する
• 系列の外観（色、グラデーション、マーカー、データラベル）をカスタマイズする
• 注釈、テクニカル指標、トレンドラインを追加する
• チャートをエクスポートする、またはチャートのコールバックに応答する
• RTL、ローカライズ、アクセシビリティに対応する

コンポーネントの概要

SfCartesianChart ウィジェットは、直交座標（X/Y）を使ってデータを表示する総合的なチャートソリューションです。複数のカテゴリにわたる 30 種類以上のチャートタイプに対応しています。

• 折れ線チャート：折れ線、高速折れ線、スプライン（さまざまなテンションタイプ）、ステップ折れ線
• 面チャート：面、スプライン面、ステップ面、範囲面、スプライン範囲面、積み上げ面（100% を含む）
• 縦棒／横棒チャート：縦棒、横棒、範囲縦棒、積み上げ縦棒／横棒（100% を含む）
• 散布図／バブルチャート：散布図、バブルチャート
• 金融チャート：ローソク足、OHLC、HiLo、HiLoOpenClose。テクニカル指標にも対応
• 統計チャート：ヒストグラム、箱ひげ図、エラーバー
• ウォーターフォール：累積効果の可視化

このウィジェットでは、5 種類の軸（数値、カテゴリ、日時、日時カテゴリ、対数）、インタラクティブ機能（ズーム、パン、ツールチップ、トラックボール、十字線）、選択動作、豊富なカスタマイズ（マーカー、データラベル、グラデーション、アニメーション）、テクニカル指標（SMA、EMA、MACD、RSI、ボリンジャーバンドなど）、トレンドライン、注釈、チャートのエクスポート機能を利用できます。

---

クイックスタート

# Always installs the latest compatible version automatically
flutter pub add syncfusion_flutter_charts

パッケージは必ずターミナルからインストールしてください。pubspec.yaml を直接編集しないでください。 Flutter プロジェクトのルートでこのコマンドを実行し、正常に完了するまで待ってから次に進んでください。

import 'package:syncfusion_flutter_charts/charts.dart';

class MyChart extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 300,
      child: SfCartesianChart(
        primaryXAxis: CategoryAxis(),
        title: ChartTitle(text: 'Monthly Sales'),
        legend: Legend(isVisible: true),
        tooltipBehavior: TooltipBehavior(enable: true),
        series: <CartesianSeries>[
          LineSeries<ChartData, String>(
            dataSource: [
              ChartData('Jan', 35),
              ChartData('Feb', 28),
              ChartData('Mar', 34),
              ChartData('Apr', 32),
              ChartData('May', 40),
            ],
            xValueMapper: (ChartData d, _) => d.x,
            yValueMapper: (ChartData d, _) => d.y,
            name: 'Sales',
            dataLabelSettings: DataLabelSettings(isVisible: true),
          ),
        ],
      ),
    );
  }
}

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

---

ナビゲーションガイド

はじめに

📄 参照： references/getting-started.md

• パッケージのインストールとインポート
• SfCartesianChart の初期化
• データソースとデータモデルのバインド
• タイトル、データラベル、凡例、ツールチップの追加
• 最小構成の実行可能なサンプル

折れ線、面、スプラインのチャートタイプ

📄 参照： references/chart-types-line-area.md

• 折れ線、高速折れ線、スプライン（スプラインの種類を含む）
• ステップ折れ線、面、スプライン面
• ステップ面、範囲面、スプライン範囲面
• 各タイプの使い分け

縦棒、横棒、その他の直交座標チャートタイプ

📄 参照： references/chart-types-column-bar.md

• 縦棒、横棒、範囲縦棒
• バブル、散布図、ヒストグラム
• ウォーターフォール、エラーバー、箱ひげ図
• 各タイプの主な設定

積み上げチャートタイプ

📄 参照： references/chart-types-stacked.md

• 積み上げ面／横棒／縦棒／折れ線
• 100% 積み上げのバリエーション
• 積み上げと 100% 積み上げの使い分け

金融チャートタイプ

📄 参照： references/chart-types-financial.md

• ローソク足、HILO、OHLC チャート
• 金融データモデル（始値／高値／安値／終値のマッパー）
• 空洞ローソク足と塗りつぶしローソク足

軸の種類

📄 参照： references/axis-types.md

• NumericAxis、CategoryAxis、DateTimeAxis
• DateTimeCategoryAxis、LogarithmicAxis
• データに適した軸の選択

軸のカスタマイズ

📄 参照： references/axis-customization.md

• タイトル、ラベル、ラベル形式
• グリッド線、目盛り、範囲（最小値／最大値／間隔）
• ストリップライン、複数レベルのラベル
• 第 2 軸、軸の交差、反転軸

系列のカスタマイズ

📄 参照： references/series-customization.md

• 色、枠線、不透明度、グラデーション塗りつぶし
• 破線パターン、幅、ポイントのカラーマッパー
• アニメーション、パレットの色、空のポイントの設定

凡例

📄 参照： references/legend.md

• 凡例の有効化と位置の設定
• 凡例から系列の表示／非表示を切り替え
• はみ出しモード（折り返し、スクロール）
• カスタム凡例項目とアイコン

ツールチップ、トラックボール、クロスヘア

📄 参照： references/tooltip-trackball.md

• TooltipBehavior — 有効化、書式設定、カスタムテンプレート
• 系列間で共有するツールチップ
• TrackballBehavior — 表示モード
• CrosshairBehavior の設定

ズーム、パン、選択

📄 参照： references/zoom-pan-selection.md

• ZoomPanBehavior — ピンチ、マウスホイール、方向指定
• ZoomMode（x、y、xy）、パン
• ライブデータの自動スクロール
• SelectionBehavior — ポイント、系列、クラスター、ボックス

注釈、マーカー、データラベル

📄 参照： references/annotations-markers-datalabels.md

• CartesianChartAnnotation — テキストとウィジェットのオーバーレイ
• 座標単位（ポイント、ピクセル、パーセント）
• MarkerSettings — 形状、サイズ、色
• DataLabelSettings — 位置、書式、テンプレート、コネクター線

テクニカル指標とトレンドライン

📄 参照： references/technical-indicators-trendlines.md

• SMA、EMA、TMA、WMA、MACD、RSI、ストキャスティクス
• ボリンジャーバンド、ATR、CCI、モメンタム、AD、ROC
• トレンドラインの種類（線形、指数、多項式、移動平均、べき乗、対数）
• 予測期間

チャートの外観と複数のチャート

📄 参照： references/chart-appearance.md

• 背景色／画像、プロット領域のカスタマイズ
• カラーパレット、テーマとの統合
• 同じ画面上で複数のチャートをレンダリング
• オンデマンド／遅延データ読み込み

コールバック、メソッド、エクスポート、アクセシビリティ

📄 参照： references/callbacks-methods-export.md

• 主なコールバック（onTooltipRender、onDataLabelRender、onZooming など）
• ChartSeriesController のメソッド（updateDataSource、animate）
• PNG、PDF、JPEG へのエクスポート
• ローカライズ、RTL、アクセシビリティ

---

よく使われるパターン

パターン 1 — ライブ／リアルタイムデータの更新

late ChartSeriesController _controller;

onRendererCreated: (ChartSeriesController controller) {
  _controller = controller;
},

void addDataPoint(ChartData newPoint) {
  chartData.add(newPoint);
  _controller.updateDataSource(
    addedDataIndexes: [chartData.length - 1],
  );
}

パターン 2 — 1 つのチャート上の複数の系列

series: <CartesianSeries>[
  LineSeries<ChartData, String>(
    dataSource: data,
    xValueMapper: (d, _) => d.x,
    yValueMapper: (d, _) => d.y1,
    name: 'Revenue',
  ),
  ColumnSeries<ChartData, String>(
    dataSource: data,
    xValueMapper: (d, _) => d.x,
    yValueMapper: (d, _) => d.y2,
    name: 'Cost',
  ),
]

パターン 3 — ズームとツールチップの併用

late ZoomPanBehavior _zoom;
late TooltipBehavior _tooltip;

@override
void initState() {
  _zoom = ZoomPanBehavior(enablePinching: true, enableDoubleTapZooming: true);
  _tooltip = TooltipBehavior(enable: true);
  super.initState();
}

zoomPanBehavior: _zoom,
tooltipBehavior: _tooltip,

---

主なウィジェットプロパティ

プロパティ	型	用途
primaryXAxis	ChartAxis	水平軸の種類と設定
primaryYAxis	ChartAxis	垂直軸の種類と設定
series	List<CartesianSeries>	1 つ以上のデータ系列
title	ChartTitle	チャートの見出しテキスト
legend	Legend	凡例の表示と位置
tooltipBehavior	TooltipBehavior	タップ時のツールチップ
zoomPanBehavior	ZoomPanBehavior	ズームとパンの操作
selectionType	SelectionType	ポイント／系列／クラスターの選択
annotations	List<CartesianChartAnnotation>	ウィジェット／テキストのオーバーレイ
indicators	List<TechnicalIndicator>	テクニカル分析のオーバーレイ
onTooltipRender	ChartTooltipCallback	ツールチップのテキストをカスタマイズ
onZooming	ChartZoomingCallback	ズームイベントへの対応
palette	List<Color>	カスタム系列カラーパレット