syncfusion-blazor-chart-wizard

Syncfusion Blazor Chart Wizard の実装

NuGet: Syncfusion.Blazor.ChartWizard + Syncfusion.Blazor.Themes
名前空間: Syncfusion.Blazor.ChartWizard

Syncfusion Blazor Chart Wizard は、インタラクティブなチャートの作成とカスタマイズをユーザーに案内する、包括的で使いやすいコンポーネントです。プロパティパネル、複数のチャートタイプ、データバインディング、テーマ、アクセシビリティ機能、エクスポート機能を備えた、ダイアログベースのインターフェイスを提供します。

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

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

• インタラクティブなチャート作成：ユーザーがチャートをインタラクティブに作成、カスタマイズできるアプリケーションを構築する場合
• データ可視化ツール：ダッシュボードビルダー、レポートジェネレーター、分析インターフェイスを実装する場合
• ガイド付きチャート設定：視覚的なプロパティパネルを使用して、チャート設定を段階的に案内する場合
• 複数形式へのエクスポート：チャートを PNG、JPEG、SVG、PDF、CSV、XLSX 形式にエクスポートする必要がある場合
• テーマ対応チャート：アプリケーションのテーマ（Material、Fluent、Bootstrap、Tailwind など）に適応するチャートを構築する場合
• アクセシブルな可視化：キーボード操作とスクリーンリーダーに対応した、WCAG 2.2 AA 準拠のチャートを作成する場合
• チャート状態の保持：ユーザー設定やテンプレート用にチャート設定を保存、読み込む場合
• Blazor アプリケーション：Blazor Server、WebAssembly、または Web App アーキテクチャで実装する場合

コンポーネントの概要

Chart Wizard コンポーネントは、次の機能を提供します。

• インタラクティブなチャートビルダー：チャート作成を段階的に案内するインターフェイス
• 15 種類以上のチャートタイプ：折れ線、縦棒、横棒、面、円、散布図、および積み上げ形式
• プロパティパネル：視覚的なコントロールによるリアルタイムのチャートカスタマイズ
• データバインディング：IEnumerable、List、ObservableCollection のデータソースに対応
• 複数系列のサポート：複数のデータ系列とカテゴリを含むチャートを作成
• エクスポート機能：画像（PNG、JPEG、SVG）、ドキュメント（PDF）、データ形式（CSV、XLSX）にエクスポート
• シリアル化：チャート設定全体を JSON として保存、読み込み
• テーマ：一貫したスタイルを備えた 20 種類以上の組み込みテーマ
• アクセシビリティ：キーボード操作に対応した、WCAG 2.2 AA への完全準拠
• RTL サポート：国際対応アプリケーション向けの右から左へのレイアウト

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

はじめに

Blazor アプリケーションの種類に応じて、適切なセットアップガイドを選択してください。

Blazor Server アプリのセットアップ

📄 参照先： references/getting-started.md

Blazor Server アプリケーションの完全なセットアップ手順です。次の内容を含みます。

• Visual Studio、VS Code、.NET CLI を使用したプロジェクトの作成
• NuGet パッケージのインストール（Syncfusion.Blazor.ChartWizard）
• 名前空間のインポートとサービスの登録
• スクリプト参照の設定
• コンポーネントの実装
• データモデルの作成とバインディング
• テーマの設定
• Olympics データを使用した、完全に動作するサンプル
• よくあるセットアップの問題のトラブルシューティング

Blazor WebAssembly（WASM）アプリのセットアップ

📄 参照先： references/getting-started-wasm.md

Blazor WASM アプリケーションの完全なセットアップ手順です。次の内容を含みます。

• IDE ごとの WASM 専用プロジェクトの作成
• 依存関係を復元するパッケージのインストール
• クライアント側レンダリングの設定
• コンポーネントのセットアップとデータバインディング
• WASM 用のテーマ設定
• 完全に動作する WASM のサンプル
• パフォーマンス最適化に関する検討事項

Blazor Web App のセットアップ

📄 参照先： references/getting-started-web-app.md

レンダーモードを使用する Blazor Web App の完全なセットアップ手順です。次の内容を含みます。

• インタラクティブレンダーモード（Server、WebAssembly、Auto）の設定
• インタラクティブ性の設定場所（Global、ページ／コンポーネントごと）
• クライアント側とサーバー側のプロジェクトにおけるパッケージ管理
• レンダーモードに応じたコンポーネントの実装
• 各レンダーモードにわたるテーマ管理
• Auto モードを使用した Web App の完全なサンプル
• レンダーモード選択のベストプラクティス

データの操作

📄 参照： references/working-with-data.md

データバインディングとフィールド設定について包括的に説明します。以下を含みます。

• ChartSettings の構成とプロパティ
• DataSource のバインディング（IEnumerable）
• x 軸のグループ化に使用する CategoryFields の設定
• 複数系列のデータマッピングに使用する SeriesFields
• SeriesType の選択（15 種類以上のチャートタイプ）
• 単一系列と複数系列のチャートパターン
• List のデータバインディング例
• 動的データ向けの ObservableCollection
• データモデル設計のベストプラクティス
• フィールドのマッピングと順序
• オリンピックと売上データを使った完全な例
• データ表示に関する問題のトラブルシューティング

外観とカスタマイズ

📄 参照： references/appearance-customization.md

外観のカスタマイズとレイアウト設定について説明します。以下を含みます。

• Width プロパティと Height プロパティ（パーセント指定とピクセル指定）
• レスポンシブデザインのパターン
• Theme プロパティの設定（20 種類以上の組み込みテーマ）
  • Material、Material3、MaterialDark、Material3Dark
  • Fluent、Fluent2、FluentDark、Fluent2Dark、Fluent2HighContrast
  • Bootstrap、Bootstrap4、Bootstrap5、BootstrapDark、Bootstrap5Dark
  • Tailwind、Tailwind3、TailwindDark、Tailwind3Dark
  • Fabric、FabricDark
  • HighContrast、HighContrastLight
• テーマ用スタイルシートの前提条件と読み込み
• EnableRtl による右から左へのレイアウトのサポート
• PropertyPanelExpanded によるパネルの初期状態の制御
• 外観設定を組み合わせる例
• テーマの一貫性を保つためのベストプラクティス
• テーマとサイズに関する問題のトラブルシューティング

アクセシビリティ

📄 参照： references/accessibility.md

アクセシビリティへの準拠と機能について包括的に説明します。以下を含みます。

• WCAG 2.2 AA レベルのサポート
• Section 508 への準拠
• WAI-ARIA 属性とロール
  • データラベル、凡例、軸タイトル
  • チャートのタイトルと系列のデータポイント
  • ARIA ロール：img、button、region
  • ARIA 属性：label、hidden、pressed
• スクリーンリーダーのサポート
• 完全なキーボードナビゲーション
  • フォーカス管理（Alt+J、Tab、Shift+Tab）
  • データポイントのナビゲーション（矢印キー）
  • 系列の選択（Enter、Space）
  • 凡例のナビゲーションと切り替え
  • ズームとパンの操作
  • 印刷のショートカット（Ctrl+P）
• 色のコントラストに関する準拠
• モバイルデバイスのサポート
• Axe-core 検証の統合
• テストのガイドラインとベストプラクティス

シリアル化

📄 参照： references/serialization.md

チャートの状態を保存・読み込みする機能について説明します。以下を含みます。

• SaveChart() メソッド：JSON 文字列にシリアル化
• LoadChartAsync() メソッド：JSON から復元
• チャート状態全体の取得（設定、系列、軸、タイトル、スタイル）
• 保存先の選択肢（データベース、ファイル、LocalStorage、セッション状態）
• 保存・読み込みボタンの実装
• コンポーネント参照の設定（@ref）
• 状態管理のパターン
• バージョン互換性に関する考慮事項
• ユースケース：ユーザー設定、ダッシュボード構成、レポートテンプレート
• エラー処理と検証
• 動作する完全な例

印刷とエクスポート

📄 参照： references/print-export.md

チャートを複数の形式でエクスポートできます。以下を含みます。

• サポートされる形式：PNG、JPEG、SVG、PDF、CSV、XLSX、PRINT
• ChartExportSettings による宣言的な設定
  • FileName プロパティ
  • 画像／PDF エクスポート用の Width と Height
  • PDF／印刷用の Orientation（Portrait／Landscape）
• エクスポートボタンの統合
• ブラウザーダイアログを使用した印刷機能
• 実行時のカスタマイズに使用する Exporting イベント
  • ChartExportingEventArgs のプロパティ
  • 動的なファイル名の設定
  • 条件に応じたエクスポートのキャンセル
  • 実行時のサイズ調整
  • 向きの制御
• 形式ごとの考慮事項
• 解像度とファイル名に関するベストプラクティス
• イベント処理を含む完全な例
• エクスポートの問題に関するトラブルシューティング

API リファレンス

📄 読む: references/api-reference.md

すべてのクラス、プロパティ、メソッド、イベントに関する完全な API ドキュメントです。以下が含まれます。

• SfChartWizard クラス
  • Width、Height、Theme プロパティ
  • EnableRtl、PropertyPanelExpanded
  • Exporting イベント
  • SaveChart()、LoadChartAsync() メソッド
• ChartSettings クラス
  • Datasource、CategoryFields、SeriesFields
  • 15 種類以上のタイプを持つ SeriesType プロパティ
• ChartExportSettings クラス
  • FileName、Width、Height、Orientation
• ChartExportingEventArgs クラス
  • エクスポートのカスタマイズに使用するイベント引数
• ChartWizardSeriesType enum
  • 利用可能なすべての系列タイプ
• PageOrientation enum
  • 縦向きと横向きのオプション

クイックスタートの例

Chart Wizard コンポーネントを使い始めるための最小限の例を紹介します。

@using Syncfusion.Blazor.ChartWizard

<SfChartWizard Width="100%" Height="500px">
    <ChartSettings DataSource="@Data"
                   CategoryFields="@CategoryList"
                   SeriesFields="@SeriesList"
                   SeriesType="ChartWizardSeriesType.Column">
    </ChartSettings>
</SfChartWizard>

@code {
    public class OlympicsData
    {
        public string Country { get; set; }
        public int Gold { get; set; }
        public int Silver { get; set; }
        public int Bronze { get; set; }
    }

    private readonly List<string> CategoryList = new() { "Country" };
    private readonly List<string> SeriesList = new() { "Gold", "Silver", "Bronze" };

    private List<OlympicsData> Data = new()
    {
        new OlympicsData { Country = "USA",   Gold = 40, Silver = 44, Bronze = 42 },
        new OlympicsData { Country = "China", Gold = 40, Silver = 27, Bronze = 24 },
        new OlympicsData { Country = "Japan", Gold = 20, Silver = 12, Bronze = 13 }
    };
}

よくあるパターン

単一系列のチャート

@using Syncfusion.Blazor.ChartWizard

<SfChartWizard Width="100%" Height="500px">
    <ChartSettings DataSource="@SalesData"
                   CategoryFields="@CategoryList"
                   SeriesFields="@SeriesList"
                   SeriesType="ChartWizardSeriesType.Line">
    </ChartSettings>
</SfChartWizard>

@code {
    public class SalesInfo
    {
        public string Month { get; set; }
        public double Sales { get; set; }
    }

    private List<SalesInfo> SalesData = new()
    {
        new SalesInfo { Month = "Jan", Sales = 100 },
        new SalesInfo { Month = "Feb", Sales = 120 },
        new SalesInfo { Month = "Mar", Sales = 140 }
    };

    private readonly List<string> CategoryList = new() { "Month" };
    private readonly List<string> SeriesList = new() { "Sales" };
}

テーマを指定した複数系列

@using Syncfusion.Blazor.ChartWizard

<SfChartWizard Theme="Theme.Fluent2" Width="100%" Height="500px">
    <ChartSettings DataSource="@OlympicsData"
                   CategoryFields="@CategoryList"
                   SeriesFields="@SeriesList"
                   SeriesType="ChartWizardSeriesType.Bar">
    </ChartSettings>
</SfChartWizard>

@code {
    private readonly List<string> CategoryList = new() { "Country" };
    private readonly List<string> SeriesList = new() { "Gold", "Silver", "Bronze" };

    public class OlympicsDataModel
    {
        public string Country { get; set; }
        public int Gold { get; set; }
        public int Silver { get; set; }
        public int Bronze { get; set; }
    }

    private List<OlympicsDataModel> OlympicsData = new()
    {
        new OlympicsDataModel { Country = "USA",   Gold = 40, Silver = 44, Bronze = 42 },
        new OlympicsDataModel { Country = "China", Gold = 40, Silver = 27, Bronze = 24 },
        new OlympicsDataModel { Country = "Japan", Gold = 20, Silver = 12, Bronze = 13 }
    };
}

エクスポート設定を指定する場合

@using Syncfusion.Blazor.ChartWizard

<SfChartWizard Width="100%" Height="500px">
    <ChartSettings DataSource="@ReportData"
                   CategoryFields="@CategoryList"
                   SeriesFields="@SeriesList"
                   SeriesType="ChartWizardSeriesType.Column">

        <ChartExportSettings FileName="QuarterlyReport"
                             Width="1024"
                             Height="768"
                             Orientation="Syncfusion.Blazor.ChartWizard.PageOrientation.Landscape" />
    </ChartSettings>
</SfChartWizard>

@code {
    private readonly List<string> CategoryList = new() { "Quarter" };
    private readonly List<string> SeriesList = new() { "Revenue", "Profit" };

    public class ReportItem
    {
        public string Quarter { get; set; }
        public double Revenue { get; set; }
        public double Profit { get; set; }
    }

    private List<ReportItem> ReportData = new()
    {
        new ReportItem { Quarter = "Q1", Revenue = 120000, Profit = 45000 },
        new ReportItem { Quarter = "Q2", Revenue = 150000, Profit = 60000 },
        new ReportItem { Quarter = "Q3", Revenue = 170000, Profit = 75000 },
        new ReportItem { Quarter = "Q4", Revenue = 200000, Profit = 90000 }
    };
}

プロパティパネルを折りたたんだ状態にする場合

@using Syncfusion.Blazor.ChartWizard

<SfChartWizard Width="90%"
               Height="600px"
               PropertyPanelExpanded="false"
               Theme="Theme.Material3">

    <ChartSettings DataSource="@MyData"
                   CategoryFields="@CategoryFields"
                   SeriesFields="@SeriesFields"
                   SeriesType="ChartWizardSeriesType.Area">
    </ChartSettings>

</SfChartWizard>

@code {
    private readonly List<string> CategoryFields = new() { "CategoryName" };
    private readonly List<string> SeriesFields = new() { "Value1", "Value2" };

    public class MyItem
    {
        public string CategoryName { get; set; }
        public double Value1 { get; set; }
        public double Value2 { get; set; }
    }

    private List<MyItem> MyData = new()
    {
        new MyItem { CategoryName = "A", Value1 = 30, Value2 = 20 },
        new MyItem { CategoryName = "B", Value1 = 45, Value2 = 35 },
        new MyItem { CategoryName = "C", Value1 = 50, Value2 = 40 }
    };
}

主なプロパティ

SfChartWizard のプロパティ

プロパティ	型	既定値	説明
Width	string	"100%"	コンポーネントの幅（px または %）
Height	string	"100%"	コンポーネントの高さ（px または %）
Theme	Theme	Fluent2	ビジュアルテーマ（Material、Fluent、Bootstrap、Tailwind など）
EnableRtl	bool	false	右から左へのレイアウトを有効にします
PropertyPanelExpanded	bool	true	初回レンダリング時にプロパティパネルを表示します

ChartSettings のプロパティ

プロパティ	型	必須	説明
DataSource	IEnumerable	はい	チャートのデータコレクション
CategoryFields	List	はい	x 軸カテゴリのフィールド名
SeriesFields	List	はい	データ系列のフィールド名
SeriesType	ChartWizardSeriesType	いいえ	チャートタイプ（Line、Column、Bar、Area、Pie など）

ChartExportSettings のプロパティ

プロパティ	型	既定値	説明
FileName	string	""	エクスポートするファイル名（拡張子なし）
Width	double	NaN	エクスポート時の幅（ピクセル）
Height	double	NaN	エクスポート時の高さ（ピクセル）
Orientation	PageOrientation	Portrait	PDF／印刷時のページの向き

よくあるユースケース

ビジネス分析ダッシュボード

@using Syncfusion.Blazor.ChartWizard

<SfChartWizard Width="100%"
               Height="600px"
               Theme="Theme.Bootstrap5">

    <ChartSettings DataSource="@QuarterlySales"
                   CategoryFields="@CategoryFields"
                   SeriesFields="@SeriesFields"
                   SeriesType="ChartWizardSeriesType.StackingColumn">

        <ChartExportSettings FileName="QuarterlyAnalysis"
                             Orientation="Syncfusion.Blazor.ChartWizard.PageOrientation.Landscape" />
    </ChartSettings>

</SfChartWizard>

@code {
    private readonly List<string> CategoryFields = new() { "Quarter", "Region" };
    private readonly List<string> SeriesFields = new() { "Revenue", "Profit", "Expenses" };

    public class QuarterlySale
    {
        public string Quarter { get; set; }
        public string Region { get; set; }
        public double Revenue { get; set; }
        public double Profit { get; set; }
        public double Expenses { get; set; }
    }

    private List<QuarterlySale> QuarterlySales = new()
    {
        new QuarterlySale { Quarter = "Q1", Region = "North", Revenue = 150000, Profit = 50000, Expenses = 30000 },
        new QuarterlySale { Quarter = "Q2", Region = "North", Revenue = 170000, Profit = 60000, Expenses = 35000 },
        new QuarterlySale { Quarter = "Q3", Region = "South", Revenue = 160000, Profit = 55000, Expenses = 32000 },
        new QuarterlySale { Quarter = "Q4", Region = "South", Revenue = 180000, Profit = 65000, Expenses = 38000 }
    };
}

オリンピックのメダル比較

@using Syncfusion.Blazor.ChartWizard

<SfChartWizard Theme="Theme.Material3"
               PropertyPanelExpanded="true"
               Width="100%"
               Height="500px">

    <ChartSettings DataSource="@OlympicsMedals"
                   CategoryFields="@CategoryFields"
                   SeriesFields="@SeriesFields"
                   SeriesType="ChartWizardSeriesType.Bar">
    </ChartSettings>

</SfChartWizard>

@code {
    private readonly List<string> CategoryFields = new() { "Country" };
    private readonly List<string> SeriesFields = new() { "Gold", "Silver", "Bronze" };

    public class OlympicsMedalInfo
    {
        public string Country { get; set; }
        public int Gold { get; set; }
        public int Silver { get; set; }
        public int Bronze { get; set; }
    }

    private List<OlympicsMedalInfo> OlympicsMedals = new()
    {
        new OlympicsMedalInfo { Country = "USA",   Gold = 40, Silver = 44, Bronze = 42 },
        new OlympicsMedalInfo { Country = "China", Gold = 40, Silver = 27, Bronze = 24 },
        new OlympicsMedalInfo { Country = "Japan", Gold = 20, Silver = 12, Bronze = 13 }
    };
}

売上トレンドの可視化

@using Syncfusion.Blazor.ChartWizard

<SfChartWizard Width="90%"
               Height="500px">

    <ChartSettings DataSource="@MonthlySales"
                   CategoryFields="@CategoryFields"
                   SeriesFields="@SeriesFields"
                   SeriesType="ChartWizardSeriesType.Line">
    </ChartSettings>

</SfChartWizard>

@code {
    private readonly List<string> CategoryFields = new() { "Month" };
    private readonly List<string> SeriesFields = new() { "CurrentYear", "PreviousYear" };

    public class SalesRecord
    {
        public string Month { get; set; }
        public double CurrentYear { get; set; }
        public double PreviousYear { get; set; }
    }

    private List<SalesRecord> MonthlySales = new()
    {
        new SalesRecord { Month = "Jan", CurrentYear = 12000, PreviousYear = 10000 },
        new SalesRecord { Month = "Feb", CurrentYear = 13500, PreviousYear = 11000 },
        new SalesRecord { Month = "Mar", CurrentYear = 15000, PreviousYear = 12500 }
    };
}

複数カテゴリの人口データ

@using Syncfusion.Blazor.ChartWizard

<SfChartWizard EnableRtl="false"
               Theme="Theme.Fluent2"
               Width="100%"
               Height="500px">

    <ChartSettings DataSource="@CityPopulation"
                   CategoryFields="@CategoryFields"
                   SeriesFields="@SeriesFields"
                   SeriesType="ChartWizardSeriesType.Column">
    </ChartSettings>

</SfChartWizard>

@code {
    private readonly List<string> CategoryFields = new() { "City", "Country" };
    private readonly List<string> SeriesFields = new() { "Population" };

    public class PopulationInfo
    {
        public string City { get; set; }
        public string Country { get; set; }
        public double Population { get; set; }
    }

    private List<PopulationInfo> CityPopulation = new()
    {
        new PopulationInfo { City = "Tokyo",       Country = "Japan",  Population = 37.4 },
        new PopulationInfo { City = "Delhi",       Country = "India",  Population = 31.0 },
        new PopulationInfo { City = "Shanghai",    Country = "China",  Population = 27.0 },
        new PopulationInfo { City = "São Paulo",   Country = "Brazil", Population = 22.0 }
    };
}

利用可能なチャートタイプ（SeriesType）

• Line - データポイントをつないだ折れ線チャート
• StackingLine - 積み上げ折れ線チャート
• StackingLine100 - 100% 積み上げ折れ線チャート
• Column - 縦棒チャート
• StackingColumn - 積み上げ縦棒チャート
• StackingColumn100 - 100% 積み上げ縦棒チャート
• Bar - 横棒チャート
• StackingBar - 積み上げ横棒チャート
• StackingBar100 - 100% 積み上げ横棒チャート
• Area - 領域を塗りつぶしたエリアチャート
• StackingArea - 積み上げエリアチャート
• StackingArea100 - 100% 積み上げエリアチャート
• Scatter - 個別のマーカーを表示する散布図
• Pie - 割合を示す円形の円グラフ

前提条件

• .NET SDK 6.0 以降
• Syncfusion Blazor ライセンス（試用版または商用版）
• Blazor Server、WebAssembly、または Web App プロジェクト
• Visual Studio 2022、VS Code、または .NET CLI

パッケージの要件

dotnet add package Syncfusion.Blazor.ChartWizard

名前空間のインポート

@using Syncfusion.Blazor
@using Syncfusion.Blazor.ChartWizard

サービスの登録

// Program.cs
builder.Services.AddSyncfusionBlazor();

スクリプトの参照

<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>

次のステップ

1. Blazor アプリケーションの種類（Server、WASM、または Web App）を選択します
2. 該当するスタートガイドを読みます
3. データモデルを使ってデータバインディングを設定します
4. テーマとプロパティを使って外観をカスタマイズします
5. 必要に応じてエクスポートとシリアル化を実装します
6. 本番環境で使用するためにアクセシビリティへの準拠を確認します

関連コンポーネント

• Syncfusion Blazor Charts - ウィザードインターフェイスを使わずにプログラムでグラフを作成するためのコンポーネント
• Syncfusion Blazor DataGrid - 表形式のデータを可視化するためのコンポーネント
• Syncfusion Blazor Dashboard Layout - 複数のグラフを配置するためのコンポーネント

サポートリソース

• 公式ドキュメント
• API リファレンス
• ライブデモ
• コミュニティフォーラム