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。转换器只是检查输入标记并输出一个bool，例如当它真实意味着学生通过时：

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();
   }
}

将Converter声明为XAML中的某个资源，假设其命名空间在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>

请注意，Visibility的{{1}}默认隐藏。

WPF LineSeries图表 - 具有不同样式的DataPoints

1 个答案: