用Telerik控件创建柱状图、折线图

  <telerik:RadCartesianChart  Grid.Row="1" Palette="Windows8" x:Name="rd" Margin="5">
            <telerik:RadCartesianChart.Behaviors>
                <telerik:ChartTooltipBehavior />
            </telerik:RadCartesianChart.Behaviors>
            <telerik:RadCartesianChart.TooltipTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Value}" Foreground="Black"
                               HorizontalAlignment="Center" Margin="0,-35,0,0" VerticalAlignment="Center"/>
                </DataTemplate>
            </telerik:RadCartesianChart.TooltipTemplate>       
            <telerik:RadCartesianChart.Series>
                <telerik:BarSeries ItemsSource="{Binding}"
                                   ValueBinding="Age"
                                   CategoryBinding="UserName">
                </telerik:BarSeries>
            </telerik:RadCartesianChart.Series>
            <telerik:RadCartesianChart.HorizontalAxis>
                <telerik:CategoricalAxis GapLength="0.8" />
            </telerik:RadCartesianChart.HorizontalAxis>
            <telerik:RadCartesianChart.VerticalAxis>
                <telerik:LinearAxis Minimum="0"  MajorStep="5"  />
            </telerik:RadCartesianChart.VerticalAxis>
        </telerik:RadCartesianChart>

 

柱状图的相关设置

1. 让纵坐标的值直接显示在柱状图上的设置：（添加红色部分的代码即可）
2. 添加鼠标悬浮的特效（鼠标悬浮在柱状图上，显示对应的柱状图的值）：   添加一个样式：

       <Style TargetType="telerik:BarSeries">
            <Setter Property="ShowLabels" Value="True" />
            <!--<Setter Property="LegendSettings" Value="{Binding UserName}" />-->
        </Style>
    </UserControl.Resources>

     3.设置柱状图中的柱子的宽度：（设置蓝色字体的部分即可）；

     4.设置纵坐标增长的幅度：（添加灰色字体的代码即可）

 折线图的相关设置

1.   让折线图直接显示数据：（对其添加一个样式）：<Style TargetType="telerik:LineSeries">
               <Setter Property="ShowLabels" Value="True" />
               </Style>
2. 让折线图的数据点突出显示：（给折线图添加一个点的模板）代码如下所示：

            <telerik:LineSeries.PointTemplate>
                        <DataTemplate>
                            <Ellipse Fill="{Binding ElementName=rd,Path=Palette.GlobalEntries[1].Fill}" Height="7" Width="7" Visibility="Visible"></Ellipse>
                        </DataTemplate>
                    </telerik:LineSeries.PointTemplate>

      3.让折线图当鼠标悬浮上面的时候显示：

       <telerik:RadCartesianChart.Behaviors>
                <telerik:ChartTooltipBehavior HorizontalOffset="-11" VerticalOffset="-50"/>
            </telerik:RadCartesianChart.Behaviors>
            <telerik:RadCartesianChart.TooltipTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Value}" Foreground="Black"
                               HorizontalAlignment="Center"  Margin="6,4,6,10"  VerticalAlignment="Center"/>
                </DataTemplate>
            </telerik:RadCartesianChart.TooltipTemplate>