关于 syncfusion-maui-cartesian-charts
此技能指导 .NET MAUI 开发者实现 Syncfusion SfCartesianChart,涵盖常见图表以及金融和统计可视化。内容还包括初始化、定制、交互、数据处理、导出和无障碍支持。
主要功能
- 01涵盖 20 多种图表类型
- 02配置坐标轴和数据系列
- 03缩放、平移与选择交互
- 04数据标签、图例和注释
- 05数据处理与趋势线
- 06导出和无障碍指南
适用场景
- 01构建时间序列图表
- 02用蜡烛图或 OHLC 图展示股价
- 03用堆叠图比较多组数据
- 04为仪表板添加图表交互
安装
复制下面的命令,在终端中运行。
npx skills add https:/ / github.com/ syncfusion/ maui-ui-components-skills --skill syncfusion-maui-cartesian-charts安装后在 Claude Code 中输入/syncfusion-maui-cartesian-charts确认已加载。
包含的文件
除 SKILL.md 外,安装时一起下载的参考资料和脚本。
references/accessibility.mdadvanced-chart-types.mdannotations-and-plotbands.mdaxis-configuration.mdaxis-customization.mdbasic-chart-types.mdcustomization-and-styling.mddata-handling.mddata-labels.mdexporting-and-localization.mdfinancial-charts.mdgetting-started.mdlegend-and-appearance.mdrange-charts.mdselection.mdstacked-charts.mdstatistical-charts.mdtooltips-and-interaction.mdtrendlines.mdzooming-and-panning.md详细介绍
实现 .NET MAUI 笛卡尔图表
指导用户实现 Syncfusion® .NET MAUI 笛卡尔图表(SfCartesianChart)。这是一套全面的数据可视化解决方案,提供 20 多种图表类型、交互功能和丰富的自定义选项。使用此技能可实现从简单折线图到复杂金融和统计可视化的各种图表。
适用场景
当用户需要执行以下操作时,请使用此技能:
- 可视化数据: 使用折线图、面积图、柱形图、条形图或散点图显示定量数据
- 金融分析: 创建蜡烛图或 OHLC 图,以可视化股票价格
- 统计数据: 绘制箱线图、直方图或误差线图
- 对比分析: 使用堆积图(面积图、柱形图、折线图)比较多个数据集
- 范围可视化: 使用范围面积图或范围柱形图显示高低数据
- 交互式仪表板: 实现缩放、平移、选择和轨迹球功能
- 时间序列数据: 使用日期时间轴和自动滚动绘制时间数据
- 自定义可视化: 添加注释、绘图区带、趋势线和自定义样式
组件概述
SfCartesianChart 控件提供:
- 20 多种图表类型: 折线图、面积图、柱形图、条形图、散点图、气泡图、蜡烛图、OHLC 图、直方图、箱线图、各种堆积图、范围图、瀑布图等
- 灵活的坐标轴: 类别轴、数值轴、日期时间轴、对数轴,支持全面自定义
- 交互功能: 缩放、平移、选择、工具提示、轨迹球、十字准线
- 丰富的自定义选项: 数据标签、图例、注释、绘图区带、趋势线、外观
- 数据处理: 空数据点模式、数据绑定、动态更新
- 导出和本地化: 图像导出、多语言支持
文档和导航指南
入门
📄 阅读: references/getting-started.md
- NuGet 包安装(
Syncfusion.Maui.Charts) - 在 XAML 和 C# 中初始化基本 SfCartesianChart
- 创建数据模型和视图模型
- 坐标轴设置(XAxes、YAxes)
- 使用数据绑定添加第一个序列
- 完整的可运行示例
图表类型
基本图表类型
📄 阅读: references/basic-chart-types.md
- 折线图、面积图、柱形图、条形图、散点图、气泡图
- 各种图表类型的适用场景
- 实现示例
- 常用属性和样式
金融图表
📄 阅读: references/financial-charts.md
- 蜡烛图(烛台可视化)
- OHLC(开盘价-最高价-最低价-收盘价)图
- 金融数据结构和绑定
- 看涨/看跌样式
统计图表
📄 阅读: references/statistical-charts.md
- 箱线图
- 直方图
- 误差线图
- 统计数据要求
堆积图表
📄 阅读: references/stacked-charts.md
- 堆积面积图(普通和 100%)
- 堆积柱形图(普通和 100%)
- 堆积折线图(普通和 100%)
- 用于堆积的序列分组
- 百分比值与绝对值
范围图表
📄 阅读: references/range-charts.md
- 范围面积图
- 范围柱形图
- 样条范围面积图
- 高低数据绑定
高级图表类型
📄 阅读: references/advanced-chart-types.md
- Fastline(针对大型数据集优化)
- 阶梯面积图和阶梯折线图
- 瀑布图
- 性能注意事项
坐标轴配置
坐标轴基础
📄 阅读: references/axis-configuration.md
- 坐标轴类型(类别轴、数值轴、日期时间轴、对数轴)
- XAxes 和 YAxes 集合
- 坐标轴标签和格式
- 坐标轴标题
- 多坐标轴设置
- 自定义标签
轴自定义
📄 阅读: references/axis-customization.md
- 网格线(主网格线、次网格线)样式
- 刻度线配置
- 轴边距
- 范围边距
- 自动滚动增量
- 轴定位
数据可视化与交互
数据标签
📄 阅读: references/data-labels.md
- 启用和定位数据标签
- 标签位置(内部、外部、自动)
- 标签格式和模板
- 样式和外观
- 发布模式显示配置
工具提示和交互功能
📄 阅读: references/tooltips-and-interaction.md
- 工具提示配置和自定义
- 用于多系列比较的轨迹球功能
- 用于精确读取数值的十字线
- 工具提示模板
- 交互式显示模式
缩放和平移
📄 阅读: references/zooming-and-panning.md
- 缩放模式(捏合、框选、鼠标滚轮)
- 平移配置
- ZoomPanBehavior 设置
- 以编程方式控制缩放
- 重置缩放功能
选择
📄 阅读: references/selection.md
- 选择类型(单选、多选、系列)
- DataPointSelectionBehavior
- SeriesSelectionBehavior
- 选择事件
- 自定义选择样式
自定义与样式
图例和外观
📄 阅读: references/legend-and-appearance.md
- 图例配置和定位
- 图例项模板
- 图表外观自定义
- 调色板
- 主题和 Liquid Glass 效果
注释和 PlotBand
📄 阅读: references/annotations-and-plotbands.md
- 注释类型(文本、视图、形状)
- 添加和定位注释
- 用于突出显示区域的 PlotBand 配置
- 使用场景和示例
自定义样式
📄 阅读: references/customization-and-styling.md
- 系列外观自定义
- 添加自定义标签
- 颜色和渐变填充
- 边框和圆角半径
- 模板自定义
数据处理与高级功能
趋势线
📄 阅读: references/trendlines.md
- 趋势线类型(线性、指数、对数、多项式、幂、移动平均)
- 向系列添加趋势线
- 预测和回溯
- 趋势线自定义
数据点管理
📄 阅读: references/data-handling.md
- 空数据点处理
- 空数据点模式(间隙、零值、平均值、丢弃)
- 按区域获取数据点
- 触摸位置检测
- 数据操作
导出和本地化
📄 阅读: references/exporting-and-localization.md
- 将图表导出为图像
- 导出格式和选项
- 本地化配置
- 特定区域设置的格式
- 资源文件
无障碍功能
📄 阅读: references/accessibility.md
- 图表元素和屏幕阅读器播报格式
- 在 Android、iOS、macOS 和 Windows 上启用无障碍功能
- 支持无障碍导航的系列
- 键盘导航(Windows Narrator、macOS VoiceOver)
- 手势导航(Android TalkBack、iOS VoiceOver)
- 为有意义的播报提供有意义的标签
- 完整的无障碍图表示例