mcpField
S
syncfusion-maui-toolkit-funnel-charts

syncfusion-maui-toolkit-funnel-charts

github.com/syncfusionデザイン・UI3945 回インストール7 週間前に更新
リポジトリ

syncfusion-maui-toolkit-funnel-charts について

Syncfusion の SfFunnelChart を実装する .NET MAUI 開発者向けスキルです。プロセス段階の可視化、ラベルや凡例、方向と外観のカスタマイズ、画像出力を扱います。

主な機能

  1. 01ファネル段階の可視化
  2. 02垂直・水平の表示方向
  3. 03データラベルとスクロール可能な凡例
  4. 04ツールチップ・選択・凡例切り替え
  5. 05色・グラデーション・間隔の調整
  6. 06画像へのエクスポート

活用シーン

  1. 01営業プロセスの段階表示
  2. 02マーケティングやコンバージョンファネルの分析
  3. 03段階ごとの転換率や離脱の確認
  4. 04共有用ファネルチャートの出力

インストール

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

$npx skills add https://github.com/syncfusion/maui-toolkit-ui-components-skills --skill syncfusion-maui-toolkit-funnel-charts

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

同梱ファイル

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

references/
advanced-features.md
appearance.md
data-labels.md
exporting.md
getting-started.md
legend.md
tooltip.md

詳細

.NET MAUI でのファンネルチャートの実装

Syncfusion .NET MAUI ファンネルチャート(SfFunnelChart)を実装およびカスタマイズするための包括的なスキルです。ファンネルチャートは、徐々に小さくなるセグメントでデータを可視化し、セールスパイプライン、コンバージョンファネル、マーケティングキャンペーンなど、プロセスの各段階を表現するのに最適です。

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

次のような場合に、このスキルを使用してください。

  • ファンネルチャートを作成して、プロセスの各段階(セールス、マーケティング、コンバージョン)を可視化する
  • 階層データを表示して、徐々に狭くなるセグメントで表現する
  • コンバージョン率や離脱分析を表示する
  • データラベルと凡例を備えた、カスタマイズ可能なファンネルの可視化を実装する
  • ファンネルチャートを画像としてエクスポートする

コンポーネントの概要

SfFunnelChart は、プロセスのさまざまな段階を分析するための美しいファンネルセグメントを作成する .NET MAUI コントロールです。主な機能は次のとおりです。

  • ユーザー操作: 選択、ツールチップ、凡例の切り替え
  • データラベル: 配置やスタイルをカスタマイズして値を表示
  • 凡例のサポート: 項目を識別できるスクロール可能な凡例
  • カスタマイズ: 外観、色、グラデーション、間隔、エフェクト
  • 向き: 垂直または水平のファンネル表示
  • エクスポート: チャートを画像として保存

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

はじめに

📄 参照: references/getting-started.md

  • NuGet パッケージのインストール(Syncfusion.Maui.Toolkit)
  • SfFunnelChart の基本的な実装(XAML と C#)
  • ビューモデルとデータモデルの作成
  • ItemsSource、XBindingPath、YBindingPath によるデータバインディング
  • タイトル、凡例、ツールチップ、データラベルの追加
  • 完全に動作するサンプル
データラベル

📄 参照: references/data-labels.md

  • データラベルを有効にする(ShowDataLabels プロパティ)
  • ラベルの配置オプション(Auto、Inner、Center、Outer)
  • コンテキストの設定(XValue、YValue の表示)
  • ラベルスタイルのカスタマイズ(フォント、色、余白、境界線)
  • セグメントの色を使用したラベルに UseSeriesPalette を使用する
外観とカスタマイズ

📄 参照: references/appearance.md

  • セグメントの色を指定するカスタム PaletteBrushes
  • グラデーションの適用(LinearGradientBrush、RadialGradientBrush)
  • カスタム配色の作成
  • GradientStops の設定
  • ビジュアルデザインのベストプラクティス
凡例

📄 参照: references/legend.md

  • ChartLegend の定義と初期化
  • 凡例の表示と配置(Top、Bottom、Left、Right)
  • ラベルスタイルのカスタマイズ
  • 凡例アイコンの種類
  • OffsetX/OffsetY を使用したフローティング凡例
  • シリーズの表示切り替え
  • 項目のレイアウトと ItemTemplate
  • LegendItemCreated イベント
ツールチップ

📄 参照: references/tooltip.md

  • ツールチップを有効にする(EnableTooltip プロパティ)
  • ツールチップテンプレートのカスタマイズ
  • バインディングコンテキストとデータの書式設定
  • ツールチップの外観のカスタマイズ
高度な機能

📄 参照: references/advanced-features.md

  • 向き(垂直または水平)
  • セグメント間隔の設定
  • ギャップ比率とサイズの設定
  • ビジュアルエフェクトと仕上げ
エクスポート

📄 参照: references/exporting.md

  • チャートを画像としてエクスポート
  • エクスポート形式のオプション
  • チャートの共有と保存

コメント