世俱杯 2025

    在今天的文中，将会分享一下如何在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的图表中也没有这个功能去画矩形，尤其是ImageBrush / DrawingBrush的“region”。即使我们尝试设置Stretch到UniformToFill，也只可以让条形显示一部分。 这个想法主要是想要确保所有的条形在完整的图形区域中实际根据条形几何绘制位图。我们的逻辑项目支持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或更厚，这样就会更加接近于我们的外观。

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

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

     如果将上述中的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>