You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

在VB.NET(WPF)的LiveCharts中为GColumnSeries添加误差棒

在VB.NET WPF的LiveCharts Geared柱状图中添加误差棒

LiveCharts Geared的GColumnSeries本身没有内置误差棒支持,不过可以通过叠加额外系列的方式模拟实现,步骤如下:

1. 定义带误差数据的模型

首先创建包含主值、误差上下限(或标准差)的数据类:

Public Class ColumnErrorData
    Public Property Value As Double
    Public Property LowerError As Double ' 最小值或 Value - 标准差
    Public Property UpperError As Double ' 最大值或 Value + 标准差
    Public Property Category As String
End Class

2. ViewModel中构建数据与系列

在ViewModel里分别初始化柱状图系列和误差棒所需的线条、端点系列:

Public Class ChartViewModel
    ' 主柱状图系列
    Public Property Columns As New LiveCharts.Geared.GColumnSeries(Of Double)()
    ' 存储所有误差棒相关系列
    Public Property ErrorElements As New LiveCharts.SeriesCollection()
    ' X轴分类标签
    Public Property Categories As String()

    Public Sub New()
        ' 模拟业务数据
        Dim rawData = New List(Of ColumnErrorData) From {
            New ColumnErrorData With {.Value = 22, .LowerError = 17, .UpperError = 26, .Category = "Q1"},
            New ColumnErrorData With {.Value = 31, .LowerError = 24, .UpperError = 35, .Category = "Q2"},
            New ColumnErrorData With {.Value = 27, .LowerError = 20, .UpperError = 30, .Category = "Q3"},
            New ColumnErrorData With {.Value = 19, .LowerError = 14, .UpperError = 23, .Category = "Q4"}
        }

        ' 绑定柱状图数据
        Columns.Values = rawData.Select(Function(d) d.Value).AsGearedValues().WithQuality(Quality.High)
        Columns.Fill = Brushes.DodgerBlue
        Columns.Title = "季度销售额"

        ' 生成误差棒元素
        For i = 0 To rawData.Count - 1
            Dim currentData = rawData(i)
            Dim xPos = i ' 对应柱子的X轴位置

            ' 1. 垂直误差线:用LineSeries连接上下误差点
            Dim errorLine = New LiveCharts.LineSeries With {
                .Values = New LiveCharts.DefaultValues From {
                    New KeyValuePair(Of Double, Double)(xPos, currentData.LowerError),
                    New KeyValuePair(Of Double, Double)(xPos, currentData.UpperError)
                },
                .Stroke = Brushes.Black,
                .StrokeThickness = 1,
                .PointGeometry = Nothing ' 隐藏线上的默认点
            }

            ' 2. 误差线上端点:用ScatterSeries画小横线
            Dim topCap = New LiveCharts.ScatterSeries With {
                .Values = New LiveCharts.DefaultValues From {
                    New KeyValuePair(Of Double, Double)(xPos, currentData.UpperError)
                },
                .Fill = Brushes.Black,
                .Stroke = Brushes.Black,
                .PointGeometry = New LiveCharts.Geometries.RectangleGeometry With {.Width = 10, .Height = 1}
            }

            ' 3. 误差线下端点
            Dim bottomCap = New LiveCharts.ScatterSeries With {
                .Values = New LiveCharts.DefaultValues From {
                    New KeyValuePair(Of Double, Double)(xPos, currentData.LowerError)
                },
                .Fill = Brushes.Black,
                .Stroke = Brushes.Black,
                .PointGeometry = New LiveCharts.Geometries.RectangleGeometry With {.Width = 10, .Height = 1}
            }

            ErrorElements.Add(errorLine)
            ErrorElements.Add(topCap)
            ErrorElements.Add(bottomCap)
        Next

        ' 设置X轴标签
        Categories = rawData.Select(Function(d) d.Category).ToArray()
    End Sub
End Class

3. XAML中绑定系列

将主柱状图系列和误差棒系列放在同一个CartesianChart中:

<Window x:Class="WpfChartDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
        xmlns:lvcg="clr-namespace:LiveCharts.Geared;assembly=LiveCharts.Geared"
        xmlns:local="clr-namespace:WpfChartDemo"
        Title="带误差棒的柱状图" Height="450" Width="800">
    <Window.DataContext>
        <local:ChartViewModel/>
    </Window.DataContext>
    <Grid>
        <lvc:CartesianChart>
            <lvc:CartesianChart.Series>
                <!-- 主柱状图 -->
                <lvcg:GColumnSeries Values="{Binding Columns.Values}" 
                                    Title="{Binding Columns.Title}"
                                    Fill="{Binding Columns.Fill}"/>
                <!-- 误差棒元素 -->
                <lvc:SeriesCollection ItemsSource="{Binding ErrorElements}"/>
            </lvc:CartesianChart.Series>
            <lvc:CartesianChart.AxisX>
                <lvc:Axis Labels="{Binding Categories}" FontSize="12"/>
            </lvc:CartesianChart.AxisX>
            <lvc:CartesianChart.AxisY>
                <lvc:Axis Title="销售额(万元)" MinValue="10"/>
            </lvc:CartesianChart.AxisY>
        </lvc:CartesianChart>
    </Grid>
</Window>

关键调整点

  • 如果用标准差计算误差,只需将LowerError设为Value - 标准差,UpperError设为Value + 标准差即可。
  • 可以自定义误差线的颜色、粗细,端点的形状(比如用CircleGeometry替换RectangleGeometry实现圆点端点)。
  • 确保误差棒的X坐标和柱状图的X索引完全对应,避免偏移。

内容的提问来源于stack exchange,提问作者krambambuli

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.12 20:12:53