使用 Infragistics Motion Framework 实现富有表现力的商业智能





2.00/5 (1投票)
Infragistics 凭借其数据可视化控件、数据可视化用户体验以及 Infragistics Motion Framework,提供对复杂业务数据的更好洞察。Motion Framework 允许您快速构建丰富、交互式的数据可视化,为用户提供更深入的洞察和引人入胜的体验。
如今的业务用户期望看到的不仅仅是战舰灰色屏幕上的图表和图形中的静态数据。他们习惯于在 iPad、iPhone 上使用交互式应用程序,并在 Xbox 和 PlayStation 等媒体游戏平台上获得引人入胜的体验。因此,当他们上班时,对与数据交互的商业智能应用程序中更丰富、更具吸引力、更有意义的体验的期望相当高。
业务用户日益增长的期望正促使开发人员利用 XAML 平台(Silverlight 和 WPF)的丰富性,以美观优雅的方式可视化和动画数据,从而使他们的客户对其数据获得更丰富、更有意义的洞察。虽然 XAML 平台旨在实现这一点,但对于许多开发人员来说,它是新事物,学习曲线和时间压力阻碍了团队实现这种交互水平。
更多关于 Infragistics 如何帮助商业智能和数据分析的信息
Infragistics 通过我们的数据可视化组件和 Motion Framework 解决了向复杂数据提供更好业务洞察的问题。Infragistics Motion Framework 使开发人员能够快速编程丰富和交互式的数据可视化,这些可视化将随时间动画数据,为用户提供更深入的洞察和引人入胜的体验。为了演示 Motion Framework,我们的应用程序团队构建了两个新的参考应用程序 WorldMaps 和 WorldStats,它们显示来自互联网的实时流数据,并将其可视化到我们快速的 Silverlight 图表控件、Silverlight 地理空间地图控件 以及我们的缩放栏中,后者是一个 交互式滚动和缩放 Silverlight 控件。
Infragistics Motion Framework
Infragistics Motion Framework 是我们丰富、交互式 Silverlight 图表控件 和 WPF 图表控件 xamDataChart™ 的固有部分,它包含在我们的 NetAdvantage® for Silverlight Data Visualization、NetAdvantage for WPF Data Visualization 和 NetAdvantage Ultimate(适用于 WPF 和 Silverlight)产品中。您无需修改任何代码即可使用 Infragistics Motion Framework,无需特殊设置。您无需编写任何复杂的插值代码来实现数据转换,就像您可能需要自己构建一个健壮且一致的框架来创建沉浸式动画用户体验那样,也无需担心特殊的边缘情况。只需打开 Infragistics Motion Framework,它就会为您服务。
在 WorldMaps 和 WorldStats 应用程序中用于构建交互式数据分析体验的其他 Infragistics WPF 数据可视化控件和 Silverlight 数据可视化控件包括:
xamMap™ – 这是我们的地理空间 Silverlight 地图控件 和 WPF 地图控件,可用于可视化任何类型的地理空间数据,包括地图、平面图和座位图。
xamZoombar™ - 这是我们的 滚动和缩放控件,在 Silverlight 和 WPF 中均可用,可以绑定到 xamDataChart 和 xamTimeline™ 等控件,以提供交互式滚动和缩放体验。
使用 WorldStats 实现商业智能
WorldStats 示例演示了数据图表的 Motion Framework 功能,可随时间动画或“播放”数据。此应用程序通过由两个高度交互的数据图表组成的引人入胜的用户界面,为最终用户提供对世界各国统计数据的更丰富洞察。这两个数据图表都内置了缩放和平移功能,可以使用图表的缩放栏和鼠标拖动和滚轮支持进行访问。
在顶部数据图表中,系列代表 1800 年至 2010 年间世界所有国家的统计数据。最终用户可以选择将哪些统计数据绘制在 X 轴或 Y 轴上,以表示所有国家。此外,数据点的气泡大小可以映射到统计数据的值,以显示国家之间的差异。统计数据也可以沿 X 轴或 Y 轴以线性或对数刻度绘制。还说明了构建丰富交互式工具提示(包括嵌入式图表)的可能性,当最终用户将鼠标悬停在顶部数据图表中的单个数据点或系列上时,会显示工具提示。
在图 5 中,请注意在底部数据图表中,系列代表国家的统计数据。每次在列表框中选择或取消选择一个国家时,数据图表及其图例都会相应更新。此数据图表提供多个国家的统计数据选择,这些数据以线性或对数刻度绘制在 Y 轴上,并随时间绘制在 X 轴上。此外,它还允许选择和绘制不同类型的趋势线,以显示统计数据随时间的趋势。此数据图表还利用自定义工具提示来显示所选国家的基本信息。当鼠标光标悬停在图表中的系列或国家列表框中的项目上时,会显示这些工具提示。此应用程序的另一个独特功能是当鼠标光标悬停在图表图例中的国家名称上时,会突出显示单个系列。
使用 Infragistics Motion Framework
在本节中,我们将探讨如何实现 Motion Framework 的交互性。在我们的 Silverlight 图表控件和 WPF 图表控件 xamDataChart 中,我们在 Series 类(所有系列的基类)上引入了一个新属性 TransitionDuration。TransitionDuration 是 System.TimeSpan 类型的依赖属性。如果设置,它表示当前系列变形的持续时间。此属性的目的是提供数据点从一个值到另一个值的平滑过渡。变形(平滑过渡)仅在单个数据点内的值发生变化时应用。当您向底层数据源添加新数据点或删除数据点时,不会发生过渡。过渡仅在绑定属性的值发生变化时应用于单个(或多个)数据点。
在 World Maps 展示应用程序的统计分布中,我们展示了四维数据。其中两个维度是显而易见的——X 轴显示给定站点的累计点击量,Y 轴显示给定浏览器(或区域)在该站点的份额(百分比)。现在我们应用时间作为第三个维度——时间,因此 X 和 Y 值随时间变化,当您点击播放按钮时可以清楚地看到这种变化。第四个维度,点击量随时间的变化由气泡的半径(大小)表示。气泡大小的增加表示当前时间段(天)的点击量相对于前一个时间段有所增加。
虽然您可以使用三个维度(X、Y 和时间)轻松完成任务,但添加气泡大小需要一些高级技术。完整的解决方案包括一个 DispatcherTimer,它以固定的时间间隔(可通过“更改动画速度”滑块调节)进行计时。在计时器刻度上,我们只需更新图表数据源中所有相关的数据点。为了将不同的浏览器(或区域)视为单独的图例项,以及相应不同颜色的气泡,我们需要为我们拥有数据的每个浏览器(或区域)创建单独的系列实例。
为了简化代码,我们创建了一个简单的应用程序,演示如何在您自己的应用程序中实现 Motion Framework。您可以在此处下载此代码。
为了实现 Motion Framework 中的动画,我们正在:
- 使用 ScatterSeries 显示气泡
- 使用 BubbleSeries 通过 ScatterSeries 的自定义 MarkerTemplate 方法动画气泡半径变化
由于我们将多次使用同一个 MarkerTemplate,因此我们创建了一个单独的 Silverlight 用户控件,以方便显示和动画气泡。它有三个重要属性:
IsAnimated
– 布尔属性,指示气泡大小是否应在更改时进行动画处理;AnimDuration
– TimeSpan 属性,用于设置动画持续时间(如果进行动画处理);LocalRadius
– Double 值属性,指示气泡的大小。当此属性更改时,如果 IsAnimated 为 True,则气泡大小会随着平滑动画而改变。
为了动画气泡大小,我们使用了一个实用程序类 SizeAnimation,该类可以在示例的 MotionFramework 文件夹下找到。这个类创建 DoubleAnimationUsingKeyFrames 来动画化我们用作 MarkerTemplate 的自定义控件的 Width 和 Height 属性的变化。我们还创建了自定义扩展,以便轻松地将动画应用于 FrameworkElement。
为了将所有功能封装到一个可重用的例程中,我们创建了 CoreMF 类。它实现了围绕实例化 DispatcherTimer、处理 Tick 事件和相应地更改数据源中的数据点所需的所有功能。您需要了解的 CoreMF 的重要属性和方法是:
DataChart
– 要执行运动框架操作的 xamDataChart 实例;Legend
– 将显示图表数据源(Series)的图例;DataSource
– 字典。这是动画的核心统一数据源。例如,如果您有 3 个浏览器版本的数据,每个浏览器数据将是一个单独的 IList,您必须将所有源组合到一个字典中。核心框架将自动从每个 IList 中选择适当的项目来更新当前数据点; XAxisName
– 字符串,表示 DataChart 中数据将绑定到的 X 轴的 Name 属性;YAxisName
– 字符串,表示 DataChart 中数据将绑定到的 Y 轴的 Name 属性;PropertyNameX
– 字符串,将被绑定到 X 轴的底层业务对象的属性名称;PropertyNameY
– 字符串,将被绑定到 Y 轴的底层业务对象的属性名称;PropertyNameR
– 字符串,将被绑定到气泡半径的底层业务对象的属性名称;MarkerTemplate
– DataTemplate。您可以定义自己的模板作为 DataTemplate。当然,您可以使用提供的 BubbleMarker 用户控件,但也可以创建自己的 DataTemplate,它可以是不同的形状,并且可能动画化或不动画化大小。LegendItemTemplate
– DataTemplate。您可以为 LegendItem 定义自己的 DataTemplate,以便自定义图例。
最后,一旦您的数据准备就绪,并且您已经在页面上插入了 xamDataChart,您就创建了一个 CoreMF 实例并设置了它的属性,如下所示:
this._coreMF = new CoreMF();
this._coreMF.DataChart = this.dcMotion;
this._coreMF.MarkerTemplate = this.Resources["MarkerTemplate"] as DataTemplate;
this._coreMF.DataSource = DemoModel.GetDictionaryData(5, 25);
this._coreMF.PropertyNameR = "ValueR";
this._coreMF.PropertyNameX = "ValueX";
this._coreMF.PropertyNameY = "ValueY";
this._coreMF.XAxisName = "axisX";
this._coreMF.YAxisName = "axisY";
this._coreMF.ChartLegend = this.mainLegend;
然后,您只需通过调用 CoreMF 实例上的 Play
方法来决定何时触发动画。
this._coreMF.Play();
这几乎是您需要在自己的应用程序中实现 Motion Framework 的丰富交互式体验所需的一切,以便为最终用户提供对业务数据的更好洞察。
总结
业务用户和消费者每天都被海量数据所淹没,争夺他们的注意力,许多时候重要的信息会丢失。像 Infragistics Silverlight 数据可视化和 WPF 数据可视化控件以及 Motion Framework 这样的工具使您能够提供更高质量、更有意义的应用程序,从而帮助您的客户更好地理解和分析数据。
立即下载 NetAdvantage Ultimate,以便您可以提供本文中描述的体验。
下载代码以在您自己的应用程序中实现 Motion Framework。