数据统计的视觉盛宴—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)


相关推荐

  • 腾讯T4技术专家_T4正常值

    腾讯T4技术专家_T4正常值T4 级老专家:AIOps 在腾讯的探索和实践

  • Microsoft Office 2007 中文专业版密钥

    Microsoft Office 2007 中文专业版密钥MicrosoftOffice2007中文专业版(微软原版)正版密钥MicrosoftOfficeVisio2007简体中文专业版:简介:    便于IT和商务专业人员就复杂信息、系统和流程进行可视化处理、分析和交流。使用具有专业外观的OfficeVisio2007图表,可以促进对系统和流程的了解,深入了解复杂信息并利用这些知识做出更好的业务决策。迅雷下载    …

  • 我的世界如何TP坐标_我的世界设置坐标

    我的世界如何TP坐标_我的世界设置坐标我的世界游戏中,/tp玩家id,开启了作弊模式与朋友联机时可以使用,作用是传送到该玩家身边。/tp玩家id将该玩家传送到x,y,z这个坐标处,需要有作弊模式权限。单机的tp指令有:/tp玩家id(开启了作弊模式与朋友联机时可以使用,作用是传送到该玩家身边)。/tp玩家id(将该玩家传送到x,y,z这个坐标处,需要有作弊模式权限)。也可以利用命令方块:/give玩家idminecr…

  • traceroute和tracert原理

    traceroute和tracert原理一、Traceroutetraceroute命令用IP生存时间(TTL)字段和ICMP错误消息来确定从一个主机到网络上其他主机的路由。路由器收到TTL为1的包文减1后直接丢弃,然后回复ICMP(type=11,code=0,TTLequals0duringtransit——传输期间生存时间为0)。目标主机收到traceroute的UDP探测包回复ICMP(type=3,code=3,端口不可达)。Linux上称之为traceroute,Windos类似的功能为trace

  • C++递归和迭代的区别,并举例说明[通俗易懂]

    C++递归和迭代的区别,并举例说明[通俗易懂]递归:函数自己重复调用自己迭代:利用变量的原值推算出变量的一个新值;A不停的调用B例子一:斐波那契数递归(recursion):#include#includeusingnamespacestd;intfab(intn){if(n==0)return0;if(n==1)return1;if(n>1)returnfab(n-1)+fab(n-2);}intmain(){cout<<fab(4)<

  • 【机器学习】支持向量机原理及例题详解

    【机器学习】支持向量机原理及例题详解支持向量机(SVM)详解

发表回复

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

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