FusionCharts Free (FCF) Sytles
FusionCharts v3的引入样式,帮助您为各种各样的图表对象设置字体,效果和动画。样式提供一种简单的机制,利用这种机制您就可以轻松地控制图表的可视化布局。
STYLE Element
FusionCharts v3 introduces Styles to help you apply font, effects and animations to various objects of the chart. Styles lends a simple mechanism, using which you can easily control the visual layout of charts.
如何使用Styles
使用Styles,只需要做这些:
- 在xml数据文档中定义自己的样式属性。
- 将你定义好的样式与定义好的图表对象联系起来。
例如:
<chart> <!-- Your data here --> <styles>
|
正如上面你看到的,所有与样式相关的元素的属性都出现在父元素<styles>下。它可以有效的包含你的所有的与样式相关的xml代码。FusionCharts不会识别任何定义在父元素<styles>之外的样式定义。
<styles>元素的子元素是<definition>和<application>元素。就像名字所暗示的,<definition>元素包含你为图表自定义的样式,而在<application>元素下,你可以将你自定义的样式应用到不同的图表对象。
每一个样式必须使用<style>元素定义。多个样式元素可以逐个放置在<definition>元素下。因此,如果你打算定义五个自定义样式,你需要创建五个<style>元素。
根据你要定义的样式类型,每个<style>元素会有各种各样的属性。在上面的例子中,每一个<style>元素都有自己的属性集。不过,下面的两个属性通用的:
1、 name
2、 type
即样式名称和样式类型,这两个属性对任何样式定义都是必须存在的。
样式名称
格式: name='stylename'
样式名称的命名没有任何限制,除了以下两点:
- 样式名称只能包含字母和数字,不可以使用标点符号(包括下划线)。
- 样式名称必须唯一,也就是说,两个样式定义不能用相同的名字,否则会造成冲突。
样式类型
格式: type='parameter'
每一个样式都要定义自己属于哪种类型。类型指定了该样式将做什么。FusionCharts v3支持六种样式类型:
- Font
- Animation
- Shadow
- Glow
- Blur
- Bevel
即:
字体 | 字体样式让你控制图表上的所有文字的显示属性。使用字体,你可以为图表上单独的文本元素设置字体类型、颜色,大小,背景颜色,字体间隔等 |
动画 | 动画样式使你可以为图表的不同元素设置自定义的动画效果。默认的,FusionCharts 只动画数据图例(如柱形图,线,区域图等)。然而,可以在XML中为其他的图表对象(如说明文字、标题、值等)定义自定义的动画效果。每一个图表对象都可以有多个动画属性(如x,y,xscale,ycale,vcale,alpha等),并且每一种效果都可以有自己的持续时间。 |
阴影 | 使用这种样式类型的可配置属性,可为任何图表对象应用阴影效果。 |
发光 | 发光样式类型为图表对象设置发光效果 |
斜面 | 为图表对象设置斜面效果 |
模糊 | 模糊样式类型为图表对象创建模糊效果。模糊的淡化程度和数量可配置。 |
其他属性
<style>元素的其他属性根据其类型的不同而变化。例如,在font 类型的样式中,你可以使用face,size,color,bold等属性,但是你不可以将这些属性用到animation类型的样式中,因为这些参数对animation类型的样式来说没有任何意义。
应用自定义样式到图表对象
要应用你的自定义样式,首先要确定图表中存在哪些对象。例如,二维单系列柱形图表有以下对象:
Object Name | Description | Features Supported | Animation Parameters Supported |
BACKGROUND | BACKGROUND refers to the entire background of the chart. | · Animation · Shadow · Glow · Bevel · Blur | · _alpha · _x · _y · _xScale · _yScale |
CANVAS | In 2D Charts, CANVAS refers to the area in which the actual chart is plotted. It is represented by a bounded rectangle. In 3D charts, it refers to the 3D base on which the columns are built. | · Animation · Shadow · Glow · Bevel · Blur | · _alpha · _x · _y · _xScale · _yScale |
CAPTION | CAPTION refers to the heading of the chart. | · Animation · Font · Shadow · Glow · Bevel · Blur | · _alpha · _x · _y |
DATALABELS | DATALABELS refer to the x-axis labels of the data. | · Animation · Font · Shadow · Glow · Bevel · Blur | · _alpha · _x · _y |
DATAPLOT | DATAPLOT refers to the actual plot of the chart. For example, in Column 2D chart, columns are referred to as DATAPLOT. In Pie chart, it's the pies. In Bubble chart, it's the bubbles and so on. | · Animation · Shadow · Glow · Bevel · Blur | · _alpha · _x · _y · _xScale · _yScale |
DATAVALUES | DATAVALUES refer to the plot values i.e., value of each data (line, column, bar, pie etc.), which is displayed beside the data plot. | · Animation · Font · Shadow · Glow · Bevel · Blur | · _alpha · _x · _y |
DIVLINES | DIVLINES are horizontal or vertical lines running through the canvas. Each divisional line signifes a smaller unit of the entire axis thus aiding the users in interpreting the chart. | · Animation · Shadow · Glow · Bevel · Blur | · _alpha · _y · _yScale |
HGRID | HGRID refers to alternate color bands between two successive horizontal divisional lines. | · Animation · Shadow · Glow · Bevel · Blur | · _alpha · _y · _xScale · _yScale |
SUBCAPTION | SUBCAPTION refers to the sub-heading of the chart. | · Animation · Font · Shadow · Glow · Bevel · Blur | · _alpha · _x · _y |
TOOLTIP | TOOLTIP refers to the tool tip shown when mouse is hovered over the data plots. | · Font |
|
TRENDLINES | TRENDLINES refer to horizontal/vertical lines spanning the chart canvas which aid in interpretation of data with respect to some pre-determined value. | · Animation · Shadow · Glow · Bevel · Blur | · _alpha · _y · _xScale · _yScale |
TRENDVALUES | TRENDVALUES refer to the display values of trend-lines (if any). | · Animation · Font · Shadow · Glow · Bevel · Blur | · _alpha · _x · _y |
VLINES | VLINES are vertical separator lines that help you separate blocks of data. These lines run through the height of the chart, thereby segregating data into different blocks. In case of bar charts, they are horizontal and run through the width of chart. | · Animation · Shadow · Glow · Bevel · Blur | · _alpha · _x · _y · _yScale |
XAXISNAME | XAXISNAME refers to the x-axis title of the chart. | · Animation · Font · Shadow · Glow · Bevel · Blur | · _alpha · _x · _y |
YAXISNAME | YAXISNAME refers to the y-axis title of the chart. | · Animation · Font · Shadow · Glow · Bevel · Blur | · _alpha · _x · _y |
YAXISVALUES | YAXISVALUES refers to the limit values or divisional line values, which are displayed along the y-axis of the chart. | · Animation · Font · Shadow · Glow · Bevel · Blur | · _alpha · _x · _y · _r |
下面的xml是将样式应用到不同的图表对象:
<application> <apply toObject='Caption' styles='MyFirstFontStyle,MyFirstShadow' /> <apply toObject='Canvas' styles='MyFirstAnimationStyle' /> <apply toObject='DataPlot' styles='MyFirstShadow' /> </application> |
每一个<apply>元素可以将多个样式应用到一个图表对象中。例如,在上面的代码中,首先把MyFirstFontStyle 字体样式应用到标题(caption),然后又将MyFirstShadow 阴影样式也应用到了标题(caption)。对一个图表对象应用多个样式,我们用逗号(英文)分割各个样式名称。
格式: <apply toObject='Object' styles='Style1, Style2, Style3 ...' />
确定以下:
- 将多个样式应用到一个图表对象,要使用逗号(英文)分割样式名。
- 将一个样式应用到多个图表对象,需要为每一个对象定义<apply>元素,并且指定样式。例如:
<apply toObject='Caption' styles='MyFirstShadow' /> |
- 不可以用逗号分割多个图表对象,然后指定一个样式。例如下面的代码是无效的:
<apply toObject='Caption,DataPlot' styles='MyFirstShadow' /> |
各种样式的参数
l Font 字体
Attribute | Brief Description | Sample or Valid values |
font | Sets the font family for the text. | Verdana, Arial .. |
size | Specifies the font size | 10, 12 .. |
Color | Sets the font color, should be hex color code without # | FF0000, FFFFDD |
Bold | Flag indicating whether font should be bold or not | 1 for Yes, 0 for No |
Italic | Flag indicating whether font should be italics or not | 1 for Yes, 0 for No |
Underline | Flag indicating whether font should be underlined | 1 for Yes, 0 for No |
bgColor | Sets the background color for a text box, should be hex color code without # | FF0000, FFFFDD |
borderColor | If you need a border around your text, you can use this parameter |
|
isHTML | Helps you set whether the text should be rendered as HTML or plain text. | isHTML ='1' or isHTML ='0'
|
leftMargin | The left margin of the text, in points |
|
letterSpacing | The amount of space that is uniformly distributed between characters of the text |
|
当在你的文本中有HTML字符时,isHTML属性非常有用。例如,’< 5 ’ or ‘> 5’。默认的,FusionCharts将所有的文本展现为HTML,所以像文本’< 5’ 将会作为未关闭的HTML标签对待。
l animation动画
Attribute | Description |
param | This attribute lets you specify the property of chart object which you want to animate e.g., _x, _y, _xscale etc |
start | The start value of animation e.g., if you're animating the data plot for fade in alpha effect, the start value of alpha would be 0 |
Duration | Using this, you can control the duration of animation in seconds |
Easing | This attribute lets you specify the pattern of animation easing. Valid values are "elastic", "bounce", "regular", "strong" or "none". |
除了Easing属性,上面的所有属性对动画样式都是必须的。
param取值范围如下:
Property | Description |
_x | Helps animate the x position of the given chart object |
_y | Helps animate the y position of the given chart object. |
_xScale | Using this property, you can animate the x-scale (horizontal scale) of the given chart object |
_yScale | Like xScale, this animates the y-scale. |
_alpha | Helps alpha transition (transparency fading) animation effect |
_rotation | Helps you animate the pies and doughnuts in circular motion |
注意:并不是所有的图表对象都支持上面的属性。
l Start 取值中的宏
通常,你可能会想把动画中的x/y的开始位置指定为图表画布的起始位置或者中间位置,也可能结束位置。例如,如果你想把div lines的y属性设置成从画布的顶端到各自的最后位置的动画效果,在最终确定画布的y的起始位置之前,你就需要试验很多的Y值。这是因为画布的开始位置在运行时是动态计算的,而且受很多因素的影响(比如标题,副标题,图表的内边距,外边距等)。
FusionCharts v3 引入了宏来帮助用户摆脱这些麻烦。宏是在运行时展现数值的预定的变量。例如,$canvasStartY 代表画布的起始位置,它只展示运行时的值。因此,如果你需要,如果你想把div lines的y属性设置成从画布的顶端到各自的最后位置的动画效果,你只要做这些:
<style name='DivYAnim' type='ANIMATION' duration='1' start='$canvasStartY' param="_y" />
FusionCharts在运行时会自动为这个宏计算并赋值。因此,现在即使你改变图表的大小或者选择显示/隐藏标题或者改变页边距,也不必再去监视画布Y的位置。
FusionCharts v3 支持以下动画样式的宏值:
$chartStartX | Chart Start X Position. It's 0 if you're loading the chart in an HTML page. However, if you're loading the chart in another Flash movie, it will take the given X position |
$chartStartY | Chart Start Y Position. It's 0 if you're loading the chart in an HTML page. However, if you're loading the chart in another Flash movie, it will take the given Y position. |
$chartWidth | Width of the chart |
$chartHeight | Height of the chart |
$chartEndX | End X Position of the chart. Same as width of chart if you're loading the chart in an HTML page |
$chartEndY | End Y Position of the chart. Same as height of chart if you're loading the chart in an HTML page. |
$chartCenterX | Center X Position of the chart |
$chartCenterY | Center Y Position of the chart. |
$canvasStartX | Canvas Start X Position (from left) i.e., x co-ordinate of left side of the canvas |
$canvasStartY | Canvas Start Y Position (from top) i.e., y co-ordinate of the top of canvas |
$canvasWidth | Width of canvas |
$canvasHeight | Height of canvas |
$canvasEndX | End X Position of Canvas i.e., x co-ordinate of right side of canvas |
$canvasEndY | End Y Position of Canvas i.e., y co-ordinate of bottom of canvas |
$canvasCenterX | Center X Position of canvas |
$canvasCenterY | Center Y Position of canvas |
注意:宏是大小写敏感的。
创建宏表达式
在使用宏时,您还可以添加数字 (整数) 值到预定义的宏,以抵消动画。例如,如果你想使div lines 从画布的y的开始位置正上方10像素开始动画,你可以使用:
<style name='DivYAnim' type='ANIMATION' duration='1' start='$canvasStartY-10' param="_y" />
或者,你想从画布Y的开始位置正下方10像素开始,你可以使用:
<style name='DivYAnim' type='ANIMATION' duration='1' start='$canvasStartY+10' param="_y" />
目前,FusionCharts 仅允许在宏运算中使用加减运算符。
l 为动画样式指定渐变效果。
渐变是指在动画中的逐渐加速和逐渐减速。例如,图表对象可以在动画开始时逐渐加快速度,而在动画结束前慢慢降低速度。有很多不同的相应地改变渐变动画的加速和减速方程。渐变使动画表现的更加生动。
FusionCharts v3 支持以下的几种渐变方法:
Methods | Description |
Elastic | Adds an elastic effect that falls outside the transition range at one or both ends. The amount of elasticity is unaffected by the duration |
Bounce | Adds a bouncing effect within the transition range at one or both ends. The number of bounces relates to the duration—longer durations produce more bounces |
Strong | Adds slower movement at one or both ends. This effect is similar to Regular easing, but it's more pronounced |
Regular | Adds slower movement at one or both ends. This feature enables you to add a speeding-up effect, a slowing-down effect, or both. |
None | Adds an equal movement from start to end without effects, slowing, or speeding up. This transition is also referred to as a linear transition. |
l 阴影样式类型
阴影样式类型可以为任何一种图表对象设置阴影效果。它提供以下可配置属性:
Properties | Description |
Distance | The offset distance for the shadow (in pixels). The default value is 4 |
Angle | The angle of the shadow. Valid values are 0 to 360˚. The default value is 45 |
Color | The color of the shadow in hex code (without #). The default value is CCCCCC |
Alpha | The alpha transparency value for the shadow color. Valid values are 0 to 100. For example, 25 sets a transparency value of 25%. |
blurX | The amount of horizontal blur. Valid values are 0 to 255. The default value is 4. Values that are a power of 2 (such as 2, 4, 8, 16 and 32) are optimized to render more quickly than other values. |
blurY | The amount of vertical blur. Valid values are 0 to 255. The default value is 4. Values that are a power of 2 (such as 2, 4, 8, 16 and 32) are optimized to render more quickly than other values. |
Strength | The strength of the imprint or spread. The higher the value, the more color is imprinted and the stronger the contrast between the shadow and the background. Valid values are from 0 to 255. The default is 1. |
Quality | The number of times to apply the shadow effect. Valid values are 0 to 15. The default value is 1, which is equivalent to low quality. A value of 2 is medium quality, and a value of 3 is high quality. Shadow with lower values are rendered |
l 发光(Glow)样式类型
发光样式类型可以围绕任何一种图表对象应用发光效果。它有以下可配置属性:
Properties | Description |
Color | The color of the glow in hex code (without #). The default value is FF0000 |
Alpha | The alpha transparency value for the shadow color. Valid values are 0 to 100. For example, 25 sets a transparency value of 25% |
blurX | The amount of horizontal blur. Valid values are 0 to 255. The default value is 8. Values that are a power of 2 (such as 2, 4, 8, 16 and 32) are optimized to render more quickly than other values |
blurY | The amount of vertical blur. Valid values are 0 to 255. The default value is 8. Values that are a power of 2 (such as 2, 4, 8, 16 and 32) are optimized to render more quickly than other values |
Strength | The strength of the imprint or spread. The higher the value, the more color is imprinted and the stronger the contrast between the glow and the background. Valid values are 0 to 255. The default is 2 |
Quality | The number of times to apply the effect. Valid values are 0 to 15. The default value is 1, which is equivalent to low quality. A value of 2 is medium quality, and a value of 3 is high quality. Glows with lower values are rendered quicker. |
l 斜面样式类型
如果你需要为图表对象创建斜面效果,你就需要使用斜面样式类型以及它的以下属性:
Properties | Description |
Angle | The angle of the bevel. Valid values are from 0 to 360 degrees. The default value is 45 |
Distance | The offset distance of the bevel. Valid values are in pixels (floating point). The default value is 4. |
shadowColor | The shadow color of the bevel. Valid values are in hexadecimal format RRGGBB (without #). The default value is 000000 |
shadowAlpha | The alpha transparency value of the shadow color. This value is specified as a normalized value from 0 to 100. For example, 25 set a transparency value of 25%. The default value is 50. |
highlightColor | The highlight color of the bevel. Valid values are in hexadecimal format RRGGBB (without #). The default value is FFFFFF |
highlightAlpha | The alpha transparency value of the highlight color. The value is specified as a normalized value from 0 to 100. For example, 25 sets a transparency value of 25%. The default value is 50. |
blurX | The amount of horizontal blur in pixels. Valid values are from 0 to 255 (floating point). The default value is 4. Values that are a power of 2 (such as 2, 4, 8, 16, and 32) are optimized to render more quickly than other values |
blurY | The amount of vertical blur in pixels. Valid values are from 0 to 255 (floating point). The default value is 4. Values that are a power of 2 (such as 2, 4, 8, 16, and 32) are optimized to render more quickly than other values |
Strength | The strength of the imprint or spread. Valid values are from 0 to 255. The larger the value, the more color is imprinted and the stronger the contrast between the bevel and the background. The default value is 1 |
Quality | The number of times to apply the filter. The default value is 1, which is equivalent to low quality. A value of 2 is medium quality, and a value of 3 is high quality. Filters with lower values are rendered more quickly |
l 模糊样式类型
模糊样式类型是最简单的样式类型,主要用来为图表对象设置模糊的视觉效果。它有以下属性:
Properties | Description |
blurX | The amount to blur horizontally. Valid values are from 0 to 255. The default value is 4. Values that are a power of 2 (such as 2, 4, 8, 16 and 32) are optimized to render quicker than other values |
blurY | The amount to blur vertically |
quality | The number of times to apply the filter. The default value is 1, which is equivalent to low quality. A value of 2 is medium quality, and a value of 3 is high quality and approximates a Gaussian blur |