使用 Dundas Chart for ASP.NET 创建动画
5.00/5 (1投票)
2004 年 5 月 3 日
4分钟阅读
168139
使用 Dundas Chart for ASP.NET Enterprise Edition, Version 4.0 创建图表动画
这是我们CodeProject赞助商的展示评论。这些评论旨在为您提供我们认为对开发人员有用且有价值的产品和服务信息。
引言
Dundas Chart for ASP.NET Enterprise Edition, version 4.0 现在包含了您无需编写一行代码即可创建精美动画图表所需的工具。
何时使用动画图表？
动画图表为您的数据增加了深度。它们突出了有价值的信息并支持记忆。如果您需要在某个数据点达到临界值时（如压力值、高/低销售额或股票卖出价）加以强调，动画图表可确保您的观点能够得到明确传达并被记住。
图 1：Dundas Chart 渲染 Flash 动画
Dundas Chart 动画在在线营销或演示场景中非常有用。它们能够吸引观众的注意力，关注最 impactful 和最相关的数据。使用动画图表格式展示您公司随时间推移的销售业绩，并与行业标准进行比较，可以为销售演示创建一个令人印象深刻的背景。
创建动画图表的简便性
Dundas Chart for .NET Enterprise Edition 使您能够设计图表，而无需编写任何代码。使用 Dundas Chart Wizard，您可以设计图表的外观，将其绑定到数据源，并使用 Visual Studio 属性浏览器设置动画属性。
Dundas Chart for ASP.NET Enterprise Edition 能够以 Flash 或 SVG 格式为您的数据制作动画。第一步是决定输出类型。
图 2：选择渲染到 Flash
// set the render format to be Flash
Chart1.ImageType = ChartImageType.Flash;
此时，已选择静态图表的渲染格式。图表将以与 Png 或 Jpg 渲染相同的方式以 Flash 格式渲染。接下来，需要选择一个动画主题，或创建一个自定义动画。动画主题的添加是为了提供常见的图表动画（如果适用），从而减少不必要的开发。自定义动画赋予开发人员对动画序列的完全控制；它可以用于设置哪个元素被动画化，如何进行动画化（移动、增长或淡入淡出动画）以及动画的时序。
无论是使用主题还是自定义动画，开发人员都可以控制动画的时间段和重复属性。
图 3：选择动画主题
图 4：定义动画重复并带有延迟
// 设置动画主题为元素一起增长 Chart1.AnimationTheme = AnimationThemes.GrowingTogether; // 设置动画在 3 秒延迟后重复 Chart1.AnimationDuration = 7; // 设置动画在 3 秒延迟后重复 Chart1.RepeatAnimation = true; Chart1.RepeatDelay = 3; 使用以上属性设置，可以在几分钟内创建以下图表动画。
图 5：使用 GrowingTogether 动画主题渲染的图表
创建自定义动画图表
动画主题非常适合制作您的动画图表，并且能够满足您绝大多数的需求。但是，与其他提供的图表功能一样，也有一种简单而强大的方法来自定义数据的呈现方式。自定义动画可提供高端效果，同时保持开发上的简便性。
自定义动画可对图表元素进行完全控制，允许每个元素按照所需的方式进行动画化和排序。
上面的动画示例可以修改，使折线图系列独立于动画主题进行绘制，从 GrowingTogether 动画主题中删除图表区域的轴线和网格线，并且标题从右侧滑入。结果是：
图 6：使用自定义动画渲染的图表
有三个任务需要完成。第一个任务是修改 GrowingTogether 动画主题，删除轴线和网格线的“淡入”效果。这是通过创建一个 FadingAnimation 对象并将图表元素添加到动画对象来实现的。由于目标是禁用动画主题中的一组图表元素，因此会将 Enabled 属性设置为 false，并将对象添加到 Chart Animation Collection 中。
第二个任务是创建一个 GrowingAnimation 对象并将其添加到 Chart Animation Collection 中。此动画对象包含折线图系列。将 OneByOne 属性设置为 true 将导致折线在动画序列指定的时间内逐点增长。
最后，为了给图表标题一个滑动入的效果，添加了一个 MovingAnimation 对象。移动动画提供 X 和 Y 坐标（以图表百分比表示）来定义移动的起始位置；StartPositionX 被设置为图表宽度的 100%，以便文本最初在视图之外。StartTime 和 Duration 的设置使得这是最后被动画化的对象之一。
// 设置动画主题为元素一起增长 Chart1.AnimationTheme = AnimationThemes.GrowingTogether; // 设置动画在 3 秒延迟后重复 Chart1.AnimationDuration = 7; // 设置动画在 3 秒延迟后重复 Chart1.RepeatAnimation = true; Chart1.RepeatDelay = 3; // 从 growing together 动画主题中禁用轴线和主网格线动画 // FadingAnimation axesAnimation = new FadingAnimation(); axesAnimation.AnimatedElements.Add(Chart1.ChartAreas["Default"].AxisX, AxisAnimationElement.MajorGridlines); axesAnimation.AnimatedElements.Add(Chart1.ChartAreas["Default"].AxisX, AxisAnimationElement.AxisLine); axesAnimation.AnimatedElements.Add(Chart1.ChartAreas["Default"].AxisY, AxisAnimationElement.MajorGridlines); axesAnimation.AnimatedElements.Add(Chart1.ChartAreas["Default"].AxisY, AxisAnimationElement.AxisLine); axesAnimation.Enabled = false; Chart1.CustomAnimation.Add(axesAnimation); // 将折线系列动画替换为逐点增长的动画 GrowingAnimation seriesAnimation = new GrowingAnimation(); seriesAnimation.AnimatedElements.Add(Chart1.Series["Series2"]); seriesAnimation.StartTime = 2.0; seriesAnimation.Duration = 3.0; seriesAnimation.OneByOne = true; Chart1.CustomAnimation.Add(seriesAnimation); // 动画化标题使其从右侧滑动进入 MovingAnimation titleAnimation = new MovingAnimation(); titleAnimation.AnimatedElements.Add(Chart1.Titles[0]); titleAnimation.StartTime = 8.5; titleAnimation.Duration = 1.0; titleAnimation.StartPositionX = 100; titleAnimation.StartPositionY = 7; titleAnimation.Enabled = true; Chart1.CustomAnimation.Add(titleAnimation); 上面的示例是一个相当简单的自定义动画。通过提供的 API 和独立动画化每个图表元素的能力，开发人员拥有完全的创意控制权。动画的可能性非常多样，在此无法完全展示，因此要查看更多示例，请访问 Dundas Chart Gallery（参见下文链接），或在此下载 Dundas Chart for ASP.NET Enterprise Edition 的完整评估版。
