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