WPF LineSeries 图表 - 具有不同样式的数据点

Question

我正在创建一个显示学生分数的 WPF/C# 图表（使用 Charting Toolkit）。 我正在寻找的是，如果标记低于 50，则 DataPoint 应该显示一个椭圆，而高于 50 它应该显示一个矩形。 目前，它显示所有值的矩形。

XAML 是：

<chartingToolkit:Chart Background="{x:Null}" Name="lineChart" Title="Students Result" 
                        VerticalAlignment="Top" Height="450" Width="550">
        <chartingToolkit:LineSeries Name="StudentMarks" Title="Student Marks" Background="Transparent"
                                            DependentValuePath="Value"
                                            IndependentValuePath="Key"
                                            ItemsSource="{Binding [0]}">

            <chartingToolkit:LineSeries.DataPointStyle>
                <Style TargetType="chartingToolkit:LineDataPoint">
                    <Setter Property="Background" Value="DarkBlue"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="chartingToolkit:LineDataPoint">
                                <Grid x:Name="grdDataPointRect">
                                    <Rectangle x:Name="passed" Fill="{TemplateBinding Background}" Stroke="Black"/>
                                    <Ellipse x:Name="failed" Width="5" Height="5" Stroke="Green" StrokeThickness="1"
                                     Fill="Green" Visibility="Hidden"></Ellipse>
                                </Grid>

                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>

                </Style>
            </chartingToolkit:LineSeries.DataPointStyle>
        </chartingToolkit:LineSeries>
        <chartingToolkit:Chart.Axes>

            <chartingToolkit:LinearAxis Name="xAxis" Orientation="X" ShowGridLines="True" 
                                Minimum="1" Maximum="5" Interval="1" Title="Students" />
            <chartingToolkit:LinearAxis Name="yAxis" Orientation="Y" ShowGridLines="True" 
                                Minimum="10" Maximum="100" Interval="10" Title="Marks" />
        </chartingToolkit:Chart.Axes>
    </chartingToolkit:Chart>

C#代码是：

       private void DrawGraph()
    {
        List<KeyValuePair<int, int>> Students1 = new List<KeyValuePair<int, int>>();
        List<KeyValuePair<int, int>> Students2 = new List<KeyValuePair<int, int>>();
        var dataSourceList = new List<List<KeyValuePair<int, int>>>();

        Students1.Add(new KeyValuePair<int, int>(1, 40));
        Students1.Add(new KeyValuePair<int, int>(2, 70));
        Students1.Add(new KeyValuePair<int, int>(3, 55));
        Students1.Add(new KeyValuePair<int, int>(4, 35));
        Students1.Add(new KeyValuePair<int, int>(5, 80));

        // if marks are less then 50
        // change datapointstyle to ellipse from rectangle

        dataSourceList.Add(Students1);
        lineChart.DataContext = dataSourceList;

    }

请指导。

Answer 1

如果图表设计正确，每个DataPoint中的DataContext应该是你为图表设置的List<KeyValuePair<int,int>>中的每个数据项。 因此，您可以使用转换器来确定数据项的标记是否低于 50。转换器只是检查输入标记并输出一个布尔值，例如学生通过的真正含义：

public class MarkToPassedConverter : IValueConverter {
   public object Convert(object value, Type targetType, object parameter, 
                         CultureInfo culture){
       var mark = (int) value;
       return mark >= 50;
   }
   public object ConvertBack(object value, Type targetType, object parameter, 
                             CultureInfo culture){
       throw new NotImplementedException();
   }
}

在 XAML 中将 Converter 声明为某个资源，假设它的命名空间在 XAML 中声明为 local：

<local:MarkToPassedConverter x:Key="m2p"/>

使用ControlTemplate's Trigger 切换2 个形状的Visibility，根据输入标记指示不同的状态：

<ControlTemplate TargetType="chartingToolkit:LineDataPoint">
     <Grid x:Name="grdDataPointRect">
         <Rectangle x:Name="passed" Fill="{TemplateBinding Background}" Stroke="Black" Visibility="Hidden"/>
         <Ellipse x:Name="failed" Width="5" Height="5" Stroke="Green" StrokeThickness="1"
                                 Fill="Green" Visibility="Visible"></Ellipse>
     </Grid>
     <ControlTemplate.Triggers>
         <DataTrigger Binding="{Binding Value, Converter={StaticResource m2p}}" Value="True">
             <Setter TargetName="passed" Property="Visibility" Value="Visible"/>
             <Setter TargetName="failed" Property="Visibility" Value="Hidden"/>
         </DataTrigger>             
     </ControlTemplate.Triggers>
</ControlTemplate>

注意passed的Visibility默认是隐藏的。