Chart FX for WPF图表控件如何简化图表（二）-控件新闻-慧都网

Chart FX for WPF图表控件如何简化图表（二）

原创|使用教程|编辑：郝浩|2013-03-07 16:19:21.000|阅读 762 次

概述：在上一篇文章《Chart FX for WPF图表控件如何简化图表（一）》中实现了图表的简化，节省了大量的控件。在本次的文章中，我们将会增加新的功能到已经简化了的图表上。

相关链接：

在上一篇文章《Chart FX for WPF图表控件如何简化图表（一）》中实现了图表的简化，节省了大量的控件。在本次的文章中，我们将会增加新的功能到已经简化了的图表上。图表中所绘制的范围上有一个最大和最小值，如果想要在背景上绘制一个浅灰色的矩形，这个矩形使用这个最大值和最小值范围，并且和原来的图表进行重叠，这样的话，如果图表上有任何的值超出了范围，就可以很直观的看见。

要实现上面的效果，现在有2个关键的问题，首先为了最小化空间，Y轴是不可见的，但是如果想要使用轴部分来展示这个范围，必须确保轴是可见的，但是要求没有任何的标签或是网格线。XAML需要隐藏网格和标签，像下面这样：

<cfx:Chart.AxisY>
  <cfx:Axis Separation="0">
    <cfx:Axis.Labels>
      <cfx:AxisLabelAttributes Visibility="Collapsed"/>
    </cfx:Axis.Labels>
    <cfx:Axis.Grids>
      <cfx:Grids>
        <cfx:Grids.Major>
          <cfx:GridLine Visibility="Collapsed" TickMark="None"/>
        </cfx:Grids.Major>
        <cfx:Grids.Minor>
          <cfx:GridLine Visibility="Collapsed" TickMark="None"/>
        </cfx:Grids.Minor>
      </cfx:Grids>
    </cfx:Axis.Grids>
  </cfx:Axis>
</cfx:Chart.AxisY>

想要直观的隐藏网格线和标签，设置Separation为0 ，是最小化轴空间的关键。现在要创建一个轴部分，将设置每个产品的最小和最大之间的范围，所以会假设数据层类ProductInfo有2个额外的属性，分别为MinDownloads和MaxDownloads。

<cfx:Axis.Sections>
      <cfx:AxisSection From="{Binding Path=MinDownloads}"
                       To="{Binding Path=MaxDownloads}" Background="#A0A0A0" />
    </cfx:Axis.Sections>

效果如下：

Chart FX for WPF图表控件如何简化图表（二）

现在来看看怎么样在最大值上记性标记呢？具体代码如下：

<cfx:Chart.ConditionalAttributes>
    <cfx:ConditionalAttributes>
      <cfx:ConditionalAttributes.Condition>
        <cfx:MaximumValueCondition/>
      </cfx:ConditionalAttributes.Condition>
      <cfx:ConditionalAttributes.Marker>
        <cfx:MarkerAttributes Visibility="Visible" Fill="Red"
                              Size="6" Shape="Circle" />
      </cfx:ConditionalAttributes.Marker>
    </cfx:ConditionalAttributes>
  </cfx:Chart.ConditionalAttributes>

Chart FX for WPF图表控件如何简化图表（二）

如果说想要显示每个图表最后一个值的点标签的话，我们可以使用相同的类，将其绑定到X值，代码如下：

<cfx:ConditionalAttributes>
        <cfx:ConditionalAttributes.Condition>
          <cfx:MaximumValueCondition BindingPath="X"/>
        </cfx:ConditionalAttributes.Condition>
        <cfx:ConditionalAttributes.PointLabels>
          <cfx:PointLabelAttributes Visibility="Visible" Offset="3,0"
                                    HorizontalAlignment="Right"
                                    VerticalAlignment="Center" FontSize="7"/>
        </cfx:ConditionalAttributes.PointLabels>
      </cfx:ConditionalAttributes>

Chart FX for WPF图表控件如何简化图表（二）