Silverlight之区域图表

摘要：目前有很多图表插件可以在开发中供开发者选择，包括Silverlight本身就内置了很多图表插件，但是多数图表插件并没有提供地理区域图表功能。例如想看一下北京十八个区县人口分布情况，当然你可以使用饼图、柱状图等，但是如果可以直接看到类似于地图的分布状况不是更加直观吗？

主要内容：

1.图表功能

2.图表设计

3.使用效果

一、图表功能

图表有以下功能特点

1. 区域可定制化，今天是北京市明天可能还需要用到上海市，因此这个区域不能是硬编码的而是可以自由定制的。
2. 使用灵活，插件使用者可以自用设置图表的标题、区域颜色、区域的数据显示、区域提示等。
3. 支持显示图例显示和鼠标互动，提高用户体验。
4. 支持保存、打印，丰富图表功能。

二、图表设计

要实现这样一个图表插件，主要解决的问题还是区域制定化的问题，这里通过XML配置的方式实现，将每个图表作为一个Chart，每个Chart中有多个Area区域。Area中主要需要对区域路径和位置的描述（也就相当于要在Silverlight中通过读取配置文件进行绘制Path，不过不用担心，这些都可以通过Express Design来实现）然后程序中通过动态创建Path来实现动态绘制。另外图片的保存功能在前面的文章"Silverlight之摄像头麦克风使用"已经说过。而在Silverlight 4中也已经提供了原生的打印功能，因此要实现这两个功能也相当容易。另外还需要用到Silverlight Toolkit中的ContextMenu将其添加到右键菜单中。下面是实现的主要类图：

 

ChartManager主要负责图表管理，这其中包括图表Chart和区域Area的管理，通过它可以将XML配置中的图表、区域转换为对应实体。

Chart和Area为对应的实体类，通过其各自对应的Access进行访问。

ChartImage主要是实现保存功能，而Legend是对图例的抽象。

Printer和XmlHelper是两个辅助类，用户打印和xml操作。

其中几个主要类的源代码

ChartManager

View Code

 

Chart

View Code

 

Area

View Code

 

ChartAccess

View Code

 

AreaAccess

View Code

 

ChartTipService

View Code

 

Printer

View Code

 

XmlHelper

View Code

 

再看一下配置文件，需要注意的是文件中路径、长、宽、间隔等是可以通过Expression Design中绘制然后导出XAML粘贴过来的。

View Code

 

Main页面XAML

View Code

 

Main页面CS

View Code

 

三、使用效果

最后看一下使用过截图吧

图表展示

 

鼠标移动上之后的效果（区域放大并显示提示信息）

 

设置图表标题

 

设置区域颜色

 

设置区域标题

 

设置数据

 

设置提示信息

 

最后附上插件源代码