半岛权威十大直营(官方)网站

    在上一篇文章《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>

效果如下：

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

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

    如果说想要显示每个图表最后一个值的点标签的话，我们可以使用相同的类，将其绑定到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>