syncfusion-maui-toolkit-polar-charts について
Syncfusion SfPolarChart を使う .NET MAUI 開発者向けのガイドです。放射状の系列比較、レーダー形式のグリッド、軸、操作要素、カスタマイズ、画像出力を扱います。
主な機能
- 01ポーラーライン・エリア系列
- 02円形または多角形のグリッド線
- 03カテゴリ、数値、日時の各軸
- 04データラベル、マーカー、凡例
- 05PNG、JPEG、BMP への出力
活用シーン
- 01複数系列の放射状比較
- 02季節や方向性のデータ表示
- 03ポーラー・レーダーチャートの作成
- 04レポート用のチャート画像保存
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ syncfusion/ maui-toolkit-ui-components-skills --skill syncfusion-maui-toolkit-polar-chartsインストール後、Claude Code で/syncfusion-maui-toolkit-polar-chartsを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
references/appearance-customization.mdaxis-configuration.mddata-labels-markers.mdexporting.mdgetting-started.mdlegend-tooltip.mdrendering-position.mdseries-types.md詳細
Syncfusion .NET MAUI Polar Charts の実装
ユーザーが Syncfusion .NET MAUI Polar Chart(SfPolarChart)を実装できるように支援します。SfPolarChart を使用すると、極座標でデータを可視化し、円形レイアウトで値と角度を表現できます。レーダーチャート、スパイダーチャート、ウェブチャート、スターチャート、またはクモの巣チャートとも呼ばれるこれらの可視化は、複数のデータ系列を放射状に比較したり、周期的または方向性のあるデータパターンを表示したりするのに最適です。
このスキルを使用する場面
ユーザーが次のことを必要としている場合に、このスキルを使用します。
- 極座標チャートまたはレーダーチャートを作成する - 円形/角度レイアウトでデータを可視化する
- 複数のデータ系列を放射状に比較する - 極座標形式で2~3系列以上を同時に表示する
- 周期的または方向性のあるデータを表示する - 方位、季節パターン、カテゴリごとのパフォーマンス指標を表示する
- 極座標スタイルとレーダースタイルを切り替える - 円形のグリッド線(極座標)と多角形のグリッド線(レーダー/スパイダー)を切り替える
- 折れ線またはエリア系列を実装する - PolarLineSeries または PolarAreaSeries を使用する
- 極座標チャートの外観をカスタマイズする - 軸、マーカー、データラベル、凡例、ツールチップ、色を設定する
- 極座標の角度を設定する - 始点の角度を調整して向きを変更する(0°、90°、180°、270°)
- 極座標チャートをエクスポートする - レポートやドキュメント用にチャートを画像として保存する
コンポーネントの概要
主な機能:
- 系列の種類:極座標の折れ線系列とエリア系列。複数系列にも対応
- グリッド線の種類:円形(極座標チャート)または多角形(レーダー/スパイダーチャート)
- 軸の種類:Category、Numeric、DateTime 軸
- カスタマイズ:データラベル、マーカー、凡例、ツールチップ、色
- 描画位置:向きに合わせて極座標の角度を調整可能
- エクスポート:チャートを画像形式(PNG、JPEG、BMP)で保存
- インタラクティブ機能:系列の閉じる/開く、マーカーのカスタマイズ、レスポンシブデザイン
ドキュメントとナビゲーションガイド
はじめに
📄 参照: references/getting-started.md
ユーザーが次のことを必要としている場合:
Syncfusion.Maui.Toolkitパッケージをインストールしてセットアップする- 初めての極座標チャートを作成する
- 基本的なチャート構造(SfPolarChart、PrimaryAxis、SecondaryAxis)を理解する
- ビューモデルとデータバインディングを初期化する
- チャートに系列を追加する
- 完全な動作例を確認する
系列の種類
📄 参照: references/series-types.md
ユーザーが次のことを必要としている場合:
- 極座標の折れ線系列とエリア系列から選択する
- PolarLineSeries と PolarAreaSeries の違いを理解する
- 極座標とレーダーの外観を切り替えるため、グリッド線の種類(Circle と Polygon)を変更する
- 系列を閉じる/開く(IsClosed プロパティ)を設定する
- 複数の系列を同時に表示する
- 系列の種類を比較し、適切なものを選ぶ
軸の設定
📄 参照: references/axis-configuration.md
ユーザーが次のことを必要としている場合:
- PrimaryAxis または SecondaryAxis を設定する
- Category、Numeric、DateTime 軸を使用する
- 軸ラベル、書式、回転をカスタマイズする
- 軸線と目盛り線のスタイルを設定する
- グリッド線(主目盛りと補助目盛り)を設定する
- 軸タイトルと配置を設定する
- 軸の範囲と間隔を調整する
データラベルとマーカー
📄 参照: references/data-labels-markers.md
ユーザーが次のことを必要としている場合:
- 系列のデータポイントにデータラベルを表示し、カスタマイズする
- データラベルの位置と書式を設定する
- カスタムのデータラベルテンプレートを作成する
- マーカーを有効にする(ShowMarkers プロパティ)
- マーカーの形状、サイズ、色をカスタマイズする
- MarkerSettings プロパティを設定する
凡例とツールチップ
📄 参照: references/legend-tooltip.md
ユーザーが次のことを必要としている場合:
- 凡例を追加して配置する
- 凡例項目と外観をカスタマイズする
- カスタムの凡例テンプレートを作成する
- インタラクティブなツールチップを有効にする
- ツールチップの内容と外観をカスタマイズする
- カスタムのツールチップテンプレートを作成する
外観のカスタマイズ
📄 参照: references/appearance-customization.md
次のことが必要な場合:
- チャートの色とパレットをカスタマイズする
- 系列ごとのスタイルを適用する
- 背景と枠線を設定する
- アプリのテーマと統合する
- カスタム CSS またはスタイルパターンを適用する
描画位置
📄 参照: references/rendering-position.md
次のことが必要な場合:
- 極座標チャートの開始角度を調整する
- チャートの向きを回転する(0°、90°、180°、270°)
- StartAngle プロパティの使い方を理解する
- 特定の方位に合わせてデータを配置する
- 角度の異なる配置のチャートを作成する
エクスポート
📄 参照: references/exporting.md
次のことが必要な場合:
- チャートを画像形式でエクスポートする
- チャートを PNG、JPEG、または BMP として保存する
- エクスポート設定を構成する
- エクスポート機能を実装する
- レポート用のチャート画像を生成する