zoukankan      html  css  js  c++  java
  • 用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>

      

     

  • 相关阅读:
    String类的intern()方法,随常量池发生的变化
    JDK8的JVM内存结构,元空间替代永久代成为方法区及常量池的变化
    wait()、notify()方法原理,以及使用注意事项--丢失唤醒、虚假唤醒
    消费者、生产者Java代码示例,wait-notify实现
    volatile、Synchronized实现变量可见性的原理,volatile使用注意事项
    CAS及其ABA问题
    JUC包Lock机制的支持--AQS
    JUC包实现的同步机制,原理以及简单用法总结
    Synchronized机制下偏向锁、轻量级锁、重量级锁的适用场景
    临时表循环插入
  • 原文地址:https://www.cnblogs.com/erpNet/p/4046234.html
Copyright © 2011-2022 走看看