:用 Labeler 与 Labels 定制 .NET 图表刻度文本)
数据可视化图表库跨平台【免费下载链接】LiveCharts2Beautiful, interactive charts, maps, and gauges. One API for every .NET UI framework.项目地址https://gitcode.com/gh_mirrors/li/LiveCharts2点击查看免费下载导读本篇文章围绕 LiveCharts2 官方示例 docs/samples/axes/labelsFormat 展开系统讲解如何通过坐标轴Labeler委托与Labels集合自定义 Cartesian 图表的刻度标签文本包括货币格式化、分类命名、全局默认标签器的替换以及标签绘制的底层机制。阅读完本文后你将掌握在 WPF、Avalonia、MAUI、WinForms、Blazor、Eto、Uno 等所有 .NET UI 框架下用同一套 API 把纵轴刻度输出为$200、$400这类带单位文本并让横轴显示 “Sergio / Lando / Lewis” 这类业务名称同时理解这些配置在 CoreAxis 与 Labelers 中的真实生效链路。示例整体结构一个典型的 MVVM 标签格式化样本labelsFormat是仓库中一个跨平台共享的示例。其文档主体由模板引擎渲染把共享的 MVVM 视图模型与各平台视图拼装成文示例源码则散落在各平台的Axes/LabelsFormat目录与共享的ViewModelsSamples中共享视图模型samples/ViewModelsSamples/Axes/LabelsFormat/ViewModel.csWPF 视图samples/WPFSample/Axes/LabelsFormat/View.xamlAvalonia 视图samples/AvaloniaSample/Axes/LabelsFormat/View.axamlMAUI 视图samples/MauiSample/Axes/LabelsFormat/View.xamlBlazor 视图samples/BlazorSample/Pages/Axes/LabelsFormat/View.razorEto 视图samples/EtoFormsSample/Axes/LabelsFormat/View.csWinForms 视图samples/WinFormsSample/Axes/LabelsFormat/Form1.cs从仓库结构看labelsFormat与其姊妹示例labelsFormat2samples/ViewModelsSamples/Axes/LabelsFormat2/ViewModel.cs共用同一套配置模式区别仅在于分类名称后者使用中文姓名说明该格式化能力与具体语言环境无关可直接复用到多语言业务场景。视图模型格式化逻辑与数据分离示例采用 MVVM 模式格式化逻辑全部封装在视图模型中便于测试与跨平台复用using System; namespace ViewModelsSamples.Axes.LabelsFormat; public class ViewModel { public double[] Values1 { get; set; } [426, 583, 104]; public double[] Values2 { get; set; } [200, 558, 458]; public string[] Labels { get; set; } [Sergio, Lando, Lewis]; public Funcdouble, string Labeler { get; set; } value value.ToString(C2); }这里演示了两个系列绑定到同一组横轴分类数据关键点如下Values1/Values2两组柱状系列数据分别对应不同销售人员的销售额绑定到XamlColumnSeries.ValuesLabels横轴分类名称集合与数据点的整数位置一一对应绑定到XamlAxis.LabelsLabeler一个Funcdouble, string委托把刻度数值格式化为C2货币、两位小数字符串绑定到纵轴XamlAxis.Labeler。C2是 .NET 标准数字格式说明符中的货币格式默认输出结果会带上当前线程CultureInfo的货币符号例如$426.00若要完全控制符号位置可以使用value.ToString(C2, culture)指定区域性。关于Labeler与Labels的职责分工官方文档 docs/cartesianChart/axes.md 有明确表述There are 2 ways to format and axis labels, using theLabelsproperty and using theLabelerproperty, you must normally use theLabelsproperty to indicate names, and theLabelerproperty to give format to the current label.视图层XAML 中如何接线格式化配置WPF 视图WPF 视图把上述视图模型作为DataContext通过绑定把数据与格式化配置注入图表lvc:CartesianChart lvc:CartesianChart.Series lvc:SeriesCollection lvc:XamlColumnSeries Values{Binding Values1}/ lvc:XamlColumnSeries Values{Binding Values2} Fill{x:Null}/ /lvc:SeriesCollection /lvc:CartesianChart.Series lvc:CartesianChart.XAxes lvc:AxesCollection lvc:XamlAxis AxisNameSalesman/woman Labels{Binding Labels}/ /lvc:AxesCollection /lvc:CartesianChart.XAxes lvc:CartesianChart.YAxes lvc:AxesCollection lvc:XamlAxis AxisNameSales NamePadding0,15 Labeler{Binding Labeler} LabelsPaint{lvc:SolidColorPaint Color#00f, FontFamilyTimes New Roman, FontWeightExtraBold, FontWidthNormal, FontSlantItalic}/ /lvc:AxesCollection /lvc:CartesianChart.YAxes /lvc:CartesianChart各属性在示例中的作用AxisNameSalesman/woman横轴名称显示在轴末端Labels{Binding Labels}横轴分类名称AxisNameSales与NamePadding0,15纵轴名称及其与轴的距离Labeler{Binding Labeler}纵轴刻度格式化委托LabelsPaint纵轴标签绘制笔刷此处用SolidColorPaint指定蓝色#00f、Times New Roman 字体、ExtraBold 字重、Normal 字宽、Italic 斜体——这是 LiveCharts2 中统一控制轴标签视觉样式的入口。从源码看NamePadding、LabelsPaint等均定义于 CoreAxis 中属于CoreAxis的可绑定属性XamlAxis由代码生成器generators/LiveChartsGenerators从这些核心类型派生因此在 XAML 中可直接书写。Avalonia 视图的差异Avalonia 版本的视图几乎相同仅有两处框架相关差异samples/AvaloniaSample/Axes/LabelsFormat/View.axaml 使用xmlns:lvcusing:LiveChartsCore.SkiaSharpView.Avalonia引入命名空间并把NamePadding写成NamePadding{lvc:Padding 0,15 }。Blazor 版本则使用 Razor 标记逻辑完全一致samples/BlazorSample/Pages/Axes/LabelsFormat/View.razor。Labels 与 Labeler两种标签定制方式的职责边界官方文档 Labels vs Labeler properties 将两种方式做了明确划分Labels命名标签IListstring集合。当其非null时轴的刻度文本将从该集合按整数索引取值——第 0 个数据点对应Labels[0]第 1 个数据点对应Labels[1]依此类推。若轴需要绘制超出集合边界的标签则回退为直接显示索引值默认值为null。Labeler格式化委托Funcdouble, string用于把刻度数值转换成任意字符串。它是“当前标签的格式化器”适合货币、百分比、科学计数等数值格式。两者的底层协作机制可以从 Labelers.BuildNamedLabeler 看出端倪当Labels非空时CoreAxis.GetActualLabeler 会优先用Labels构建命名标签器覆盖用户设置的Labeler而Labeler属性本身的默认值是Labelers.DefaultCoreAxis.cs。也就是说命名标签的优先级高于格式化委托两者分别服务于“分类名称”与“数值刻度”两种场景这正与示例中“横轴用 Labels、纵轴用 Labeler”的用法一一对应。从实现细节看BuildNamedLabeler对越界索引与null条目都做了防御索引小于 0 或超出集合长度时返回空字符串集合内条目为null时同样返回空字符串Labelers.cs。这一点与文档“越界时回退显示索引”的描述略有出入实际行为以源码为准即越界返回空字符串而非索引值。Labelers 静态工具类官方内置格式化器示例中的Labeler是手写的value value.ToString(C2)而 LiveCharts2 还提供了一组开箱即用的格式化器全部位于 Labelers 静态类中成员类型/签名说明DefaultFuncdouble, string默认标签器初始为Log10_6见下可用SetDefaultLabeler全局替换SixRepresentativeDigitsFuncdouble, string即Log10_6六位有效数字风格格式化CurrencyFuncdouble, string货币格式化器使用当前线程NumberFormatInfo.CurrentInfo.CurrencySymbolSetDefaultLabeler(labeler)void把Default替换为自定义委托FormatCurrency(value, thousands, decimals, symbol)string底层货币格式化实现支持 K/M/B/T 缩写的自定义版本BuildNamedLabeler(labels)Funcdouble, string用IListstring构建按索引取名的标签器内置货币格式化器的“缩写”行为官方文档对Labelers.Currency有专门说明docs/cartesianChart/axes.md#labels-vs-labeler-properties它比手写value.ToString(C)更聪明——当数值达到百万、十亿、万亿量级时会输出更短的标签。其实现逻辑在 FormatCurrency对value取以 10 为底的对数判断量级10^6 ≤ value 10^9除以10^6后缀M百万10^9 ≤ value 10^12除以10^9后缀B十亿10^12 ≤ value 10^15除以10^12后缀T万亿value ≥ 10^15除以10^15后缀Q千万亿。因此当销售总额高达数百万时Labelers.Currency会把1,234,567渲染成$1.23M之类的短标签避免轴标签拥挤。默认标签器的数字简化行为Default即Log10_6同样会对极大/极小值做缩写value ≥ 10^6时除以百万并追加M后缀value ≤ 10^-6时乘以百万并追加µ后缀其余情况保留六位小数Labelers.cs。这意味着即使你不配置任何格式化器LiveCharts2 也会自动把超大数值的轴标签压缩成易读形式。底层渲染链路标签如何被绘制到画布了解格式化配置的底层生效路径能帮助你判断什么场景该用哪个属性。从 CoreAxis 的源码可以还原出完整调用链标签器解析GetActualLabeler()判断Labels是否非空非空则用BuildNamedLabeler(Labels)覆盖用户Labeler否则使用Labeler属性CoreAxis.cs尺寸预算测量阶段通过GetPossibleMaxLabelSize()调用实际标签器估算所有可能刻度的最大文本尺寸用于轴布局CoreAxis.cs刻度生成绘制阶段对每个刻度位置调用TryGetLabelOrLogError(ctx.Labeler, i - 1d 1d)生成标签文本并把标签几何体加入LabelsPaint的绘制任务CoreAxis.cs更新与绘制数据变化时UpdateLabel会按相同标签器刷新文本最后通过canvas.AddDrawableTask(LabelsPaint, zone: CanvasZone.NoClip)提交到画布CoreAxis.cs。其中TryGetLabelOrLogError说明若格式化委托抛出异常LiveCharts2 会记录日志而不是让整个渲染流程崩溃这在自定义复杂Labeler时能显著提升健壮性。从测试角度看仓库测试中也有对标签与格式化行为的覆盖tests/CoreTests/OtherTests 与 tests/CoreTests/ChartTests 中的轴相关用例可作为深入验证行为时的参考入口。全局替换默认标签器如果你希望整个应用中所有轴的默认刻度格式统一无需逐个轴配置Labeler直接调用静态方法即可Labelers.SetDefaultLabeler(value value.ToString(N0));SetDefaultLabeler会修改Labelers.Default静态属性Labelers.cs而CoreAxis.Labeler的初始值正是Labelers.Default因此新创建的所有轴都会自动采用新格式。注意该设置是全局静态的会作用于之后创建的每个图表实例适合放在应用初始化阶段如App.xaml.cs或Program.cs执行。应用场景与注意事项业务分类标签当数据点是枚举类名称人名、月份、地区时优先使用Labels配合LabelsRotation如 45 度解决长名称拥挤问题参考 docs/cartesianChart/axes.md数值刻度美化金额用Labelers.Currency或自定义货币委托百分比用value ${value:P0}超大数值依赖默认Log10_6的M/µ缩写样式统一轴标签的字体、颜色、字重统一通过LabelsPaint配置跨框架 API 一致优先级规则Labels非空时优先于Labeler二者不要同时承担同一根轴的文本职责多语言labelsFormat2示例ViewModelsSamples/Axes/LabelsFormat2/ViewModel.cs使用中文姓名验证了该机制与语言无关分类名可直接来源于业务数据如数据库中的姓名列。小结通过 labelsFormat 示例本文完整梳理了 LiveCharts2 坐标轴标签格式化的两大入口Labels负责按索引映射分类名称Labeler类型为Funcdouble, string负责把刻度数值转换为任意文本同时介绍了Labelers工具类提供的Default、Currency、BuildNamedLabeler等内置格式化器及其M/B/T/Q缩写逻辑并深入 CoreAxis 源码还原了“标签器解析 → 尺寸预算 → 刻度生成 → 绘制任务提交”的完整链路。这套能力在 WPF、Avalonia、MAUI、WinForms、Blazor、Eto、Uno 等所有 .NET UI 框架中共享同一套 API 与实现真正做到“一处学会处处可用”。赞分享数据可视化图表库跨平台【免费下载链接】LiveCharts2Beautiful, interactive charts, maps, and gauges. One API for every .NET UI framework.项目地址https://gitcode.com/gh_mirrors/li/LiveCharts2点击查看免费下载相关推荐PHPExcel图表坐标轴设置刻度与标签自定义终极指南PHPExcel图表坐标轴设置刻度与标签自定义终极指南 想要创建专业级的Excel图表掌握PHPExcel图表坐标轴设置技巧是关键 本指南将带你深入了后端数据处理Chart.js坐标轴定制刻度、标签与网格线配置完整指南Chart.js坐标轴定制刻度、标签与网格线配置完整指南 Chart.js是一个功能强大的开源JavaScript图表库让开发者能够轻松创建美观的交互式图表图表库前端数据可视化Flet Charts ChartAxisLabel 详解为坐标轴指定刻度定制专属标签Flet Charts ChartAxisLabel 详解为坐标轴指定刻度定制专属标签 导读 本文围绕 Flet Charts flet charts 中前端跨平台桌面应用移动开发上一篇OpenSRE 调查流水线全解析六阶段 RCA 流程从源码到图解一次看懂下一篇LMCache-mindspore架构详解从原理到实践的完整指南创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考