数据可视化图表库跨平台【免费下载链接】LiveCharts2Beautiful, interactive charts, maps, and gauges. One API for every .NET UI framework.项目地址https://gitcode.com/gh_mirrors/li/LiveCharts2点击查看免费下载本指南聚焦 LiveCharts2 中基于PieChart构建的角度仪表盘Angular Gauge深入讲解如何通过继承NeedleGeometry定制指针外观既可以用ScaleTransform缩放默认指针也可以完全覆盖Draw()方法、借助 SkiaSharp 从零绘制自定义形状如矩形指针。读完本文你将掌握NeedleVisualTNeedle泛型视觉元素的接入方式、Value绑定与动画更新机制并理解指针旋转定位在源码层面的实现原理。角度仪表盘与指针从示例谈起在 LiveCharts2 中仪表盘并不是独立的图表类型而是用饼图引擎PieChart渲染出来的。官方样例Pies/AngularGauge注册于 samples/ViewModelsSamples/Index.cs展示了完整的角度仪表盘三段弧形刻度60 / 30 / 10、一个可随Value旋转的指针以及围绕弧线的刻度线与数字标签。整个示例由三部分构成视图模型ViewModel承载仪表盘数值图表配置Series VisualElements定义弧形区段、指针与刻度自定义指针类SmallNeedle/CustomNeedle负责指针的具体外观。仓库中以 Avalonia 平台为例的实现位于 samples/AvaloniaSample/Pies/AngularGauge/View.axaml其核心配置如下lvc:PieChart InitialRotation-225 MaxAngle270 MinValue0 MaxValue100 lvc:PieChart.Series lvc:XamlAngularGaugeSeries GaugeValue60 OuterRadiusOffset130 MaxRadialColumnWidth20 CornerRadius0/ lvc:XamlAngularGaugeSeries GaugeValue30 OuterRadiusOffset130 MaxRadialColumnWidth20 CornerRadius0/ lvc:XamlAngularGaugeSeries GaugeValue10 OuterRadiusOffset130 MaxRadialColumnWidth20 CornerRadius0/ /lvc:PieChart.Series lvc:PieChart.VisualElements lvc:XamlNeedle Width20 Value{Binding Value}/ lvc:XamlAngularTicks LabelsSize16 LabelsOuterOffset15 OuterOffset65 TicksLength20/ /lvc:PieChart.VisualElements /lvc:PieChart关键参数一览参数示例取值作用InitialRotation-225仪表盘起始角度决定弧线从哪里开始MaxAngle270仪表盘张开的总角度270° 即 3/4 圆MinValue/MaxValue0/100仪表盘数值映射范围指针位置据此计算GaugeValue60/30/10每个弧形区段对应的值区段长度按比例分配OuterRadiusOffset130弧形区段相对饼图外径的偏移MaxRadialColumnWidth20弧形区段的最大径向宽度即弧的粗细Width指针20指针的宽度Value指针绑定Value指针当前指向的值驱动旋转角度从代码构建仪表盘GaugeGenerator 与 GaugeItem不使用 XAML 时同样可以用 C# 代码构建仪表盘。GaugeGenerator位于 src/skiasharp/LiveChartsCore.SkiaSharp/Extensions/GaugeGenerator.cs它提供两个静态方法BuildSolidGauge(params GaugeItem[])生成实心仪表盘系列BuildAngularGaugeSections(params GaugeItem[])生成角度仪表盘的弧形区段系列本例所用。两者都返回PieSeriesObservableValue[]可直接赋给饼图的Series。GaugeItem是仪表盘上的一个元素其构造函数接收两个参数valuedouble类型与builder委托后者用于像配置普通饼图系列一样定制颜色、标签大小等属性。此外还有特殊值GaugeItem.Background用它作为value会生成一个位于数值区段后面的背景系列充当仪表盘的底色详见 docs/piechart/gauges.md。快照测试 tests/SnapshotTests/AngularGaugeTests.cs 给出了代码构建的完整范本private static SKPieChart BuildGauge() new() { Width 600, Height 600, Background SKColors.White, Series GaugeGenerator.BuildAngularGaugeSections( new GaugeItem(60, s SetStyle(130, 20, s)), new GaugeItem(30, s SetStyle(130, 20, s)), new GaugeItem(10, s SetStyle(130, 20, s))), VisualElements [ new AngularTicksVisual { Labeler value value.ToString(N1, CultureInfo.InvariantCulture), LabelsSize 16, LabelsOuterOffset 15, OuterOffset 65, TicksLength 20 }, new NeedleVisual { Value 45 } ], InitialRotation -225, MaxAngle 270, MinValue 0, MaxValue 100, };其中SetStyle通过OuterRadiusOffset与MaxRadialColumnWidth控制每个区段的偏移和粗细。从源码可以看到若传入的GaugeItem中没有背景元素BuildAngularGaugeSections会自动追加一个GaugeItem(GaugeItem.Background)在 Angular 模式下背景系列还会被设置为IsHoverable false、HoverPushout 0并移除数据标签保证它只作为静态背景存在。默认指针 NeedleGeometry 的绘制原理自定义指针前先理解默认指针长什么样。NeedleGeometry定义于 src/skiasharp/LiveChartsCore.SkiaSharp/Drawing/Geometries/NeedleGeometry.cs它继承自BaseNeedleGeometry并实现了IDrawnElementSkiaSharpDrawingContext。BaseNeedleGeometry见 src/LiveChartsCore/Drawing/BaseNeedleGeometry.cs提供了两个关键的可运动属性Radius指针长度方向的半径Width指针的宽度。其Measure()返回new LvcSize(Width, Radius)即指针占据的尺寸由宽度与半径共同决定。默认Draw()的绘制逻辑非常直观先用SKPath画一个以(X, Y)为顶点、底部半径为Y Radius的等腰三角形再在顶点处补一个半径为Width / 2f的圆形成经典的针尖 尾圆指针造型public virtual void Draw(SkiaSharpDrawingContext context) { var paint context.ActiveSkiaPaint; var w Width / 2f; using var path new SKPath(); path.MoveTo(X, Y Radius); path.LineTo(X - w, Y); path.LineTo(X w, Y); path.Close(); context.Canvas.DrawPath(path, paint); context.Canvas.DrawCircle(X, Y, w, paint); }注意Draw()被声明为virtual这正是我们自定义指针的切入点既可以覆写它改变绘制内容也可以不覆写而仅调整几何变换来改变默认指针的形态。自定义指针方式一用 ScaleTransform 缩放默认指针最轻量的定制方式是继承NeedleGeometry在构造函数里设置ScaleTransform。官方示例的SmallNeedle类见 samples/ViewModelsSamples/Pies/AngularGauge/SmallNeedle.cs就是如此using LiveChartsCore.SkiaSharpView.Drawing.Geometries; namespace ViewModelsSamples.Pies.AngularGauge; public class SmallNeedle : NeedleGeometry { public SmallNeedle() { ScaleTransform new(0.6f, 0.6f); } }这里把ScaleTransform的 X、Y 分量都设为0.6即在两个轴向上将指针缩放为原来的 60%——相比默认指针缩小了 40%。由于缩放是几何变换指针的旋转中心TransformOrigin等属性仍然保留姿态和动画行为与默认指针一致。自定义指针方式二覆写 Draw() 用 SkiaSharp 自由绘制如果缩放满足不了需求可以完全覆写Draw()方法用 SkiaSharp 绘制任意形状。官方示例的CustomNeedle类见 samples/ViewModelsSamples/Pies/AngularGauge/CustomNeedle.cs用DrawRect画了一个矩形指针using LiveChartsCore.SkiaSharpView.Drawing; using LiveChartsCore.SkiaSharpView.Drawing.Geometries; namespace ViewModelsSamples.Pies.AngularGauge; public class CustomNeedle : NeedleGeometry { public override void Draw(SkiaSharpDrawingContext context) { var paint context.ActiveSkiaPaint; context.Canvas.DrawRect(X - Width * 0.5f, Y, Width, Radius, paint); } }这段代码中context.ActiveSkiaPaint是当前生效的画笔包含颜色、粗细等直接传给绘制调用即可保持与仪表盘主题一致X、Y、Width、Radius是NeedleGeometry基类提供的定位与尺寸信息X - Width * 0.5f让矩形以X为中心水平居中Y作为矩形的起点Width为宽、Radius为高于是矩形从指针旋转中心向下延伸旋转后看起来就像一块指向刻度盘的面板。绘制结果如下图所示——仪表盘弧线、刻度与矩形指针同框呈现::: tipDraw()里可以画任何 SkiaSharp 支持的内容路径、圆形、文本、渐变等。如果你需要更复杂的造型可以阅读默认 NeedleGeometry 源码 作为参照再结合 SkiaSharp 官方指南自由发挥。 :::接入仪表盘NeedleVisual 泛型指针定义好自定义指针类后还需要让它真正出现在仪表盘上。LiveCharts2 用视觉元素Visual Element承载指针NeedleVisual定义于 src/skiasharp/LiveChartsCore.SkiaSharp/VisualElements/NeedleVisual.cspublic class NeedleVisual : NeedleVisualNeedleGeometry { } public class NeedleVisualTNeedle : BaseNeedleVisualTNeedle, LabelGeometry where TNeedle : NeedleGeometry, new() { }它有两个重载非泛型的NeedleVisual直接使用默认的NeedleGeometry泛型的NeedleVisualTNeedle接受任何NeedleGeometry子类约束where TNeedle : NeedleGeometry, new()保证能通过无参构造函数实例化。因此官方示例把视图模型中的指针属性声明为NeedleVisualSmallNeedle或NeedleVisualCustomNeedlepublic partial class ViewModel { // ... public NeedleVisualSmallNeedle Needle { get; set; } public ViewModel() { Needle new NeedleVisualSmallNeedle { Value 45 }; // ... } // ... }换成矩形指针时只需把泛型参数改为CustomNeedlepublic NeedleVisualCustomNeedle Needle { get; set; } public ViewModel() { Needle new NeedleVisualCustomNeedle { Value 45 }; // ... }运行应用后指针便会以你自定义的形态出现在仪表盘上。指针旋转定位的底层实现自定义指针之所以能指到正确刻度是因为BaseNeedleVisual在测量阶段负责了定位与旋转。关键逻辑位于 src/LiveChartsCore/VisualElements/BaseNeedleVisual.cs 的Measure()方法宿主校验指针只能添加到饼图中若添加到其他图表会抛出异常The needle visual can only be added to a pie chart几何定位以绘图区中心(cx, cy)作为指针原点Radius取绘图区最小边长的45%Width取指针的Width属性角度计算var p (Value - startValue) / (endValue - startValue); // -90 to match the pie start angle _geometry.RotateTransform (float)(initialRotation p * completeAngle - 90);即先把Value按MinValue/MaxValue归一化为比例p再映射到仪表盘的起始角InitialRotation与总张角MaxAngle之间最后统一减去90°与饼图的起始角度对齐 4.平移与画笔Translate属性作为额外的平移偏移Fill画笔则直接赋给几何体完成着色。此外BaseNeedleVisual的构造函数会把ZIndex设置为PaintConstants.NeedleFillZIndex确保指针绘制在弧形区段之上、饼图数据标签之下若用户显式设置ZIndex则以用户的设置为准。让仪表盘动起来Value 绑定与随机更新指针的角度随Value变化而 LiveCharts2 的动画系统会让这个变化平滑过渡。视图模型 samples/ViewModelsSamples/Pies/AngularGauge/ViewModel.cs 使用 CommunityToolkit.Mvvm 的源生成器实现属性与命令public partial class ViewModel : ObservableObject { private readonly Random _random new(); [ObservableProperty] public partial double Value { get; set; } 45; public Funcdouble, string Labeler { get; set; } value value.ToString(N1); [RelayCommand] public void DoRandomChange() Value _random.Next(0, 100); }Value初始为45正好落在 0–100 的中间位置DoRandomChangeCommand每次触发都把Value随机设为 0–99 之间的数在 View.axaml 中一个Change value按钮绑定该命令而指针的Value则通过{Binding Value}绑定到同一属性。点击按钮指针就会在动画的驱动下平滑摆向新数值——这正是开头动图展示的效果。配套视觉元素AngularTicksVisual 刻度仪表盘弧线外圈还有刻度线与数字标签它们由AngularTicksVisual提供见 src/skiasharp/LiveChartsCore.SkiaSharp/VisualElements/AngularTicksVisual.cs 与基类 src/LiveChartsCore/VisualElements/BaseAngularTicksVisual.cs。常用属性包括属性默认值作用OuterOffset0图表边缘到弧线与刻度线的距离LabelsOuterOffset0图表边缘到数字标签的距离TicksLength0主刻度线长度子刻度线为其一半LabelsSize12标签字号LabelerLabelers.Default数字转标签文本的函数例如value value.ToString(N1)从基类源码看每个主刻度间隔内还会生成 5 条子刻度SubSections 5且落在MinValue之外的刻度与标签会被设置Opacity 0隐藏。刻度视觉元素同样只能用于饼图其ZIndex默认取PaintConstants.AngularTicksStrokeZIndex位于饼图区段之上。完整示例文件索引将上述内容串起来可对照仓库中的这些文件完整运行与调试视图模型samples/ViewModelsSamples/Pies/AngularGauge/ViewModel.cs缩放指针samples/ViewModelsSamples/Pies/AngularGauge/SmallNeedle.cs矩形指针samples/ViewModelsSamples/Pies/AngularGauge/CustomNeedle.csAvalonia 视图XAMLsamples/AvaloniaSample/Pies/AngularGauge/View.axaml指针视觉元素src/skiasharp/LiveChartsCore.SkiaSharp/VisualElements/NeedleVisual.cs指针几何体src/skiasharp/LiveChartsCore.SkiaSharp/Drawing/Geometries/NeedleGeometry.cs仪表盘生成器src/skiasharp/LiveChartsCore.SkiaSharp/Extensions/GaugeGenerator.cs快照测试验证指针与刻度渲染tests/SnapshotTests/AngularGaugeTests.cs其中快照测试同时覆盖了Value 45与Value 0指针落在量程边缘两种场景后者还验证了刻度透明度规则——超出MinValue范围的刻度会被隐藏可作为你实现自定义仪表盘时的行为参考。赞分享数据可视化图表库跨平台【免费下载链接】LiveCharts2Beautiful, interactive charts, maps, and gauges. One API for every .NET UI framework.项目地址https://gitcode.com/gh_mirrors/li/LiveCharts2点击查看免费下载相关推荐LiveCharts2 仪表盘Gauge实战指南用 PieChart 与 GaugeGenerator 构建实心/角度仪表LiveCharts2 仪表盘Gauge实战指南用 PieChart 与 GaugeGenerator 构建实心/角度仪表 LiveCharts2 没有单数据可视化图表库跨平台ECharts 仪表盘组件开发Gauge 自定义指针与刻度ECharts 仪表盘组件开发Gauge 自定义指针与刻度 仪表盘Gauge是数据可视化中常用的组件特别适合展示进度、指标等单值数据。ECharts 提数据可视化图表库前端F2 仪表盘Gauge组件实战指南角度、刻度与进度展示全解析F2 仪表盘Gauge组件实战指南角度、刻度与进度展示全解析 F2 antv/f2 是蚂蚁集团开源的一款专为移动端设计的优雅、交互式、灵活的图表库数据可视化前端创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考