摘要:目前有很多图表插件可以在开发中供开发者选择,包括Silverlight本身就内置了很多图表插件,但是多数图表插件并没有提供地理区域图表功能。例如想看一下北京十八个区县人口分布情况,当然你可以使用饼图、柱状图等,但是如果可以直接看到类似于地图的分布状况不是更加直观吗?
主要内容:
1.图表功能
2.图表设计
3.使用效果
一、图表功能
图表有以下功能特点
- 区域可定制化,今天是北京市明天可能还需要用到上海市,因此这个区域不能是硬编码的而是可以自由定制的。
- 使用灵活,插件使用者可以自用设置图表的标题、区域颜色、区域的数据显示、区域提示等。
- 支持显示图例显示和鼠标互动,提高用户体验。
- 支持保存、打印,丰富图表功能。
二、图表设计
要实现这样一个图表插件,主要解决的问题还是区域制定化的问题,这里通过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
Chart
Area
ChartAccess
AreaAccess
ChartTipService
Printer
XmlHelper
再看一下配置文件,需要注意的是文件中路径、长、宽、间隔等是可以通过Expression Design中绘制然后导出XAML粘贴过来的。
Main页面XAML
Main页面CS
三、使用效果
最后看一下使用过截图吧
图表展示
鼠标移动上之后的效果(区域放大并显示提示信息)
设置图表标题
设置区域颜色
设置区域标题
设置数据
设置提示信息