syncfusion-maui-toolkit-spark-charts

概述

本技能用于在 .NET MAUI 应用程序中实现 Syncfusion 的 SfSparkChart 控件。Spark Charts 是轻量级的微型可视化控件，适合在仪表盘、表格和报表等紧凑空间内展示数据趋势。

何时使用

当需要在 .NET MAUI 应用中实现 SfSparkChart 控件时使用本技能。典型场景包括：

在不占用大量 UI 空间的情况下快速展示数据趋势
可视化销售趋势、股票表现或时间序列数据
在胜负（Win/Loss）场景中展示正负值
创建包含多个微型图表的仪表盘组件
高亮特定数据点（首点、末点、最高点、最低点、负值）

四种内置图表类型

SfSparkChart 是紧凑型图表控件，包含四种内置图表类型：

SparkLineChart：基于折线的可视化，适合识别趋势和模式
SparkAreaChart：填充面积可视化，适合强调变化幅度
SparkColumnChart：垂直柱状可视化，适合比较不同数据值
SparkWinLossChart：胜负表示，适合展示正负场景

核心功能

数据绑定到 ObservableCollection、List 或 IEnumerable
四种图表类型满足不同可视化需求
标记显示与自定义（仅折线图和面积图）
数据点样式设置（首点、末点、最高点、最低点、负值）
轴显示与原点自定义
用于突出数值区间的范围带高亮
针对微型可视化优化的轻量级性能

入门与安装

需要在项目中完成 NuGet 包安装与配置。需在 MauiProgram.cs 中注册处理器。

using Syncfusion.Maui.Toolkit.Hosting;

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
            .UseMauiApp<App>()
            .ConfigureSyncfusionToolkit()
            .ConfigureFonts(fonts =>
            {
                fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
            });
        return builder.Build();
    }
}

在 XAML 中创建基础 SparkLineChart：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:sparkchart="clr-namespace:Syncfusion.Maui.Toolkit.SparkCharts;assembly=Syncfusion.Maui.Toolkit"
             x:Class="SparkChartDemo.MainPage">

    <sparkchart:SfSparkLineChart 
        ItemsSource="{Binding Data}" 
        YBindingPath="Value"
        ShowMarkers="True"
        HeightRequest="100"
        WidthRequest="150">
    </sparkchart:SfSparkLineChart>

</ContentPage>

从 ViewModel 绑定数据：

public class SparkDataViewModel
{
    public ObservableCollection<DataPoint> Data { get; set; }
    
    public SparkDataViewModel()
    {
        Data = new ObservableCollection<DataPoint>
        {
            new DataPoint { Value = 10 },
            new DataPoint { Value = 15 },
            new DataPoint { Value = 12 },
            new DataPoint { Value = 20 },
            new DataPoint { Value = 18 }
        };
    }
}

public class DataPoint
{
    public double Value { get; set; }
}

文档导航

getting-started.md：安装与 NuGet 包设置、项目配置（MauiProgram.cs 处理器注册）、基础 SparkLineChart 实现、命名空间导入与首次渲染、数据绑定设置、可直接复制使用的起始代码
chart-types.md：为数据选择合适的图表类型，四种图表类型的代码示例，常见类型选择模式
markers-and-labels.md：在折线图和面积图上启用标记，标记形状类型与自定义，标记样式属性（Fill、Stroke、StrokeWidth、Height、Width），标记定位与可见性，常见标记模式（高亮端点与数据点），标记显示的性能考量
styling-and-appearance.md：数据点样式与颜色自定义，首点、末点、最高点、最低点高亮，柱状图和胜负图的负值样式，画刷与颜色属性，内边距与间距配置，尺寸自定义与布局控制，高级样式示例
data-binding.md：绑定到 ObservableCollection 实现响应式更新，绑定到 List 处理静态数据，绑定到 IEnumerable 处理 LINQ 查询，XBindingPath 与 YBindingPath 配置，动态数据源更新，常见绑定模式与最佳实践
axis-and-ranges.md：启用轴显示（ShowAxis 属性），轴原点配置作为基线参考，轴类型（数值、分类、日期时间），用于分类/时间轴的 XBindingPath 属性，范围带可视化（RangeBandStart、RangeBandEnd、RangeBandFill），轴线样式与自定义，突出数值区间与阈值

常见模式

仪表盘摘要卡片：展示快速销售趋势，设置首末点颜色。

<sparkchart:SfSparkLineChart 
    ItemsSource="{Binding MonthlySales}" 
    YBindingPath="Amount"
    ShowMarkers="False"
    FirstPointFill="Blue"
    LastPointFill="Red">
</sparkchart:SfSparkLineChart>

带阈值的性能指标：使用范围带高亮可接受范围内的数据。

<sparkchart:SfSparkLineChart 
    ItemsSource="{Binding PerformanceMetrics}" 
    YBindingPath="Value"
    ShowAxis="True"
    RangeBandStart="50"
    RangeBandEnd="100"
    RangeBandFill="LightGreen">
</sparkchart:SfSparkLineChart>

胜负可视化：

<sparkchart:SfSparkWinLossChart 
    ItemsSource="{Binding GameResults}" 
    YBindingPath="Result"
    NegativePointsFill="Red">
</sparkchart:SfSparkWinLossChart>

样式化数据点：强调关键数据点。

<sparkchart:SfSparkColumnChart 
    ItemsSource="{Binding MonthlyRevenue}" 
    YBindingPath="Revenue"
    FirstPointFill="Green"
    LastPointFill="Blue"
    HighPointFill="Gold"
    LowPointFill="Red"
    NegativePointsFill="DarkRed">
</sparkchart:SfSparkColumnChart>

主要属性参考

核心属性：ItemsSource（IEnumerable，数据源）、YBindingPath（string，Y 轴值属性名）、XBindingPath（string，X 轴值属性名）、Height/Width（double，图表高度/宽度）。

显示属性：ShowMarkers（bool，默认 false，显示标记，仅折线图和面积图）、ShowAxis（bool，默认 false，显示轴基线）、Padding（Thickness，默认 0）、AxisOrigin（double，轴线位置的 Y 轴值）。

样式属性：FirstPointFill、LastPointFill、HighPointFill、LowPointFill、NegativePointsFill（均为 Brush，分别对应首点、末点、最高点、最低点、负值颜色）。

范围带属性：RangeBandStart、RangeBandEnd（double，范围带的 Y 轴起止值）、RangeBandFill（Brush）。

轴属性：AxisType（SparkChartAxisType，默认 Numeric，可选 Numeric、Category、DateTime）、AxisLineStyle（SparkChartLineStyle，包含 Stroke、StrokeWidth、StrokeDashArray）。

标记属性（仅折线图和面积图）：MarkerSettings（SparkChartMarkerSettings，标记自定义配置）。

常见问题与解决方案

图表显示为空：检查 ItemsSource 绑定、YBindingPath 匹配、数据源非 null，确保数据属性为公开且包含数值。

标记不显示：确认使用折线图或面积图，设置 ShowMarkers="True"，检查 MarkerSettings 中 Height/Width 大于 0。

范围带不可见：确认 RangeBandStart < RangeBandEnd，范围值在数据的 Y 轴范围内，RangeBandFill 非透明。

大数据集性能差：考虑仅显示近期数据点，使用聚合数据，避免大量标记样式，在对性能敏感的场景禁用 ShowMarkers。

限制

资料未提供具体的收费、价格、平台支持范围或授权信息，这些内容暂未提供。