FusionCharts Free (FCF) V3 新特性之样式（Styles）

来源：互联网发布：淘宝解封店铺是真的吗编辑：程序博客网时间：2024/05/01 19:04

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>

<styles>
      <definition>
            <style name='MyFirstFontStyle' type='font' face='Verdana' size='12' color='FF0000' bold='1' bgColor='FFFFDD' />
            <style name='MyFirstAnimationStyle' type='animation' param='_xScale' start='0' duration='2' />
            <style name='MyFirstShadow' type='Shadow' color='CCCCCC' />
      </definition>
      <application>
            <apply toObject='Caption' styles='MyFirstFontStyle,MyFirstShadow' />
            <apply toObject='Canvas' styles='MyFirstAnimationStyle' />
            <apply toObject='DataPlot' styles='MyFirstShadow' />
</application>
</styles>
</chart>

正如上面你看到的，所有与样式相关的元素的属性都出现在父元素<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等），并且每一种效果都可以有自己的持续时间。

阴影

使用这种样式类型的可配置属性，可为任何图表对象应用阴影效果。

发光

发光样式类型为图表对象设置发光效果

斜面

为图表对象设置斜面效果

模糊

模糊样式类型为图表对象创建模糊效果。模糊的淡化程度和数量可配置。

其他属性

应用自定义样式到图表对象

要应用你的自定义样式，首先要确定图表中存在哪些对象。例如，二维单系列柱形图表有以下对象：

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>元素可以将多个样式应用到一个图表对象中。例如，在上面的代码中，首先把MyFirstFontStyle 字体样式应用到标题（caption），然后又将MyFirstShadow 阴影样式也应用到了标题（caption）。对一个图表对象应用多个样式，我们用逗号（英文）分割各个样式名称。

格式: <apply toObject='Object' styles='Style1, Style2, Style3 ...' />

确定以下：

将多个样式应用到一个图表对象，要使用逗号（英文）分割样式名。
将一个样式应用到多个图表对象，需要为每一个对象定义<apply>元素，并且指定样式。例如：

不可以用逗号分割多个图表对象，然后指定一个样式。例如下面的代码是无效的：

各种样式的参数

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

Helps animate the x position of the given chart object

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属性设置成从画布的顶端到各自的最后位置的动画效果，你只要做这些：

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像素开始动画，你可以使用：

或者，你想从画布Y的开始位置正下方10像素开始，你可以使用：

目前，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