`
zhouxueliang
  • 浏览: 35620 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

FusionChart动画样式类型

阅读更多
FusionCharts做得最好的事情之一就是图表动画序列,这是用户静静乐道的。默认情况下,FusionCharts仅在数据绘制(柱状图、饼图、折线图等)时候使用动画。但是FusionCharts V3不限制你的想象力。
使用动画样式,你可以为图表上的每一个对象使用动画效果。您可以自定义动画并将它应用到图表的各种对象。
每个图表对象有一个动画支持属性列表,可以通过动画样式设置。在我们通过通话样式设置属性之前,让我们快速看一下动画样式属性。
动画样式可以帮助你为对象的下列属性实现动画效果:
属性
描述
_x
帮助给定对象在x位置进行动画效果
_y
帮助给定对象在y位置进行动画效果.
_xScale
使用此属性,您可以为给定的图表对象制作动画的X-缩放(水平缩放)
_yScale
像_xScale,在Y-缩放(垂直缩放)
_alpha
帮助实施透明度过渡效果
_rotation
帮助你为饼图和圆环图制作圆周运动的动画
并非所有的参数都可以适用于所有图表对象。例如,文本字段不能是X -缩放或Y缩放,旋转效果也不适用于他们。同样,水平分区线不支持的y和x缩放移。为每个图表对象动画的参数名单在图表规范各自的图表区域工作.
结合或多个动画序列多个动画也可以应用到任何图表对象。例如,你可以为数据图选择y缩放和透明度渐变(组合动画)或者您可能会首先X缩放,再y缩放(连续动画)。
现在让我们看看动画样式属性,以便帮助我们控制功能:
属性
描述
param
这个属性帮助你指定图表对象动画的属性例如, _x, _y, _xscale 等
start
动画的开始值。比如如果你要对数据图进行透明度效果,这个开始值是0。
Duration
利用这一点,你可以以秒级控制动画时间
Easing
这个属性允许你指定动画进行的类别。有效值是 "elastic"弹性, "bounce"反弹, "regular"定期, "strong"强 or "none"无.
对于动画风格类型,除了 Easing,所有上述属性是强制性的
在详细解释前,让我们快速看看一个动画示例。让我们在图表加载完成后尝试让画布使用动画效果
为此,我们首先需要确定我们的自定义样式,由于需要同时_xScale和 _yScale同时按比例增加,我们需要定义两个动画样式,把他们应用到画布对象。样式定义如下:
<styles>
      <definition>
            <style name='MyXScaleAnim' type='ANIMATION' duration='1' start='0' param="_xscale" />
            <style name='MyYScaleAnim' type='ANIMATION' duration='1' start='0' param="_yscale" />
      </definition>
      ... More XML Here ....
</styles>
在上面的代码中,我们命名了两个样式分别为 MyXScaleAnim和MyYScaleAnim和他们的参数(动画参数) _xscale和 _yscale。我们设置起始值为0,画布规模增加到100。(记住FusionCharts的规模总是从1-100),我们还指定了动画序列的 duration为1。
<styles>
     ... More XML Here ....
      <application>
<apply toObject='Canvas' styles='MyXScaleAnim,MyYScaleAnim' />
      </application>
</styles>
如果您为一个单一系列图表运行上面的代码,你会看到,在数据动画和渲染之前,画布规模从0到全尺寸的大小。正是我们需要的!让我们进入到详细的属性.
  param 属性
param 属性 指定应用动画的图表对象属性。正如前面讨论的,根据图表对象不同可以采用以下值之一:
_x
_y
_xScale
_yScale
_alpha
_rotation
我们重申,不是所有图表对象都支持所有的上述性质。请参考给定的图表,以获取为每个图表对象支持动画参数列表。
  设置动画的对象的起始位置
在上面的例子中,我们实现了画布从0到100的动画,我们设置动画起始值为0,因为我们想画布从0到100缩放。你总是需要为任何动画设置一个起始值。最终值取决于图表对象并根据FusionCharts的动画参数。
例如,你想为分区线实现y位置动画,从0到最终位置(画布内)。你需要设置起始位置为0。但既然你不知道分区线的终点位置,FusionCharts会自动设置的。
同样,如果你想为一个图表实现分区线动画效果,它从底到各自的最终位置高 500像素。你需要设置起始位置为500,终点位置由FusionCharts设置。
  起始值的宏
通常情况下,你可能想指定动画的x/y位置,画布的开始/中间/结束位置。例如你想应用y属性指定分区线从画布头到终点的动画,在你最终指定画布的y值钱你需要试验很多y值。这是因为画布的起始位置是在运行时时动态计算的,它依赖于很多因素,如标题、子标题、图表间隙、空白等
FusionCharts v3的引入宏帮你摆脱这种麻烦。宏是预先定义的变量在运行时的假设值。例如,$ canvasStartY代表了画布开始Y位置,并假定在运行时只有一个值。所以,如果你需要你的分区线的Y位置从画布开始到最终的实际位置上,你需要做的是:/p>
<style name='DivYAnim' type='ANIMATION' duration='1' start='$canvasStartY' param="_y" />
FusionCharts在运行时将自动计算,并且为宏指定值,你会看到动画从画布的开始Y位置开始。因此,如果就算你重设图表大小或者显示/隐藏标题或者改变空白大小,你也不需要保留画布y位置的标签,FusionCharts为你做.
FusionCharts v3 支持下列的动画样式宏值:
$chartStartX
图表开始的x位置。如果你在一个HTML页面加载图表它是0。不过,如果你在另一个Flash影片载入图表,将采取给定的X位置
$chartStartY
图表开始的y位置。如果你在一个HTML页面加载图表它是0。不过,如果你在另一个Flash影片载入图表,将采取给定的X位置.
$chartWidth
图表宽度
$chartHeight
图表高度
$chartEndX
图表终点X位置。如果你在一个HTML页面加载图表,它的值等同于图表的宽度。
$chartEndY
图表终点Y位置。如果你在一个HTML页面加载图表,它的值等同于图表的宽度。
$chartCenterX
图表中间X位置
$chartCenterY
图表中间Y位置.
$canvasStartX
画布启动X位置(从左侧)如画布左边的坐标
$canvasStartY
画布启动Y位置(从上部)如画布头的坐标
$canvasWidth
画布宽
$canvasHeight
画布高
$canvasEndX
画布终点X位置如画布右侧的坐标
$canvasEndY
画布终点Y位置如画布底的坐标
$canvasCenterX
画布中间X位置
$canvasCenterY
画布中间Y位置 Y Position of canvas

宏名称是大小写敏感的。因此,你需要确保你提供宏的名字以正确大小写,$ canvasstarty将不工作,并且将记录在调试窗口中的错误。您需要正确地指定为$ canvasStartY。
使用宏更多例子:
<style name='LabelsAnim' type='ANIMATION' duration='1' start='$canvasCenterX' param="_x" />
<style name='YValuesAnim' type='ANIMATION' duration='1' start='$canvasCenterY' param="_y" />
  创建宏表达式
你也可以加入数字(整数)值预先定义的宏,以抵消动画时使用宏。例如,如果你想画布div线Y位置的从10像素开始动画,你可以使用::
<style name='DivYAnim' type='ANIMATION' duration='1' start='$canvasStartY-10' param="_y" />
或者,如果你想从动画开始位置比画布低10像素,你可以使用:
<style name='DivYAnim' type='ANIMATION' duration='1' start='$canvasStartY+10' param="_y" />
目前,FusionCharts的只允许+(加)和 - (减)在宏表达式操作。
  指定动画类别
Easing 是指逐渐加速或减速过程中的动画。例如,一个图表对象可能在动画开始逐步增加它的速度,但是在到达结束前会放慢速度。还有很多不同的方式来进行加速和减速。这有助于你的动画看起来更真实。

FusionCharts v3支持以下方法:
方法
描述
Elastic
增加一个弹性影响,在范围的一端或两者。该值不受时间影响。
Bounce
增加一个反弹效应在范围的一端或两端。数值与duration相关,更大的duration值产生反弹持续时间更长。
Strong
添加较慢的运动在一端或两端。这种效果是类似的例行缓和,但它更突出
Regular
添加较慢的运动在一端或两端。此功能使您能够添加加速他们的影响,放缓的影响,或两者兼而有之。
None
增加了一个匀速运动从开始到结束没有影响,减缓或加速。这一转变也称为线性过渡。

对于上述任何方法,FusionCharts在过渡期结尾会提供缓冲影响。例如,如果的动画是y轴缩放从0到100,你会看到,列的动画在开始很快(增速很快),但在最后一部分的动画速度很慢.
你可以使用上述任何方法进行动画样式定义
分享到:
评论

相关推荐

    FusionChart

    标题"FusionChart"指的是一个流行的JavaScript图表库,用于在网页上创建交互式、美观的数据可视化效果。这个库广泛应用于各种数据分析、报告和仪表板场景,让数据以图形化的方式直观呈现,便于理解和解读。 ...

    Fusionchart.js

    "Fusionchart.js"是FusionCharts的核心JavaScript库文件,它包含了大量的代码来处理图表的渲染、动画效果以及与用户的交互功能。这个压缩包很可能是FusionCharts的基础组件集合,用于快速构建具有视觉吸引力的数据...

    网页 饼形图控件 flash fusionchart 7种样式 代码

    Flash FusionCharts是一款功能强大的图表库,它允许开发者创建交互式的、动画效果丰富的饼形图和其他类型的图表。在这个特定的压缩包中,包含的是FusionCharts用于网页的饼形图控件,提供了7种不同的样式,以满足...

    fusionChart

    6. **自定义样式和主题**:FusionCharts提供了预设的主题和样式,同时也允许你自定义颜色、字体、边框等,以适应你的品牌和设计。 7. **兼容性和跨平台**:FusionCharts不仅支持所有主流的现代浏览器,还通过HTML5...

    fusionchart

    3. **自定义选项**:FusionCharts提供了大量的自定义选项,允许开发者调整颜色、字体、动画效果、数据标签等,以实现独特的视觉风格。 4. **多语言支持**:支持多种语言,方便全球化的项目使用。 5. **数据源兼容...

    商业版本的fusionchart

    SWF是Adobe Flash Player播放的文件格式,用于在网页上显示动画和交互式内容;而SWC是Flex编译后的库文件,可以直接在Flex项目中导入,简化开发过程。 商业版的FusionCharts Flex包括以下关键组件和功能: 1. **...

    FusionChart API 属性翻译

    每个FusionChart实例都需要一个唯一的ID,这由`chart.id`属性指定。在HTML中,这个ID对应于图表的容器元素。 3. **数据源(Data Source)** 数据源可以是JSON字符串或XML字符串,也可以是从服务器获取的数据。`...

    fusionchart参数说明

    ### FusionChart 参数说明 本文档将详细介绍FusionChart的一些关键参数及其作用,这些参数主要针对图表的配置与显示效果进行设定。以下各项参数均来源于官方文档,并进行了中文翻译及整理。 #### 动画相关参数 - ...

    Fusionchart

    FusionCharts是一款JavaScript图表库,支持超过90种不同类型的图表,包括柱状图、饼图、线图、热力图等,以及复杂的仪表盘和地图。它提供丰富的动画效果,使数据展示更具吸引力。 2. **跨平台兼容性**: 由于...

    fusionChart配合jquery图表

    首先,FusionCharts是一款JavaScript图表库,它支持超过90种不同类型的图表,包括折线图、柱状图、饼图、甘特图等。通过简单的API调用,开发者可以轻松地将动态数据转化为引人注目的图形。在JavaEE应用中,...

    Fusionchart 包

    这个名为“Fusionchart 包”的压缩文件包含了FusionCharts XT的评估版,允许用户在自己的项目中试用其功能,以决定是否进行商业应用。 FusionCharts XT的核心特性包括: 1. **丰富的图表类型**:它提供了超过90种...

    FusionChart_Demo

    FusionCharts提供了丰富的API和配置选项,允许你自定义图表的颜色、样式、动画效果、工具提示、交互行为等。例如,你可以设置图表的背景颜色、调整数据标签的样式、添加点击事件监听器等。 **图表的更新和响应式...

    Ext-Fusionchart

    FusionCharts XT是一个JavaScript图表库,支持35+不同类型的图表,如柱状图、线图、饼图等,并且具有动画效果、多数据源支持和丰富的API。它使得开发者能轻松地在网页上展示复杂的数据可视化。 3. **整合过程**: ...

    FusionChart实现的动态统计图

    4. **自定义**:可以自定义图表的颜色、样式、动画效果,甚至可以添加自己的图标和图像。 5. **API**:FusionCharts提供丰富的API和方法,允许开发者控制图表的行为,如刷新图表、获取图表数据等。 6. **兼容性**:...

    FusionChart资料

    - FusionCharts提供丰富的自定义选项,包括颜色、字体、标签、工具提示、动画效果等。 - 通过设置`chart`对象的属性,可以调整图表的全局配置;通过设置`dataset`对象的属性,可以控制每个数据系列的样式。 5. **...

    fusionchart 应用Servlet应用实例

    FusionCharts提供了多种图表类型,如柱状图、饼图、线图、地图等,支持自定义颜色、样式和动画效果。其核心原理是利用JavaScript和HTML5来渲染图表,通过JSON或XML格式的数据源来填充图表内容。 2. **Servlet基础*...

    fusionchart参数

    - **defaultAnimation**: 是否关闭默认动画效果,允许用户自定义动画效果。 ##### 2. 样式与外观 - **palette**: 设置图表的内置样式,共有五种选择。 - **paletteColors**: 允许自定义图表元素的颜色,如果提供的...

    fusionchart 属性

    - **animation="1/0"**:控制柱形图的显示是否带有动画效果。 #### 字体属性 - **baseFont="FontName"**:设置图表内部文本的字体样式。 - **baseFontSize="FontSize"**:设置图表内部文本的字体大小。 - **...

Global site tag (gtag.js) - Google Analytics