如何在 WPF 中为图表添加水平线（“目标线”）？答案

【问题标题】：How can I add a horizontal line ("goal line") for a chart in WPF?如何在 WPF 中为图表添加水平线（“目标线”）？
【发布时间】：2013-03-07 11:23:36
【问题描述】：

我正在使用 WPF 工具包 (http://www.codeproject.com/Articles/196502/WPF-Toolkit-Charting-Controls-Line-Bar-Area-Pie-Co) 创建折线图。

这就是我正在做的事情：

<Window x:Class="TempDataAnalyzer.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525" xmlns:chartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit" Loaded="Window_Loaded">
    <Grid>
         <chartingToolkit:Chart  Name="lineChart" Title="Temperature" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
            <chartingToolkit:LineSeries  DependentValuePath="Value" IndependentValuePath="Key" ItemsSource="{Binding}" IsSelectionEnabled="True"/>
         </chartingToolkit:Chart>
    </Grid>
</Window>

C#：

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
    }

    private void Window_Loaded(object sender, RoutedEventArgs e)
    {
        List<KeyValuePair<int, int>> entries = new List<KeyValuePair<int, int>>();
        entries.Add(new KeyValuePair<int, int>(0, 0));
        entries.Add(new KeyValuePair<int, int>(1, 23));
        entries.Add(new KeyValuePair<int, int>(2, 45));
        entries.Add(new KeyValuePair<int, int>(3, 46));
        entries.Add(new KeyValuePair<int, int>(4, 71));

        lineChart.DataContext = entries;
    }

}

我需要在指定的 Y 值处绘制一条“球门线”，例如在本例中为 35：

我怎样才能做到这一点？

【问题讨论】：

标签： c# .net wpf customization wpftoolkit

【解决方案1】：

我已经在一些项目中做过类似的事情。

我这样创建线：

<chartingToolkit:Chart Name="chart1" Title="Chart Title">
    <chartingToolkit:LineSeries DependentValuePath="Value" IndependentValuePath="Key" ItemsSource="{Binding}">
        <chartingToolkit:LineSeries.PolylineStyle>
            <Style TargetType="Polyline">
                <Setter Property="StrokeDashArray" Value="5 5 5" />
                <Setter Property="StrokeThickness" Value="2"/>
            </Style>
        </chartingToolkit:LineSeries.PolylineStyle>
        <chartingToolkit:LineSeries.DataPointStyle>
            <Style TargetType="{x:Type chartingToolkit:LineDataPoint}">
                <Setter Property="Background" Value="Red"/>
                <Setter Property="Template" Value="{x:Null}" />
            </Style>
        </chartingToolkit:LineSeries.DataPointStyle>
    </chartingToolkit:LineSeries>
</chartingToolkit:Chart>

我将它与 MVVM 模式一起使用，并将“LineSeries”与 ObservableCollection<KeyValuePair<string, int>> 绑定

【讨论】：

抱歉，我接受的有点太快了。您的答案设置了数据点的样式，删除了圆圈并添加了洋红色。看最后一张带有红线的截图。这就是我所追求的......保持数据点不变，不以任何方式修改数据并在设定点添加物理线（例如：Y = 35）
@@David ：我刚刚更新了我的答案。我认为现在它应该可以解决您的问题:-)

【解决方案2】：

使用这个：

<chartingToolkit:LineSeries.DataPointStyle>
    <Style TargetType="chartingToolkit:LineDataPoint">

        <!-- <Setter Property="Template" Value="{x:Null}"/> -->
        <Setter Property="Opacity" Value="0" />
        <Setter Property="Background" Value="Red"/>
        <Setter Property="BorderBrush" Value="Red"/>
        <Setter Property="Width" Value="2" />
        <Setter Property="Height"  Value="2" />
    </Style>
</chartingToolkit:LineSeries.DataPointStyle>
<chartingToolkit:LineSeries.PolylineStyle>
    <Style TargetType="Polyline">
        <Setter Property="Opacity" Value="1" />
        <Setter Property="StrokeThickness" Value="1"/>
        <Setter Property="Stroke" Value="Red" />
    </Style>
</chartingToolkit:LineSeries.PolylineStyle>

【讨论】：