- 浏览: 35385 次
- 性别:
- 来自: 济南
最新评论
-
zhouxueliang:
可以定义到xml文件中,通过访问xml文件的方式实现。也可以定 ...
FusionCharts背景 -
jeffrey9061:
想问一下,是在xml里面写这些语句,还是在展示页写呢、
FusionCharts背景 -
shanwei0409:
你好,如何在页面内动态的加载多个chart
一个页面多个chart
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,你会看到,列的动画在开始很快(增速很快),但在最后一部分的动画速度很慢.
你可以使用上述任何方法进行动画样式定义
使用动画样式,你可以为图表上的每一个对象使用动画效果。您可以自定义动画并将它应用到图表的各种对象。
每个图表对象有一个动画支持属性列表,可以通过动画样式设置。在我们通过通话样式设置属性之前,让我们快速看一下动画样式属性。
动画样式可以帮助你为对象的下列属性实现动画效果:
属性
描述
_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 API 属性翻译
2011-03-11 10:42 2697Chart 对象 Object Name Descriptio ... -
FusionCharts部分详细参数
2011-03-03 22:05 2544从本节起,我们详细介绍每种图表的详细参数和使用方法,我们从2D ... -
FusionCharts背景
2011-03-03 22:03 1888在后面的几节中,我将会采用实例的方法,以一个一个的小问题为主线 ... -
动画效果
2011-03-03 15:22 860我们还是使用前面例子的代码 代码 1 <chart ... -
模糊样式类型
2011-03-03 15:21 805模糊样式类型 是最简单的样式类型,可以帮助你对任何图表对象实现 ... -
斜面样式类型
2011-03-03 15:20 850如果你想为图表的任何 ... -
发光样式类型属性
2011-03-03 15:19 901The 发光样式类型 让你对任何图表对象应用发光的轮廓。它具有 ... -
发光样式类型
2011-03-03 15:19 694发光样式类型 The 发光样式类型 让你对任何图表对象应用 ... -
FusionCharts样式
2011-03-03 15:17 1546正如你已经知道,使用字体样式类型,您可以控制所有图表上的文本的 ... -
FusionChart新特性
2011-03-03 15:15 1520FusionCharts v3 比以前的版本拥有大量的新的 功 ... -
透明chart
2011-03-03 15:12 1147上面的例子我们已经可 ... -
setDataXMl
2011-03-03 15:10 1037在前面的例子中,我们使用了dataURL方法提供数据给Fusi ... -
一个页面多个chart
2011-03-03 15:08 1398FusionCharts可以在一个页 ... -
转换成饼图
2011-03-03 15:08 964在上一个例子(我的第一个图表), 我们创造了一个柱形图来摘要显 ... -
FusionChart第一个图表
2011-03-03 15:07 1347在这里,我们将共同创建第一个图表。对于一个良好的开端,我们将创 ... -
FusionCharts嵌入页面的两种方式
2011-03-03 15:03 1195一:直接的HTML代码(如下所示)来嵌入图表: <htm ...
相关推荐
标题"FusionChart"指的是一个流行的JavaScript图表库,用于在网页上创建交互式、美观的数据可视化效果。这个库广泛应用于各种数据分析、报告和仪表板场景,让数据以图形化的方式直观呈现,便于理解和解读。 ...
"Fusionchart.js"是FusionCharts的核心JavaScript库文件,它包含了大量的代码来处理图表的渲染、动画效果以及与用户的交互功能。这个压缩包很可能是FusionCharts的基础组件集合,用于快速构建具有视觉吸引力的数据...
Flash FusionCharts是一款功能强大的图表库,它允许开发者创建交互式的、动画效果丰富的饼形图和其他类型的图表。在这个特定的压缩包中,包含的是FusionCharts用于网页的饼形图控件,提供了7种不同的样式,以满足...
6. **自定义样式和主题**:FusionCharts提供了预设的主题和样式,同时也允许你自定义颜色、字体、边框等,以适应你的品牌和设计。 7. **兼容性和跨平台**:FusionCharts不仅支持所有主流的现代浏览器,还通过HTML5...
3. **自定义选项**:FusionCharts提供了大量的自定义选项,允许开发者调整颜色、字体、动画效果、数据标签等,以实现独特的视觉风格。 4. **多语言支持**:支持多种语言,方便全球化的项目使用。 5. **数据源兼容...
SWF是Adobe Flash Player播放的文件格式,用于在网页上显示动画和交互式内容;而SWC是Flex编译后的库文件,可以直接在Flex项目中导入,简化开发过程。 商业版的FusionCharts Flex包括以下关键组件和功能: 1. **...
每个FusionChart实例都需要一个唯一的ID,这由`chart.id`属性指定。在HTML中,这个ID对应于图表的容器元素。 3. **数据源(Data Source)** 数据源可以是JSON字符串或XML字符串,也可以是从服务器获取的数据。`...
### FusionChart 参数说明 本文档将详细介绍FusionChart的一些关键参数及其作用,这些参数主要针对图表的配置与显示效果进行设定。以下各项参数均来源于官方文档,并进行了中文翻译及整理。 #### 动画相关参数 - ...
FusionCharts是一款JavaScript图表库,支持超过90种不同类型的图表,包括柱状图、饼图、线图、热力图等,以及复杂的仪表盘和地图。它提供丰富的动画效果,使数据展示更具吸引力。 2. **跨平台兼容性**: 由于...
首先,FusionCharts是一款JavaScript图表库,它支持超过90种不同类型的图表,包括折线图、柱状图、饼图、甘特图等。通过简单的API调用,开发者可以轻松地将动态数据转化为引人注目的图形。在JavaEE应用中,...
这个名为“Fusionchart 包”的压缩文件包含了FusionCharts XT的评估版,允许用户在自己的项目中试用其功能,以决定是否进行商业应用。 FusionCharts XT的核心特性包括: 1. **丰富的图表类型**:它提供了超过90种...
FusionCharts提供了丰富的API和配置选项,允许你自定义图表的颜色、样式、动画效果、工具提示、交互行为等。例如,你可以设置图表的背景颜色、调整数据标签的样式、添加点击事件监听器等。 **图表的更新和响应式...
FusionCharts XT是一个JavaScript图表库,支持35+不同类型的图表,如柱状图、线图、饼图等,并且具有动画效果、多数据源支持和丰富的API。它使得开发者能轻松地在网页上展示复杂的数据可视化。 3. **整合过程**: ...
4. **自定义**:可以自定义图表的颜色、样式、动画效果,甚至可以添加自己的图标和图像。 5. **API**:FusionCharts提供丰富的API和方法,允许开发者控制图表的行为,如刷新图表、获取图表数据等。 6. **兼容性**:...
- FusionCharts提供丰富的自定义选项,包括颜色、字体、标签、工具提示、动画效果等。 - 通过设置`chart`对象的属性,可以调整图表的全局配置;通过设置`dataset`对象的属性,可以控制每个数据系列的样式。 5. **...
FusionCharts提供了多种图表类型,如柱状图、饼图、线图、地图等,支持自定义颜色、样式和动画效果。其核心原理是利用JavaScript和HTML5来渲染图表,通过JSON或XML格式的数据源来填充图表内容。 2. **Servlet基础*...
- **defaultAnimation**: 是否关闭默认动画效果,允许用户自定义动画效果。 ##### 2. 样式与外观 - **palette**: 设置图表的内置样式,共有五种选择。 - **paletteColors**: 允许自定义图表元素的颜色,如果提供的...
- **animation="1/0"**:控制柱形图的显示是否带有动画效果。 #### 字体属性 - **baseFont="FontName"**:设置图表内部文本的字体样式。 - **baseFontSize="FontSize"**:设置图表内部文本的字体大小。 - **...