上文中我给大家展示了微软提供的开源toolkit中图表控件的效果和使用，但是与fusion charts相比效果还是显得逊色。本篇将介绍另一种charts控件库—visifire charts。

　　visifire控件库不仅涵盖wpf/silverlight，还有windows phone的版本（由此可见将wpf的代码移植到silverlight和windows phone上是一个非常平滑的过程）。

　　更加丰富的图表样式

　　wpf toolkit中的charts提供了7中现成的控 件：AreaSeries，PieSeries，LineSeries，BarSeries，BubbleSeries，ColumnSeries，ScatterSeries。 visifire-charts则提供了23中图表，但不是一种图表对应一种控件，这也是其高明之处，我们无需更换控件，只需设置一下 Visifire.Charts.DataSeries的RenderAs属性即可即时的改变图表类型。

　　<vCharts:DataSeries x:Name="dataSeries" RenderAs="Polar"  DataSource="{Binding Path=ChartData}">
<vCharts:DataSeries.DataMappings>
<vCharts:DataMapping MemberName="AxisXLabel" Path="Left" />
<vCharts:DataMapping MemberName="YValue" Path="Right" />
</vCharts:DataSeries.DataMappings>
</vCharts:DataSeries>

　　定制设置横向/纵向轴线

　　这也是tool-kit charts不好用的地方之一，在visifire的Chart中我们可以直接在xaml中定制。

　　<vCharts:Chart.AxesX>
<vCharts:Axis Title="horizontal title" />
</vCharts:Chart.AxesX>
<vCharts:Chart.AxesY>
<vCharts:Axis Title="vertical title" />
</vCharts:Chart.AxesY>

　　使用DataSource和DataMapping绑定数据并进行属性映射

要为表格绑定一个数据源是很简单的，只需设置<vCharts:DataSeris的DataSource属性。然后通过DataMapping将绑定集合对象中的属性与图表的现实目标对应起来。

　　<vCharts:DataSeries RenderAs="Polar"  DataSource="{Binding Path=ChartData}">
<vCharts:DataSeries.DataMappings>
<vCharts:DataMapping MemberName="AxisXLabel" Path="Left" />
<vCharts:DataMapping MemberName="YValue" Path="Right" />
</vCharts:DataSeries.DataMappings>
</vCharts:DataSeries>

　　实战visifire

　　有了上面的知识我们就可以在实际项目中应用visifire了。这里我们准备做一个用来像客户展示图表数据的demo，它能够及时的变化图表类型，数据的变化也能立即体现到图表上。

　　我们仍然然使用上篇的demo工程，由于我们上篇的demo中使用了mvvm，所以对于更换视图这样的工作不需要去修改任何viewmodel和业 务代码！只需增加一个新的窗口Show2并在app.xaml中设置其为启动窗口。像其中添加visifire的Chart控件，并将图表的 DataSource绑定到到ViewModel中。（此外，为了方便演示加了个button用于变更数据和一个combobox用于选择图表样 式，visifire的Chart本身高度和宽度不能伸缩，我将它们绑定到父容器的长宽上。）

　　<vCharts:Chart Watermark="False" Theme="Theme3" Width="{Binding ElementName=scrViewer, Path=ActualWidth}" Height="{Binding ElementName=scrViewer, Path=ActualHeight}"
AnimationEnabled="True" AnimatedUpdate="True">
<vCharts:Chart.Titles>
<vCharts:Title Text="This is a chart" FontSize="12" />
<vCharts:Title Text="This is another chart" FontSize="10" HorizontalAlignment="Right" />
</vCharts:Chart.Titles>
<vCharts:Chart.AxesX>
<vCharts:Axis Title="horizontal title" />
</vCharts:Chart.AxesX>
<vCharts:Chart.AxesY>
<vCharts:Axis Title="vertical title" />
</vCharts:Chart.AxesY>
<vCharts:Chart.Series>
<vCharts:DataSeries x:Name="dataSeries" RenderAs="Polar"  DataSource="{Binding Path=ChartData}">
<vCharts:DataSeries.DataMappings>
<vCharts:DataMapping MemberName="AxisXLabel" Path="Left" />
<vCharts:DataMapping MemberName="YValue" Path="Right" />
</vCharts:DataSeries.DataMappings>
</vCharts:DataSeries>
</vCharts:Chart.Series>
</vCharts:Chart>

　　这样，只需更换一个View而ViewModel和Model无需任何更改，我们就将一个之前使用toolkit charts的demo改成一个使用visifire的demo，由此可见合理的设计能够节省程序员的大量时间。