数据可视化图表库跨平台【免费下载链接】LiveCharts2Beautiful, interactive charts, maps, and gauges. One API for every .NET UI framework.项目地址https://gitcode.com/gh_mirrors/li/LiveCharts2点击查看免费下载本篇指南聚焦 LiveCharts2 中ISeries接口的几个高频高级配置项绘制自定义数据类型Mappers、自定义点几何图形Custom Geometries、ZIndex 层叠顺序、IsVisible 可见性控制以及DataPadding 数据内边距。文中所有示例均来自当前仓库的 docs/shared/series2.md 及对应源码实现读完你可以直接在任意 .NET UI 框架WPF、Avalonia、MAUI、WinForms、Blazor 等的 LiveCharts2 图表中落地这些能力。一、绘制自定义类型让任何对象都能上图表LiveCharts2 的核心设计之一是你可以绘制任何类型的数据。Values属性的泛型参数可以是double、int等基础类型也可以是你自己的业务模型类。关键在于——当使用自定义类型时你必须让库知道如何把每个实例映射为图表上的一个坐标点。这就是 Mapper映射器机制详细说明见仓库中的 mappers 文章。1.1 库内置支持的类型根据 docs/overview/1.5.mappers.md 的说明LiveCharts2 开箱即支持以下类型数值类型short、int、long、float、double、decimal及其可空版本short?、int?等默认对象位于LiveChartsCore.DefaultsObservableValue、ObservablePoint同时指定 X、Y、WeightedPoint气泡图、DateTimePointX 为DateTime、TimeSpanPointX 为TimeSpan、ObservablePolarPoint极坐标图、FinancialPoint/FinancialPointIK 线图。1.2 通过Mapping属性注册系列级映射以官方文档中的City类为例假设我们要按城市人口画图City有自己的Name和Population属性此时必须在系列上指定Mappingpublic class City { public string Name { get; set; } public double Population { get; set; } } var citiesSeries new LineSeriesCity { Values new City[] { new City { Name Tokio, Population 9 }, new City { Name New York, Population 11 }, new City { Name Mexico City, Population 10 }, }, Mapping (city, index) { // 该函数会对 Values 中的每个实例调用一次 // 参数依次是实例本身city与它在集合中的索引 index // 返回值即该点在图表中的坐标 Coordinate。 // 这里用 index 作为 X 坐标Population 作为 Y 值。 return new Coordinate(index, city.Population); } };从源码看Mapping的签名定义在 ISeries.cs 中FuncTModel, int, Coordinate? Mapping { get; set; }它接收「模型实例 索引」返回LiveChartsCore.Kernel.Coordinate。对应的属性实现位于 Series.cs通过SetProperty触发属性变更通知从而让图表自动重绘。1.3 全局注册映射器Global Mapper如果你的应用里到处都在使用同一个自定义类型可以在应用启动时通过LiveCharts.Configure全局注册之后所有系列都会自动使用该映射// 这段代码应放在应用启动的位置 LiveCharts.Configure(config config.HasMapCity( (city, index) new Coordinate(index, city.Population)));需要注意两点docs/overview/1.5.mappers.md 明确说明全局映射器对每个类型唯一再次为同一类型注册会覆盖之前的映射系列级Mapping优先级更高只要系列显式设置了Mapping属性全局映射器就会被忽略。1.4 更高效的方案实现IChartEntity如果数据量很大官方文档建议直接在模型类上实现IChartEntity接口让每个实例自带Coordinate可以显著减少映射开销。核心做法是类实现INotifyPropertyChanged可用 CommunityToolkit.Mvvm 的ObservableObject简化并提供Coordinate与MetaData两个成员再在属性变更回调中更新缓存好的Coordinate。完整的逐步示例含TempSample从 JSON 反序列化到IChartEntity的演变过程见 docs/overview/1.5.mappers.md。二、自定义几何图形每个点都可以独一无二除了数据形状LiveCharts2 还允许你自定义每个数据点的几何图形Geometry。官方文档docs/shared/series2.md指出有三种途径使用 LiveCharts 内置几何、使用 SVG 路径几何、或使用 SkiaSharp API 自己绘制。完整示例见 docs/samples/lines/custom/template.md。2.1 使用内置 SVG 几何GeometrySvg属性LiveCharts2 在 SVGPoints.cs 中提供了一批即取即用的 SVG 路径常量包括Diamond菱形、Gem宝石、Star星形、Heart心形、Pin图钉、Square方形等。用法是把常量字符串赋给系列的GeometrySvg属性public string PinPath { get; set; } SVGPoints.Pin; new LineSeriesdouble { Values new double[] { 2, 1, 4, 2, 2, -5, -2 }, GeometrySvg PinPath // 每个点都渲染为图钉形状 }实际示例可参考 samples/ViewModelsSamples/Lines/Custom/ViewModel.cs其中PinPath SVGPoints.Pin。需要留意源码中的约束GeometrySvg要求系列的视觉对象TVisual实现IVariableSvgPath接口否则设置时会抛出异常。对应校验逻辑在 Series.cspublic string? GeometrySvg { get; set { _geometrySvgChanged true; SetProperty(ref field, value); if (!this.HasVariableSvgGeometry()) { throw new Exception( $You must use a geometry that implements {nameof(IVariableSvgPath)}, ${nameof(TVisual)} does not satisfies the constrait.); } } }2.2 使用 SkiaSharp 绘制自己的几何如果内置几何满足不了需求你还可以继承BoundedDrawnGeometry并实现IDrawnElementSkiaSharpDrawingContext在Draw方法里直接用 SkiaSharp API 作画。仓库中的官方示例 MyGeometry.cs 画了一个带对角线的方框using LiveChartsCore.Drawing; using LiveChartsCore.SkiaSharpView.Drawing; public class MyGeometry : BoundedDrawnGeometry, IDrawnElementSkiaSharpDrawingContext { public void Draw(SkiaSharpDrawingContext context) { var paint context.ActiveSkiaPaint; var canvas context.Canvas; canvas.DrawRect(X, Y, Width, Height, paint); canvas.DrawLine(X, Y, X Width, Y Height, paint); canvas.DrawLine(X Width, Y, X, Y Height, paint); } }context提供当前激活的画笔ActiveSkiaPaint和画布CanvasX、Y、Width、Height由基类BoundedDrawnGeometry根据点的位置与几何尺寸注入你只需关注「怎么画」。再把自定义几何类型作为系列泛型参数传入即可例如LineSeriesdouble, MyGeometry, LabelGeometry这类带三泛型参数的强类型系列。三、ZIndex控制系列的前后叠放顺序ZIndex属性定义见 ISeries.cs用于声明Z 轴方向上的顺序即决定多个系列叠加时谁在前、谁在后。数值越大系列越靠上层数值越小越靠底层。从源码看各系列的测量逻辑如 BarSeries.cs会做如下归一化处理var actualZIndex ZIndex 0 ? ((ISeries)this).SeriesId : ZIndex;也就是说当ZIndex为 0默认值时库会用系列自身的SeriesId系列在集合中的内部顺序作为实际层级当你显式设置非 0 的ZIndex时则以你的值为准。随后该值会叠加PaintConstants中的各类偏移量分别作用于填充、描边、数据标签等画笔参见 BarSeries.cs 与 CoreLineSeries.cs。一个典型的应用场景是在同一个CartesianChart里用折线图叠在柱状图之上只需给折线系列设置更大的ZIndexnew ISeries[] { new ColumnSeriesdouble { Values new double[] { 2, 5, 4, 2, 6 }, ZIndex 1 }, new LineSeriesdouble { Values new double[] { 3, 7, 2, 9, 4 }, ZIndex 2 } // 折线在柱状图之上 }从源码结构看CoreLineSeries.cs 对堆叠面积图stacked area与普通系列混排时的默认ZIndex还有专门处理用户显式设置的ZIndex永远优先未设置时库会参考SeriesId让后添加的系列排在前面。四、IsVisible控制系列是否显示IsVisible指示系列是否在用户界面中可见。它是IChartElement接口的成员Kernel/IChartElement.cs基类 ChartElement.cs 中的默认值为true。在绘图引擎层面可见性会被直接过滤。例如 CartesianChartEngine.cs 在收集要绘制的系列时Series.Where(static x x.IsVisible);同时CoreLineSeries.cs 还会根据IsVisible动态调整路径的透明度来实现平滑的显示/隐藏过渡strokePath.Opacity IsVisible ? 1 : 0; fillPath.Opacity IsVisible ? 1 : 0;用法很简单——把系列设置为IsVisible false即可隐藏设置为true重新显示图表会自动响应属性变更并重绘由于IsVisible走SetProperty通知机制。这与「从Series集合中删除再添加」不同隐藏系列会保留其数据和动画状态适合做动态显隐的数据对比场景。五、DataPadding控制数据到坐标轴边界的距离DataPadding是「数据内边距」即系列绘制区域边缘到坐标轴极限之间的最小距离。它是LvcPoint相当于System.Drawing.PointF类型两个分量X和Y的取值范围都是0 到 10表示没有任何内边距数据紧贴轴边缘1表示一个「轴刻度axis tick」的距离——即每两个标签或分隔线之间的间距即使标签/分隔线不可见这个刻度单元依然存在。5.1 未设置时的系列默认值官方文档强调如果未显式设置库会根据系列类型自动给出默认值。这一点在源码中可以得到充分印证构造函数中直接赋值DataPadding系列类型默认 DataPadding源码位置LineSeries(0.5f, 1f)CoreLineSeries.csStepLineSeries(0.5f, 1f)CoreStepLineSeries.csRangeLineSeries(0.5f, 1f)CoreRangeLineSeries.csScatterSeries(1, 1)CoreScatterSeries.csColumnSeries纵向柱(0, 1)VerticalBarSeries.csRowSeries横向条(1, 0)HorizontalBarSeries.csBoxSeries(0, 1)CoreBoxSeries.csHeatSeries(0, 0)CoreHeatSeries.csPolarLineSeries(1f, 1.5f)CorePolarLineSeries.cs基类兜底(0.5f, 0.5f)Series.cs这些默认值的直觉是线类系列给 X 轴留半个刻度、Y 轴留一个刻度让线的两端不顶到轴边界柱状系列在刻度方向留一个刻度给柱宽而在柱子延伸方向留 0。HeatSeries则完全不留边距使热力格贴满绘图区。5.2 它在底层如何起作用DataPadding最终会进入坐标轴边界bounds的计算。核心实现在 CartesianSeries.cs 的GetBounds方法中var tickPrimary primaryAxis.GetTick(chart.ControlSize, rawBaseBounds.VisiblePrimaryBounds); var tickSecondary secondaryAxis.GetTick(chart.ControlSize, rawBaseBounds.VisibleSecondaryBounds); var ts tickSecondary.Value * DataPadding.X; // X 轴方向的内边距 刻度值 × DataPadding.X var tp tickPrimary.Value * DataPadding.Y; // Y 轴方向的内边距 刻度值 × DataPadding.Y得到的ts/tp被写入DimensionalBounds的PaddingMax/PaddingMin最终影响轴的缩放范围——这也解释了为什么DataPadding的单位是「刻度」它本质上是在轴的可见边界上按刻度宽度追加一段空白。5.3 三个官方示例缩小、单轴去除、放大内边距官方文档docs/shared/series2.md用同一组数据演示了三种配置效果。示例一去掉全部内边距(0, 0)new LineSeriesdouble { DataPadding new LvcPoint(0, 0), Values new ObservableCollectiondouble { 2, 1, 3, 5, 3, 4, 6 }, GeometryStroke null, GeometryFill null, Fill null }效果折线两端直接延伸到绘图区边缘贴近左右两侧的坐标轴示例二只去除 X 轴方向的内边距(0.5f, 0)new LineSeriesdouble { DataPadding new LvcPoint(0.5f, 0), Values new ObservableCollectiondouble { 2, 1, 3, 5, 3, 4, 6 }, GeometryStroke null, GeometryFill null, Fill null }效果X 方向保留半个刻度首尾点不会顶死边框Y 方向完全不留空白数据在垂直方向上占满绘图区示例三放大内边距(2, 2)new LineSeriesdouble { DataPadding new LvcPoint(2, 2), Values new ObservableCollectiondouble { 2, 1, 3, 5, 3, 4, 6 }, GeometryStroke null, GeometryFill null, Fill null }效果X、Y 两个方向各留 2 个刻度的空白整个折线在图表中「缩小」并居中注意DataPadding的分量可以大于 1——它只是刻度数的倍数不是上限。六、与其他系列属性的协作series2.md描述的几个属性不是孤立的它们与系列的其他能力天然配合Name与ValuesName用于工具提示与图例中的系列名未设置时库自动命名为 Series 1、Series 2……Values接受任何IEnumerableT配合ObservableCollectionT或实现INotifyPropertyChanged的模型如ObservableValue可实现数据变更后的自动更新与动画过渡。详见同目录的 series.md。IsVisibleAtLegend与IsVisible不同它只控制系列是否出现在图例中默认true见 Series.cs适合「隐藏系列但仍想在图例保留名称」的场景。Pivot与堆叠系列ZIndex只决定叠放顺序与Pivot值方向的分界线默认 0互不影响可放心组合使用。总结本文围绕 docs/shared/series2.md 系统梳理了 LiveCharts2 系列的五个高级配置维度绘制自定义类型系列级Mapping或全局LiveCharts.Configure(...).HasMapT(...)大数据量优先实现IChartEntity自定义几何内置SVGPoints常量、GeometrySvg属性受IVariableSvgPath约束或用 SkiaSharp 自绘BoundedDrawnGeometryZIndex非 0 值时以显式值为准默认回退到SeriesId控制系列前后叠放IsVisible继承自IChartElement为false时系列被过滤不绘制且线系列会以透明度动画过渡DataPaddingLvcPoint(X, Y)单位是轴刻度0~1 起算可大于 1不同系列类型有各自默认值底层通过GetBounds写入轴的边界 padding。这些属性在 WPF、Avalonia、MAUI、WinForms、WinUI、Blazor、Uno 等所有 LiveCharts2 支持的框架上 API 完全一致示例代码可直接套用。赞分享数据可视化图表库跨平台【免费下载链接】LiveCharts2Beautiful, interactive charts, maps, and gauges. One API for every .NET UI framework.项目地址https://gitcode.com/gh_mirrors/li/LiveCharts2点击查看免费下载相关推荐LiveCharts2 自定义类型映射与IChartEntity接口详解LiveCharts2 自定义类型映射与IChartEntity接口详解 概述 在数据可视化开发中我们经常需要将自定义的数据类型绘制到图表中。LiveChar数据可视化图表库跨平台Lightweight Charts 系列类型Series Types完整指南内置图表类型、配置项与自定义系列扩展Lightweight Charts 系列类型Series Types完整指南内置图表类型、配置项与自定义系列扩展 本文是 Lightweight Cha前端图表库金融科技数据可视化Jspreadsheet 列类型Column Types完全指南内置类型、高级配置与自定义编辑器开发Jspreadsheet 列类型Column Types完全指南内置类型、高级配置与自定义编辑器开发 Jspreadsheet 是一个轻量级的 JavaS前端UI组件上一篇sebastian/comparator 组件深度解析Laravel 示例项目中的 PHP 值相等性比较架构与实践下一篇BurpSuiteCN-Release日志排查与调试工作流如何发现未翻译内容并贡献翻译创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考