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

数据统计的视觉盛宴—visifire charts上文中我给大家展示了微软提供的开源toolkit中图表控件的效果和使用,但是与fusioncharts相比效果还是显得逊色。本篇将介绍另一种charts控件库—visifirecharts。visifire控件库不仅涵盖wpf/silverlight,还有windowsphone的版本(由此可见将wpf的代码移植到silverlight和windowsphone上是一个非…

大家好,又见面了,我是你们的朋友全栈君。

 

上文中我给大家展示了微软提供的开源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>

image image image

image

定制设置横向/纵向轴线

这也是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>

image

使用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官方提供的文档还是非常详细的)

在线设计器

转载于:https://www.cnblogs.com/wJiang/archive/2010/12/16/1907430.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/162806.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号