彩票走势图

WPF图表控件Chart FX使用方法系列:创建有地图的条形图表

原创|使用教程|编辑:郝浩|2013-03-01 17:13:15.000|阅读 814 次

概述: 在今天的文中,将会分享一下如何在Chat FX for WPF 中创建条形显示地图的条形图,附加源码和图片。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接:

    在今天的文中,将会分享一下如何在WPF图表控件Chart FX for WPF中创建有地图的条形图表,下面是第一次尝试在条形图中显示图像:

<cfx:Chart Gallery="Bar">
  <cfx:Chart.Series>
    <cfx:SeriesAttributes/>
  </cfx:Chart.Series>
  <cfx:Chart.AllSeries>
    <cfx:AllSeriesAttributes>
      <cfx:AllSeriesAttributes.Template>
        <DataTemplate>
          <Canvas>
            <Rectangle Width="{Binding Path=Width}" Height="{Binding Path=Height}">
              <Rectangle.Fill>
                <ImageBrush ImageSource="C:\Temp\WorldMap.png"/>
              </Rectangle.Fill>
            </Rectangle>
          </Canvas>
        </DataTemplate>
      </cfx:AllSeriesAttributes.Template>
    </cfx:AllSeriesAttributes>
  </cfx:Chart.AllSeries>
</cfx:Chart>

    我们将绑定这个矩形条的宽度和高度都我们创建的逻辑上的项目的宽度和高度上去,值得注意的是,我们并不担心左边和顶部,因为这些都将会在内部进行处理。现在我们正打算创建一个画布,因为将会在里面添加更多的元素,下面就是我们所得到的效果:

WPF图表控件Chart FX使用方法系列:创建有地图的条形图

    显然这不是我们想要的效果,实际上在WPF的图表中也没有这个功能去画矩形,尤其是ImageBrush / DrawingBrush的“region”。即使我们尝试设置StretchUniformToFill,也只可以让条形显示一部分。 这个想法主要是想要确保所有的条形在完整的图形区域中实际根据条形几何绘制位图。我们的逻辑项目支持PlotWidth PlotHeight,这样的话就会返回完整的绘制区域的面积,但是由于我们的画布会自动转移到条形的位置,所以就取消了这个操作,我们的逻辑项目排列在左边和顶部,所以需要创建一个简单的转换器:

public class NegateConverter : IValueConverter
{
    object IValueConverter.Convert (object value, Type targetType,
                                    object parameter, CultureInfo culture)
    {
        if (value is double)
            return -((double) value);
        else
            return value;
    }

    object IValueConverter.ConvertBack (object value, Type targetType,
                                        object parameter, CultureInfo culture)
    {
        if (value is double)
            return -((double) value);
        else
            return value;
    }
}

修改我们的模板如下:

<DataTemplate>
  <Canvas>
    <Canvas.Resources>
      <local:NegateConverter x:Key="negateConverter"/>
    </Canvas.Resources>
    <Rectangle Canvas.Left="{Binding Path=Left,
                                          Converter={StaticResource negateConverter}}"
               Canvas.Top="{Binding Path=Top,
                                    Converter={StaticResource negateConverter}}"
               Width="{Binding Path=PlotWidth}" Height="{Binding Path=PlotHeight}"
               Clip="{Binding Path=BoundsGeometry}">
      <Rectangle.Fill>
        <ImageBrush Stretch="UniformToFill" ImageSource="C:\Temp\WorldMap.png"/>
      </Rectangle.Fill>
    </Rectangle>
  </Canvas>
</DataTemplate>

    同时设置了这个矩形的Clip属性到我们逻辑项目后的一个新的属性中,这样的话就会返回一个几何形状,使用这个需要用到ChartFX创建3488或更厚,这样就会更加接近于我们的外观。

WPF图表控件Chart FX使用方法系列:创建有地图的条形图

&nbsp;   在这里还需要修改一些设计增量,首先添加为每个条形添加一个阴影效果。

<DataTemplate>
  <Canvas>
    <Canvas.Resources>
      <local:NegateConverter x:Key="negateConverter"/>
    </Canvas.Resources>
    <Rectangle Width="{Binding Path=Width}" Height="{Binding Path=Height}"
                      Fill="#404040" Stroke="#404040"
                      StrokeThickness="{Binding Path=StrokeThickness}">
      <Rectangle.BitmapEffect>
        <DropShadowBitmapEffect/>
      </Rectangle.BitmapEffect>
    </Rectangle>
    <Rectangle Canvas.Left="{Binding Path=Left,
                                          Converter={StaticResource negateConverter}}"
               Canvas.Top="{Binding Path=Top,
                                    Converter={StaticResource negateConverter}}"
               Width="{Binding Path=PlotWidth}" Height="{Binding Path=PlotHeight}"
               Clip="{Binding Path=BoundsGeometry}">
      <Rectangle.Fill>
        <ImageBrush Stretch="UniformToFill" ImageSource="C:\Temp\WorldMap.png"/>
      </Rectangle.Fill>
    </Rectangle>
  </Canvas>
</DataTemplate>

WPF图表控件Chart FX使用方法系列:创建有地图的条形图

    如果将上述中的3个值设置小于20,你将看不见大部分地图,甚至会失去这个效果,在这里就可以在绘图区域中使用相同的位图。

<cfx:Chart.PlotArea>
  <cfx:PlotAreaAttributes>
    <cfx:PlotAreaAttributes.Background>
      <ImageBrush Opacity="0.35" Stretch="UniformToFill"
                           ImageSource="C:\Temp\WorldMap.png" />
    </cfx:PlotAreaAttributes.Background>
  </cfx:PlotAreaAttributes>
</cfx:Chart.PlotArea>

WPF图表控件Chart FX使用方法系列:创建有地图的条形图


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn

文章转载自:慧都控件

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP