数据统计的视觉盛宴---visifire charts

 

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

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

更加丰富的图表样式

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，由此可见合理的设计能够节省程序员的大量时间。

本文demo源码下载地址

相关资源

最后奉上visifire的相关资源：

visifire@codeplex

官方showcase

visifire文档（visifire官方提供的文档还是非常详细的）

在线设计器