syncfusion-flutter-circular-charts

Name: syncfusion-flutter-circular-charts
Author: syncfusion

github.com/syncfusion開発254 回インストール17 週間前に更新

リポジトリ

syncfusion-flutter-circular-charts について

Syncfusion の Flutter `SfCircularChart` で、円グラフ、ドーナツグラフ、ラジアルバーを作るためのリファレンススキルです。外観、操作性、アクセシビリティ、エクスポートの設定を扱います。

主な機能

01円・ドーナツ・ラジアルバー系列
02データラベル、凡例、ツールチップ
03セグメント選択とタップ操作
04色、グラデーション、アニメーション
05PNG・PDFへのエクスポート
06アクセシビリティとRTL対応

活用シーン

01全体に占める割合の表示
02ラジアルバーによるカテゴリ比較
03チャートへのラベルや注釈の追加
04レポート向けチャートの出力

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/syncfusion/flutter-ui-components-skills --skill syncfusion-flutter-circular-charts

インストール後、Claude Code で/syncfusion-flutter-circular-chartsを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/

accessibility-and-export.md

annotations-and-appearance.md

chart-types.md

data-labels.md

getting-started.md

legend-and-title.md

series-customization.md

tooltip-and-selection.md

詳細

Syncfusion Flutter Circular Charts の実装

SfCircularChart は、円グラフ、ドーナツグラフ、ラジアルバーチャートを描画するための Syncfusion の高性能 Flutter ウィジェットです。豊富なインタラクティブ機能（ツールチップ、選択、セグメントの切り離し）、美しいカスタマイズ機能（グラデーション、アニメーション、データラベル）を備え、すぐに利用できるアクセシビリティ機能も提供します。

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

ユーザーが全体に対する割合を示す円グラフを作成したい場合
ユーザーがリング状のグラフを作成したい場合 — 中央にコンテンツを配置することもできるドーナツグラフ
ユーザーが円弧でカテゴリを比較するラジアルバーチャートを作成したい場合
SfCircularChart、PieSeries、DoughnutSeries、RadialBarSeries に関する質問全般
セグメントの色、切り離し動作、小さなスライスのグループ化をカスタマイズする場合
コネクター線付きのデータラベルをスライスの内側または外側に追加する場合
凡例、ツールチップ、選択、注釈を設定する場合
グラフを PNG または PDF としてエクスポートする場合
アクセシビリティや RTL レイアウトに対応する場合

コンポーネントの概要

SfCircularChart ウィジェットは、円形形式で比例データを表示するための高性能なグラフ作成ソリューションです。主に次の 3 種類のシリーズをサポートします。

PieSeries：データを円のセグメントとして表示する従来型の円グラフです。セグメントの切り離し、半円表示、小さなスライスのグループ化、データポイントごとの半径のカスタマイズ、各種インタラクションモードに対応しています。
DoughnutSeries：カスタマイズ可能な内半径を持つリング状のグラフです。中央に注釈を表示する場合に適しており、角の丸み、中央の浮き上がり効果、円グラフの全機能に対応しています。
RadialBarSeries：カスタマイズ可能なトラックを備えた円形の進捗状グラフです。最大値の設定、角のスタイル（フラット／丸み付き）、トラックの不透明度と色のカスタマイズ、円弧に沿ったデータラベルなどの機能があります。

すべてのシリーズタイプで、豊富なインタラクティブ機能（ツールチップ、選択、タップジェスチャー）、データラベルの詳細な配置設定（コネクター線付きの内側／外側）、凡例の設定、再生時間と遅延をカスタマイズできるアニメーション、グラデーション塗りつぶし（線形／スイープ／放射状）、画像シェーダー、空のポイントの処理、データの並べ替え、グラフの PNG／PDF 形式へのエクスポートに対応しています。このウィジェットは、アクセシビリティ機能、RTL サポート、色のマッピング、ポイントごとの色、注釈による幅広いカスタマイズも提供します。

クイックスタート

import 'package:syncfusion_flutter_charts/charts.dart';

class MyChart extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final List<ChartData> data = [
      ChartData('Jan', 35),
      ChartData('Feb', 28),
      ChartData('Mar', 34),
      ChartData('Apr', 32),
      ChartData('May', 40),
    ];

    return SfCircularChart(
      title: ChartTitle(text: 'Monthly Sales'),
      legend: Legend(isVisible: true),
      tooltipBehavior: TooltipBehavior(enable: true),
      series: <CircularSeries>[
        PieSeries<ChartData, String>(
          dataSource: data,
          xValueMapper: (ChartData d, _) => d.x,
          yValueMapper: (ChartData d, _) => d.y,
          dataLabelSettings: DataLabelSettings(isVisible: true),
          enableTooltip: true,
        ),
      ],
    );
  }
}

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

一般的なパターン

中央に注釈を配置したドーナツグラフ

SfCircularChart(
  annotations: <CircularChartAnnotation>[
    CircularChartAnnotation(
      widget: Text('62%', style: TextStyle(fontSize: 25)),
    ),
  ],
  series: <CircularSeries>[
    DoughnutSeries<ChartData, String>(
      dataSource: data,
      xValueMapper: (d, _) => d.x,
      yValueMapper: (d, _) => d.y,
      innerRadius: '60%',
    ),
  ],
)

トラックと丸みのある角を備えたラジアルバー

RadialBarSeries<ChartData, String>(
  dataSource: data,
  xValueMapper: (d, _) => d.x,
  yValueMapper: (d, _) => d.y,
  maximumValue: 100,
  cornerStyle: CornerStyle.bothCurve,
  useSeriesColor: true,
  trackOpacity: 0.3,
)

タップ時にセグメントを切り離す円グラフ

PieSeries<ChartData, String>(
  dataSource: data,
  xValueMapper: (d, _) => d.x,
  yValueMapper: (d, _) => d.y,
  explode: true,
  explodeIndex: 0,
  explodeGesture: ActivationMode.singleTap,
)

主なプロパティ

プロパティ	対象	用途
`series`	`SfCircularChart`	`CircularSeries`（Pie／Doughnut／RadialBar）のリスト
`xValueMapper`	シリーズ	各データポイントのカテゴリラベル
`yValueMapper`	シリーズ	各データポイントの数値
`dataLabelSettings`	シリーズ	データラベルの表示とスタイル設定
`legend`	`SfCircularChart`	凡例の表示
`tooltipBehavior`	`SfCircularChart`	ツールチップの設定
`annotations`	`SfCircularChart`	グラフ上にウィジェットを重ねて表示
`radius`	シリーズ	外側のサイズを `'80%'` に設定（デフォルト）
`innerRadius`	Doughnut／RadialBar	内側の穴のサイズ
`explode`	Pie／Doughnut	タップ時にセグメントを切り離す機能を有効化
`maximumValue`	RadialBarSeries	円弧全体の基準値
`palette`	`SfCircularChart`	グラフ全体に適用する色のリスト