菜单
Implements the Syncfusion Blazor Chart Wizard for guided chart creation. Use this when building interactive chart builders that require step-by-step configuration, data binding, and export features. Covers chart customization, theming, and accessibility.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/syncfusion/blazor-ui-components-skills --skill syncfusion-blazor-chart-wizard命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
基于 SOC 职业分类
正在显示 SKILL.md
| name | syncfusion-blazor-chart-wizard |
| description | Implements the Syncfusion Blazor Chart Wizard for guided chart creation. Use this when building interactive chart builders that require step-by-step configuration, data binding, and export features. Covers chart customization, theming, and accessibility. |
| metadata | {"author":"Syncfusion Inc","version":"34.1.29","category":"Data Visualization"} |
NuGet: Syncfusion.Blazor.ChartWizard + Syncfusion.Blazor.Themes
Namespace: Syncfusion.Blazor.ChartWizard
The Syncfusion Blazor Chart Wizard is a comprehensive, user-friendly component that guides users through interactive chart creation and customization. It provides a dialog-based interface with property panels, multiple chart types, data binding, theming, accessibility features, and export capabilities.
Use this skill when:
The Chart Wizard component provides:
Choose the appropriate setup guide based on your Blazor application type:
📄 Read: references/getting-started.md
Complete setup instructions for Blazor Server applications, including:
📄 Read: references/getting-started-wasm.md
Complete setup instructions for Blazor WASM applications, including:
📄 Read: references/getting-started-web-app.md
Complete setup instructions for Blazor Web Apps with render modes, including:
📄 Read: references/working-with-data.md
Comprehensive data binding and field configuration, including:
📄 Read: references/appearance-customization.md
Visual customization and layout configuration, including:
📄 Read: references/accessibility.md
Comprehensive accessibility compliance and features, including:
📄 Read: references/serialization.md
Chart state save and load functionality, including:
📄 Read: references/print-export.md
Export charts to multiple formats, including:
📄 Read: references/api-reference.md
Complete API documentation for all classes, properties, methods, and events, including:
Here's a minimal example to get you started with the Chart Wizard component:
@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 }
};
}
| Property | Type | Default | Description |
|---|---|---|---|
| Width | string | "100%" | Width of the component (px or %) |
| Height | string | "100%" | Height of the component (px or %) |
| Theme | Theme | Fluent2 | Visual theme (Material, Fluent, Bootstrap, Tailwind, etc.) |
| EnableRtl | bool | false | Enable right-to-left layout |
| PropertyPanelExpanded | bool | true | Show property panel on initial render |
| Property | Type | Required | Description |
|---|---|---|---|
| DataSource | IEnumerable | Yes | Data collection for the chart |
| CategoryFields | List | Yes | Field names for x-axis categories |
| SeriesFields | List | Yes | Field names for data series |
| SeriesType | ChartWizardSeriesType | No | Chart type (Line, Column, Bar, Area, Pie, etc.) |
| Property | Type | Default | Description |
|---|---|---|---|
| FileName | string | "" | Name for exported file (without extension) |
| Width | double | NaN | Export width in pixels |
| Height | double | NaN | Export height in pixels |
| Orientation | PageOrientation | Portrait | Page orientation for PDF/print |
@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 }
};
}
dotnet add package Syncfusion.Blazor.ChartWizard
@using Syncfusion.Blazor
@using Syncfusion.Blazor.ChartWizard
// Program.cs
builder.Services.AddSyncfusionBlazor();
<!-- App.razor or _Host.cshtml -->
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>