用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>