指南：用 PieChart 與 GaugeGenerator 構(gòu)建實心/角度儀表)
數(shù)據(jù)可視化圖表庫跨平臺【免費下載鏈接】LiveCharts2Beautiful, interactive charts, maps, and gauges. One API for every .NET UI framework.項目地址https://gitcode.com/gh_mirrors/li/LiveCharts2點擊查看免費下載LiveCharts2 沒有單獨的儀表盤控件而是讓PieChart同時承載餅圖、環(huán)形圖與儀表盤三種形態(tài)其中儀表盤由GaugeGenerator輔助類基于GaugeItem自動生成PieSeriesObservableValue系列集合。本文將以 docs/piechart/gauges.md 為骨架結(jié)合倉庫源碼與示例講解GaugeItem的 value/builder 兩個核心參數(shù)、GaugeItem.Background背景系列機制、BuildSolidGauge與BuildAngularGaugeSections兩種構(gòu)建方式以及InitialRotation、MaxAngle、MinValue/MaxValue等配套屬性。讀完本文你將能夠在任意 .NET UI 框架WPF、Avalonia、WinForms、MAUI、Blazor、Uno 等中用同一套代碼快速搭建實心儀表、多段儀表、動態(tài)儀表和帶指針刻度的角度儀表。儀表盤的定位PieChart 的第三種形態(tài)在 LiveCharts2 中儀表盤并非獨立圖表類型而是PieChart控件在特定配置下的渲染結(jié)果。其架構(gòu)可概括為三層控件層PieChart提供InitialRotation、MaxAngle、MinValue、MaxValue、LegendPosition等圖表級屬性輔助層GaugeGenerator靜態(tài)類根據(jù)傳入的GaugeItem列表生成一組帶儀表盤語義的PieSeriesObservableValue系列層每個GaugeItem對應(yīng)一個扇形/環(huán)形分段最終由PieChartEngine統(tǒng)一完成測量與繪制。文檔明確指出you can also create gauges with thePieChartcontrol從源碼看GaugeGenerator生成的就是可被普通餅圖畫布直接渲染的餅圖系列見 GaugeGenerator.cs它reuses all the power and functionality of thePieChartEngineclass因此儀表盤天然繼承了餅圖的動畫、主題、數(shù)據(jù)標簽、圖例與懸停等全部能力。GaugeItem儀表盤的構(gòu)建單元GaugeItem是描述儀表盤中一個元素的載體位于 GaugeItem.cs繼承自泛型基類BaseGaugeItemPieSeriesObservableValue。其構(gòu)造函數(shù)接收兩個參數(shù)參數(shù)類型說明valuedouble或ObservableValue該分段在儀表盤上的數(shù)值builderActionPieSeriesObservableValue?委托用于配置該數(shù)值對應(yīng)的系列可設(shè)置顏色、數(shù)據(jù)標簽大小以及普通餅圖系列pieseries.md支持的一切屬性value參數(shù)有兩種重載直接傳double或傳ObservableValue。后者的價值在于動態(tài)更新——ObservableValue實現(xiàn)了值變更通知修改其Value后圖表會自動重繪并播放過渡動畫詳見下文的 Gauge5 示例。builder參數(shù)是可選的默認為null但它是儀表盤定制的核心入口。在委托內(nèi)你可以像操作普通PieSeriesObservableValue一樣設(shè)置Fill顏色、Stroke、DataLabelsSize、DataLabelsPosition、DataLabelsFormatter、InnerRadius、RelativeInnerRadius、RelativeOuterRadius、MaxRadialColumnWidth、Name圖例名稱等屬性。實心儀表盤BuildSolidGaugeGaugeGenerator.BuildSolidGauge(params GaugeItem[] items)是構(gòu)建實心儀表盤Solid Gauge即環(huán)形/半環(huán)形儀表的入口源碼見 GaugeGenerator.cs。單值儀表最小示例最簡單的情形是只傳入一個GaugeItem。倉庫示例 Gauge1/View.cs 展示了完整用法pieChart new PieChart { Series GaugeGenerator.BuildSolidGauge( new GaugeItem( 30, // the gauge value series // the series style { series.MaxRadialColumnWidth 50; series.DataLabelsSize 50; })), InitialRotation -90, MinValue 0, MaxValue 100, ... };這里value 30表示當前讀數(shù)MinValue 0、MaxValue 100劃定量程InitialRotation -90讓儀表從頂部12 點方向開始繪制MaxRadialColumnWidth 50限制環(huán)的徑向厚度DataLabelsSize 50放大中心讀數(shù)。WPF/XAML 場景下有對應(yīng)的XamlGaugeSeries聲明式寫法見 Gauge1/View.xaml。多值儀表堆疊分段傳入多個GaugeItem時各分段會在同一環(huán)上按值占比依次排布形成分段式儀表。例如 Gauge4/View.cs 用三個數(shù)值 50 / 80 / 95 構(gòu)建了三段儀表并分別為每段命名Series GaugeGenerator.BuildSolidGauge( new GaugeItem(50, series SetStyle(Vanessa, series)), new GaugeItem(80, series SetStyle(Charles, series)), new GaugeItem(95, series SetStyle(Ana, series)), new GaugeItem(GaugeItem.Background, series series.Fill null)), InitialRotation -90, MaxAngle 350, MinValue 0, MaxValue 100, public static void SetStyle(string name, PieSeriesObservableValue series) { series.Name name; series.DataLabelsSize 20; series.DataLabelsPosition PolarLabelsPosition.End; series.DataLabelsFormatter point point.Coordinate.PrimaryValue.ToString(); series.InnerRadius 20; series.MaxRadialColumnWidth 5; }注意這里每個分段的InnerRadius 20、MaxRadialColumnWidth 5保持徑向厚度一致多段疊加后自然形成并列的同心環(huán)帶DataLabelsPosition PolarLabelsPosition.End把數(shù)值標簽放在環(huán)帶末端。MaxAngle 350則讓儀表留出 10° 的缺口而非畫滿整圈。多值儀表盤效果可參考 gauge4/result.png。動態(tài)儀表ObservableValue 驅(qū)動如果希望儀表讀數(shù)實時變化應(yīng)使用ObservableValue重載并持有其引用之后修改值即可觸發(fā)自動重繪。示例 Gauge5/View.cs 的核心邏輯var observableValue1 new ObservableValue { Value 50 }; var observableValue2 new ObservableValue { Value 80 }; pieChart new PieChart { Series GaugeGenerator.BuildSolidGauge( new GaugeItem(observableValue1, series { series.Name North; series.DataLabelsPosition PolarLabelsPosition.Start; }), new GaugeItem(observableValue2, series { series.Name South; series.DataLabelsPosition PolarLabelsPosition.Start; })), InitialRotation -90, MaxAngle 270, MinValue 0, MaxValue 100, LegendPosition LegendPosition.Bottom }; // 點擊按鈕后更新讀數(shù)圖表自動動畫過渡 observableValue1.Value _random.Next(0, 100); observableValue2.Value _random.Next(0, 100);這段代碼還展示了儀表盤與圖例的配合為每個GaugeItem設(shè)置series.Name后LegendPosition LegendPosition.Bottom即可顯示圖例。背景系列GaugeItem.Background 的機制儀表盤通常需要一段底色來襯托當前讀數(shù)。文檔指出將GaugeItem.Background作為value傳入GaugeItem會生成一個位于所有儀表分段之后的系列充當圖表的背景。從源碼看GaugeItem.Background是定義在 BaseGaugeItem.cs 上的常量double.MaxValue構(gòu)造函數(shù)檢測到該值時會把IsFillSeriesBuilder置為true從而在GaugeGenerator.Build中被路由到背景系列GaugeGenerator.cs。生成的背景系列具有這些特征ZIndex -1始終墊底IsFillSeries true標記為填充系列IsVisibleAtLegend false不出現(xiàn)在圖例中Values填充items.Length - 1個零值用于撐起完整的背景環(huán)。示例 Gauge2/View.cs 演示了背景系列的標準用法Series GaugeGenerator.BuildSolidGauge( new GaugeItem(30, series { series.Fill new SolidColorPaint(SKColors.YellowGreen); series.DataLabelsSize 50; series.DataLabelsPaint new SolidColorPaint(SKColors.Red); series.DataLabelsPosition PolarLabelsPosition.ChartCenter; series.InnerRadius 75; }), new GaugeItem(GaugeItem.Background, series { series.InnerRadius 75; series.Fill new SolidColorPaint(new SKColor(100, 181, 246, 90)); // 半透明藍 })), InitialRotation -225, MaxAngle 270, MinValue 0, MaxValue 100,這里前景段與背景段都設(shè)置InnerRadius 75保證兩者徑向?qū)R背景用帶透明度的SKColor(100, 181, 246, 90)填充形成淺色軌道。若不需要背景如 Gauge4 中令series.Fill null也能得到純環(huán)效果。完整效果見 gauge2/result.png。另一個細節(jié)GaugeGenerator.BuildSolidGauge在入?yún)⒅袥]有顯式傳入背景項時會自動補一個默認背景GaugeGenerator.cs這與文檔中there is a special value to customize the background series的表述一致——不傳GaugeItem.Background也能渲染儀表但傳入后才能自定義背景樣式。角度儀表盤BuildAngularGaugeSections除實心儀表外GaugeGenerator還提供BuildAngularGaugeSections(params GaugeItem[] items)用于構(gòu)建角度儀表Angular Gauge即扇形刻度儀表源碼見 GaugeGenerator.cs。角度儀表與實心儀表在系列構(gòu)造上的差異體現(xiàn)在PieChartExtensions.AsSeries內(nèi)部PieChartExtensions.csSolid 模式每個系列的Values中填充count - 1個占位null/default元素再把真實值插入到與分段序號一致的位置從而讓多個分段共享同一圓環(huán)Angular 模式每個系列只含自身一個值且額外設(shè)置HoverPushout 0、IsHoverable false、DataLabelsPaint null、AnimationsSpeed 0并開啟IsRelativeToMinValue true——分段從MinValue起算而不是從 0 起算這是角度儀表刻度語義的關(guān)鍵。角度儀表通常還要疊加指針Needle與刻度Ticks兩個視覺元素。示例 AngularGauge/View.cs 與對應(yīng)的 Blazor 版本 View.razor 完整演示了這套組合var sectionsOuter 130; var sectionsWidth 20; var needle new NeedleVisual { Value 45 }; pieChart new PieChart { Series GaugeGenerator.BuildAngularGaugeSections( new GaugeItem(60, s SetStyle(sectionsOuter, sectionsWidth, s)), new GaugeItem(30, s SetStyle(sectionsOuter, sectionsWidth, s)), new GaugeItem(10, s SetStyle(sectionsOuter, sectionsWidth, s))), VisualElements [ new AngularTicksVisual { Labeler value value.ToString(N1), LabelsSize 16, LabelsOuterOffset 15, OuterOffset 65, TicksLength 20 }, needle ], InitialRotation -225, MaxAngle 270, MinValue 0, MaxValue 100 }; private static void SetStyle( double sectionsOuter, double sectionsWidth, PieSeriesObservableValue series) { series.OuterRadiusOffset sectionsOuter; series.MaxRadialColumnWidth sectionsWidth; series.CornerRadius 0; }三個GaugeItem60 / 30 / 10定義三段刻度區(qū)段OuterRadiusOffset 130控制區(qū)段離外緣的距離MaxRadialColumnWidth 20控制區(qū)段厚度CornerRadius 0關(guān)閉圓角以獲得規(guī)整的刻度條AngularTicksVisual負責刻度線與刻度標簽Labeler可自定義標簽格式如N1保留一位小數(shù)TicksLength控制主刻度線長度NeedleVisual是指針修改其Value即可驅(qū)動指針旋轉(zhuǎn)例如點擊按鈕后needle.Value _random.Next(0, 100)。動態(tài)效果可參考 angularGauge/result.gif。配套屬性InitialRotation、MaxAngle 與量程儀表盤的形態(tài)控制依賴PieChart的三個圖表級屬性其語義在 docs/piechart/overview.md 中有詳細圖解屬性默認值作用儀表盤常用值InitialRotation0第一段繪制的起始角度度-90頂部起始、-225左下起始、45等MaxAngle360整個圖表覆蓋的角度度270四分之三圓、350留缺口MinValue/MaxValue—量程下限 / 上限儀表場景通常設(shè)為0/100例如InitialRotation -225MaxAngle 270組合出左下開口的標準 270° 儀表Gauge2、AngularGauge 示例InitialRotation 45MaxAngle 270則生成右下開口的形態(tài)Gauge3/View.cs。這些屬性變更會被 LiveCharts2 的動畫系統(tǒng)自動補間過渡。此外GaugeItem的RelativeInnerRadius/RelativeOuterRadius相對半徑隨控件尺寸縮放與InnerRadius像素半徑配合可讓分段在環(huán)帶上錯落分層例如 Gauge/ViewModel.cs 中的多段儀表。源碼級驗證測試與 XAML 等價實現(xiàn)倉庫為儀表盤提供了可驗證的實現(xiàn)證據(jù)快照測試tests/SnapshotTests/AngularGaugeTests.cs 用BuildAngularGaugeSectionsAngularTicksVisualNeedleVisual構(gòu)建 600×600 的SKPieChart斷言渲染結(jié)果與基線快照一致其中AngularGaugeAtMinValue用例還專門驗證了MinValue邊界下刻度透明度規(guī)則XAML 聲明式等價物在 XAML 框架WPF/Avalonia/WinUI 等中GaugeGenerator的產(chǎn)物對應(yīng)XamlGaugeSeries、XamlGaugeBackgroundSeries、XamlAngularGaugeSeries三個封裝類src/skiasharp/_Shared.Xaml/Series.cs。其中XamlGaugeSeries通過GaugeValue依賴屬性綁定到內(nèi)部ObservableValue值變更經(jīng)OnGaugeValueChanged自動同步背景系列復用同一套SetupBackgroundGaugeSeries邏輯。因此 Gauge1/View.xaml 可以用純 XAML 等價實現(xiàn)lvc:PieChart InitialRotation-90 MinValue0 MaxValue100 lvc:PieChart.Series lvc:SeriesCollection lvc:XamlGaugeSeries GaugeValue{Binding Value} DataLabelsSize50 MaxRadialColumnWidth50/ !-- The background series is used to style the gauge background. -- lvc:XamlGaugeBackgroundSeries/ /lvc:SeriesCollection /lvc:PieChart.Series /lvc:PieChart小結(jié)LiveCharts2 的儀表盤能力可歸納為一條主線GaugeGenerator構(gòu)建→GaugeItem元素定義→PieSeriesObservableValue渲染。BuildSolidGauge負責環(huán)形分段式實心儀表BuildAngularGaugeSections負責帶指針/刻度的角度儀表二者都可通過GaugeItem.Background定制背景軌道通過 value/builder 雙參數(shù)完成數(shù)值綁定與樣式定制ObservableValue重載則讓儀表支持運行時動態(tài)更新。所有能力復用了PieChartEngine的渲染管線因此動畫、主題、圖例與跨框架一致性均由 LiveCharts2 統(tǒng)一保證。贊分享數(shù)據(jù)可視化圖表庫跨平臺【免費下載鏈接】LiveCharts2Beautiful, interactive charts, maps, and gauges. One API for every .NET UI framework.項目地址https://gitcode.com/gh_mirrors/li/LiveCharts2點擊查看免費下載相關(guān)推薦Plotly.py 儀表盤Gauge Charts實戰(zhàn)指南用 Indicator 構(gòu)建徑向儀表盤與 KPI 看板Plotly.py 儀表盤Gauge Charts實戰(zhàn)指南用 Indicator 構(gòu)建徑向儀表盤與 KPI 看板 儀表盤Gauge Chart又稱 s數(shù)據(jù)可視化數(shù)據(jù)分析Windows 11界面太陌生5分鐘教你用ExplorerPatcher恢復經(jīng)典Windows 10體驗Windows 11界面太陌生5分鐘教你用ExplorerPatcher恢復經(jīng)典Windows 10體驗 還在為Windows 11的全新界面感到不適應(yīng)嗎每桌面應(yīng)用系統(tǒng)編程F2 儀表盤Gauge組件實戰(zhàn)指南角度、刻度與進度展示全解析F2 儀表盤Gauge組件實戰(zhàn)指南角度、刻度與進度展示全解析 F2 antv/f2 是螞蟻集團開源的一款專為移動端設(shè)計的優(yōu)雅、交互式、靈活的圖表庫數(shù)據(jù)可視化前端上一篇Claude Coder 成功案例分享從咖啡店網(wǎng)站到企業(yè)級應(yīng)用的完整實現(xiàn)下一篇10個alifd/next常見問題解決方案開發(fā)中的坑與填坑指南創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考 LiveCharts2 儀表盤（Gauge）實戰(zhàn)指南：用 PieChart 與 GaugeGenerator 構(gòu)建實心/角度儀表
數(shù)據(jù)可視化圖表庫跨平臺【免費下載鏈接】LiveCharts2Beautiful, interactive charts, maps, and gauges. One API for every .NET UI framework.項目地址https://gitcode.com/gh_mirrors/li/LiveCharts2點擊查看免費下載LiveCharts2 沒有單獨的儀表盤控件而是讓PieChart同時承載餅圖、環(huán)形圖與儀表盤三種形態(tài)其中儀表盤由GaugeGenerator輔助類基于GaugeItem自動生成PieSeriesObservableValue系列集合。本文將以 docs/piechart/gauges.md 為骨架結(jié)合倉庫源碼與示例講解GaugeItem的 value/builder 兩個核心參數(shù)、GaugeItem.Background背景系列機制、BuildSolidGauge與BuildAngularGaugeSections兩種構(gòu)建方式以及InitialRotation、MaxAngle、MinValue/MaxValue等配套屬性。讀完本文你將能夠在任意 .NET UI 框架WPF、Avalonia、WinForms、MAUI、Blazor、Uno 等中用同一套代碼快速搭建實心儀表、多段儀表、動態(tài)儀表和帶指針刻度的角度儀表。儀表盤的定位PieChart 的第三種形態(tài)在 LiveCharts2 中儀表盤并非獨立圖表類型而是PieChart控件在特定配置下的渲染結(jié)果。其架構(gòu)可概括為三層控件層PieChart提供InitialRotation、MaxAngle、MinValue、MaxValue、LegendPosition等圖表級屬性輔助層GaugeGenerator靜態(tài)類根據(jù)傳入的GaugeItem列表生成一組帶儀表盤語義的PieSeriesObservableValue系列層每個GaugeItem對應(yīng)一個扇形/環(huán)形分段最終由PieChartEngine統(tǒng)一完成測量與繪制。文檔明確指出you can also create gauges with thePieChartcontrol從源碼看GaugeGenerator生成的就是可被普通餅圖畫布直接渲染的餅圖系列見 GaugeGenerator.cs它reuses all the power and functionality of thePieChartEngineclass因此儀表盤天然繼承了餅圖的動畫、主題、數(shù)據(jù)標簽、圖例與懸停等全部能力。GaugeItem儀表盤的構(gòu)建單元GaugeItem是描述儀表盤中一個元素的載體位于 GaugeItem.cs繼承自泛型基類BaseGaugeItemPieSeriesObservableValue。其構(gòu)造函數(shù)接收兩個參數(shù)參數(shù)類型說明valuedouble或ObservableValue該分段在儀表盤上的數(shù)值builderActionPieSeriesObservableValue?委托用于配置該數(shù)值對應(yīng)的系列可設(shè)置顏色、數(shù)據(jù)標簽大小以及普通餅圖系列pieseries.md支持的一切屬性value參數(shù)有兩種重載直接傳double或傳ObservableValue。后者的價值在于動態(tài)更新——ObservableValue實現(xiàn)了值變更通知修改其Value后圖表會自動重繪并播放過渡動畫詳見下文的 Gauge5 示例。builder參數(shù)是可選的默認為null但它是儀表盤定制的核心入口。在委托內(nèi)你可以像操作普通PieSeriesObservableValue一樣設(shè)置Fill顏色、Stroke、DataLabelsSize、DataLabelsPosition、DataLabelsFormatter、InnerRadius、RelativeInnerRadius、RelativeOuterRadius、MaxRadialColumnWidth、Name圖例名稱等屬性。實心儀表盤BuildSolidGaugeGaugeGenerator.BuildSolidGauge(params GaugeItem[] items)是構(gòu)建實心儀表盤Solid Gauge即環(huán)形/半環(huán)形儀表的入口源碼見 GaugeGenerator.cs。單值儀表最小示例最簡單的情形是只傳入一個GaugeItem。倉庫示例 Gauge1/View.cs 展示了完整用法pieChart new PieChart { Series GaugeGenerator.BuildSolidGauge( new GaugeItem( 30, // the gauge value series // the series style { series.MaxRadialColumnWidth 50; series.DataLabelsSize 50; })), InitialRotation -90, MinValue 0, MaxValue 100, ... };這里value 30表示當前讀數(shù)MinValue 0、MaxValue 100劃定量程InitialRotation -90讓儀表從頂部12 點方向開始繪制MaxRadialColumnWidth 50限制環(huán)的徑向厚度DataLabelsSize 50放大中心讀數(shù)。WPF/XAML 場景下有對應(yīng)的XamlGaugeSeries聲明式寫法見 Gauge1/View.xaml。多值儀表堆疊分段傳入多個GaugeItem時各分段會在同一環(huán)上按值占比依次排布形成分段式儀表。例如 Gauge4/View.cs 用三個數(shù)值 50 / 80 / 95 構(gòu)建了三段儀表并分別為每段命名Series GaugeGenerator.BuildSolidGauge( new GaugeItem(50, series SetStyle(Vanessa, series)), new GaugeItem(80, series SetStyle(Charles, series)), new GaugeItem(95, series SetStyle(Ana, series)), new GaugeItem(GaugeItem.Background, series series.Fill null)), InitialRotation -90, MaxAngle 350, MinValue 0, MaxValue 100, public static void SetStyle(string name, PieSeriesObservableValue series) { series.Name name; series.DataLabelsSize 20; series.DataLabelsPosition PolarLabelsPosition.End; series.DataLabelsFormatter point point.Coordinate.PrimaryValue.ToString(); series.InnerRadius 20; series.MaxRadialColumnWidth 5; }注意這里每個分段的InnerRadius 20、MaxRadialColumnWidth 5保持徑向厚度一致多段疊加后自然形成并列的同心環(huán)帶DataLabelsPosition PolarLabelsPosition.End把數(shù)值標簽放在環(huán)帶末端。MaxAngle 350則讓儀表留出 10° 的缺口而非畫滿整圈。多值儀表盤效果可參考 gauge4/result.png。動態(tài)儀表ObservableValue 驅(qū)動如果希望儀表讀數(shù)實時變化應(yīng)使用ObservableValue重載并持有其引用之后修改值即可觸發(fā)自動重繪。示例 Gauge5/View.cs 的核心邏輯var observableValue1 new ObservableValue { Value 50 }; var observableValue2 new ObservableValue { Value 80 }; pieChart new PieChart { Series GaugeGenerator.BuildSolidGauge( new GaugeItem(observableValue1, series { series.Name North; series.DataLabelsPosition PolarLabelsPosition.Start; }), new GaugeItem(observableValue2, series { series.Name South; series.DataLabelsPosition PolarLabelsPosition.Start; })), InitialRotation -90, MaxAngle 270, MinValue 0, MaxValue 100, LegendPosition LegendPosition.Bottom }; // 點擊按鈕后更新讀數(shù)圖表自動動畫過渡 observableValue1.Value _random.Next(0, 100); observableValue2.Value _random.Next(0, 100);這段代碼還展示了儀表盤與圖例的配合為每個GaugeItem設(shè)置series.Name后LegendPosition LegendPosition.Bottom即可顯示圖例。背景系列GaugeItem.Background 的機制儀表盤通常需要一段底色來襯托當前讀數(shù)。文檔指出將GaugeItem.Background作為value傳入GaugeItem會生成一個位于所有儀表分段之后的系列充當圖表的背景。從源碼看GaugeItem.Background是定義在 BaseGaugeItem.cs 上的常量double.MaxValue構(gòu)造函數(shù)檢測到該值時會把IsFillSeriesBuilder置為true從而在GaugeGenerator.Build中被路由到背景系列GaugeGenerator.cs。生成的背景系列具有這些特征ZIndex -1始終墊底IsFillSeries true標記為填充系列IsVisibleAtLegend false不出現(xiàn)在圖例中Values填充items.Length - 1個零值用于撐起完整的背景環(huán)。示例 Gauge2/View.cs 演示了背景系列的標準用法Series GaugeGenerator.BuildSolidGauge( new GaugeItem(30, series { series.Fill new SolidColorPaint(SKColors.YellowGreen); series.DataLabelsSize 50; series.DataLabelsPaint new SolidColorPaint(SKColors.Red); series.DataLabelsPosition PolarLabelsPosition.ChartCenter; series.InnerRadius 75; }), new GaugeItem(GaugeItem.Background, series { series.InnerRadius 75; series.Fill new SolidColorPaint(new SKColor(100, 181, 246, 90)); // 半透明藍 })), InitialRotation -225, MaxAngle 270, MinValue 0, MaxValue 100,這里前景段與背景段都設(shè)置InnerRadius 75保證兩者徑向?qū)R背景用帶透明度的SKColor(100, 181, 246, 90)填充形成淺色軌道。若不需要背景如 Gauge4 中令series.Fill null也能得到純環(huán)效果。完整效果見 gauge2/result.png。另一個細節(jié)GaugeGenerator.BuildSolidGauge在入?yún)⒅袥]有顯式傳入背景項時會自動補一個默認背景GaugeGenerator.cs這與文檔中there is a special value to customize the background series的表述一致——不傳GaugeItem.Background也能渲染儀表但傳入后才能自定義背景樣式。角度儀表盤BuildAngularGaugeSections除實心儀表外GaugeGenerator還提供BuildAngularGaugeSections(params GaugeItem[] items)用于構(gòu)建角度儀表Angular Gauge即扇形刻度儀表源碼見 GaugeGenerator.cs。角度儀表與實心儀表在系列構(gòu)造上的差異體現(xiàn)在PieChartExtensions.AsSeries內(nèi)部PieChartExtensions.csSolid 模式每個系列的Values中填充count - 1個占位null/default元素再把真實值插入到與分段序號一致的位置從而讓多個分段共享同一圓環(huán)Angular 模式每個系列只含自身一個值且額外設(shè)置HoverPushout 0、IsHoverable false、DataLabelsPaint null、AnimationsSpeed 0并開啟IsRelativeToMinValue true——分段從MinValue起算而不是從 0 起算這是角度儀表刻度語義的關(guān)鍵。角度儀表通常還要疊加指針Needle與刻度Ticks兩個視覺元素。示例 AngularGauge/View.cs 與對應(yīng)的 Blazor 版本 View.razor 完整演示了這套組合var sectionsOuter 130; var sectionsWidth 20; var needle new NeedleVisual { Value 45 }; pieChart new PieChart { Series GaugeGenerator.BuildAngularGaugeSections( new GaugeItem(60, s SetStyle(sectionsOuter, sectionsWidth, s)), new GaugeItem(30, s SetStyle(sectionsOuter, sectionsWidth, s)), new GaugeItem(10, s SetStyle(sectionsOuter, sectionsWidth, s))), VisualElements [ new AngularTicksVisual { Labeler value value.ToString(N1), LabelsSize 16, LabelsOuterOffset 15, OuterOffset 65, TicksLength 20 }, needle ], InitialRotation -225, MaxAngle 270, MinValue 0, MaxValue 100 }; private static void SetStyle( double sectionsOuter, double sectionsWidth, PieSeriesObservableValue series) { series.OuterRadiusOffset sectionsOuter; series.MaxRadialColumnWidth sectionsWidth; series.CornerRadius 0; }三個GaugeItem60 / 30 / 10定義三段刻度區(qū)段OuterRadiusOffset 130控制區(qū)段離外緣的距離MaxRadialColumnWidth 20控制區(qū)段厚度CornerRadius 0關(guān)閉圓角以獲得規(guī)整的刻度條AngularTicksVisual負責刻度線與刻度標簽Labeler可自定義標簽格式如N1保留一位小數(shù)TicksLength控制主刻度線長度NeedleVisual是指針修改其Value即可驅(qū)動指針旋轉(zhuǎn)例如點擊按鈕后needle.Value _random.Next(0, 100)。動態(tài)效果可參考 angularGauge/result.gif。配套屬性InitialRotation、MaxAngle 與量程儀表盤的形態(tài)控制依賴PieChart的三個圖表級屬性其語義在 docs/piechart/overview.md 中有詳細圖解屬性默認值作用儀表盤常用值InitialRotation0第一段繪制的起始角度度-90頂部起始、-225左下起始、45等MaxAngle360整個圖表覆蓋的角度度270四分之三圓、350留缺口MinValue/MaxValue—量程下限 / 上限儀表場景通常設(shè)為0/100例如InitialRotation -225MaxAngle 270組合出左下開口的標準 270° 儀表Gauge2、AngularGauge 示例InitialRotation 45MaxAngle 270則生成右下開口的形態(tài)Gauge3/View.cs。這些屬性變更會被 LiveCharts2 的動畫系統(tǒng)自動補間過渡。此外GaugeItem的RelativeInnerRadius/RelativeOuterRadius相對半徑隨控件尺寸縮放與InnerRadius像素半徑配合可讓分段在環(huán)帶上錯落分層例如 Gauge/ViewModel.cs 中的多段儀表。源碼級驗證測試與 XAML 等價實現(xiàn)倉庫為儀表盤提供了可驗證的實現(xiàn)證據(jù)快照測試tests/SnapshotTests/AngularGaugeTests.cs 用BuildAngularGaugeSectionsAngularTicksVisualNeedleVisual構(gòu)建 600×600 的SKPieChart斷言渲染結(jié)果與基線快照一致其中AngularGaugeAtMinValue用例還專門驗證了MinValue邊界下刻度透明度規(guī)則XAML 聲明式等價物在 XAML 框架WPF/Avalonia/WinUI 等中GaugeGenerator的產(chǎn)物對應(yīng)XamlGaugeSeries、XamlGaugeBackgroundSeries、XamlAngularGaugeSeries三個封裝類src/skiasharp/_Shared.Xaml/Series.cs。其中XamlGaugeSeries通過GaugeValue依賴屬性綁定到內(nèi)部ObservableValue值變更經(jīng)OnGaugeValueChanged自動同步背景系列復用同一套SetupBackgroundGaugeSeries邏輯。因此 Gauge1/View.xaml 可以用純 XAML 等價實現(xiàn)lvc:PieChart InitialRotation-90 MinValue0 MaxValue100 lvc:PieChart.Series lvc:SeriesCollection lvc:XamlGaugeSeries GaugeValue{Binding Value} DataLabelsSize50 MaxRadialColumnWidth50/ !-- The background series is used to style the gauge background. -- lvc:XamlGaugeBackgroundSeries/ /lvc:SeriesCollection /lvc:PieChart.Series /lvc:PieChart小結(jié)LiveCharts2 的儀表盤能力可歸納為一條主線GaugeGenerator構(gòu)建→GaugeItem元素定義→PieSeriesObservableValue渲染。BuildSolidGauge負責環(huán)形分段式實心儀表BuildAngularGaugeSections負責帶指針/刻度的角度儀表二者都可通過GaugeItem.Background定制背景軌道通過 value/builder 雙參數(shù)完成數(shù)值綁定與樣式定制ObservableValue重載則讓儀表支持運行時動態(tài)更新。所有能力復用了PieChartEngine的渲染管線因此動畫、主題、圖例與跨框架一致性均由 LiveCharts2 統(tǒng)一保證。贊分享數(shù)據(jù)可視化圖表庫跨平臺【免費下載鏈接】LiveCharts2Beautiful, interactive charts, maps, and gauges. One API for every .NET UI framework.項目地址https://gitcode.com/gh_mirrors/li/LiveCharts2點擊查看免費下載相關(guān)推薦Plotly.py 儀表盤Gauge Charts實戰(zhàn)指南用 Indicator 構(gòu)建徑向儀表盤與 KPI 看板Plotly.py 儀表盤Gauge Charts實戰(zhàn)指南用 Indicator 構(gòu)建徑向儀表盤與 KPI 看板 儀表盤Gauge Chart又稱 s數(shù)據(jù)可視化數(shù)據(jù)分析Windows 11界面太陌生5分鐘教你用ExplorerPatcher恢復經(jīng)典Windows 10體驗Windows 11界面太陌生5分鐘教你用ExplorerPatcher恢復經(jīng)典Windows 10體驗 還在為Windows 11的全新界面感到不適應(yīng)嗎每桌面應(yīng)用系統(tǒng)編程F2 儀表盤Gauge組件實戰(zhàn)指南角度、刻度與進度展示全解析F2 儀表盤Gauge組件實戰(zhàn)指南角度、刻度與進度展示全解析 F2 antv/f2 是螞蟻集團開源的一款專為移動端設(shè)計的優(yōu)雅、交互式、靈活的圖表庫數(shù)據(jù)可視化前端上一篇Claude Coder 成功案例分享從咖啡店網(wǎng)站到企業(yè)級應(yīng)用的完整實現(xiàn)下一篇10個alifd/next常見問題解決方案開發(fā)中的坑與填坑指南創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考