FusionCharts完全入門手冊13

2022-04-30 12:30:10 字數 3255 閱讀 4762

我們討論完fc3的樣式後,返回頭看看我們前面第4節說到的問題,我們如何實現自定義背景動畫和自定義動畫呢,看到這裡,系列看完文章的朋友可以很快得到答案—使用樣式,對。那接下來我們就用例項看看如何實現自定義動畫。

1.

自定義背景動畫

我們還是使用前面例子的**

**1<

chart 

caption

='月度銷售額'

xaxisname

='月度'

yaxisname

='單位(臺)'

showvalues

='0'

decimals

='0'

formatnumberscale

='0'

useroundedges

='0'

basefont

='宋體'

basefontsize

='12'

>

2<

set 

label

='一月'

value

='462'

/>

3<

set 

label

='二月'

value

='857'

/>

4<

set 

label

='三月'

value

='671'

alpha

='20'

/>

5<

set 

label

='四月'

value

='494'

/>

6<

set 

label

='五月'

value

='761'

/>

7<

set 

label

='六月'

value

='960'

/>

8在這裡,我們想要實現的效果是,讓背景漸變顯示出來。那我們需要在上面的**後面增加如下的**;

**<

styles

>

<

definition

>

<

style 

name

='testanim'

type

='animation'

duration

='1'

start

='0'

param

="_alpha"

/>

definition

>

<

>

<

toobject

='canvas'

styles

=' testanim '

/>

>

styles

>

那好,這個效果是什麼呢,就是畫布漸變顯示,時間為1秒。

那,我如果想讓背景從左側滑入,然後同時是漸變呢,**又應該怎麼寫呢?

那我們需要在定義乙個樣式,比如叫testanim2,完整的**如下

**1<

styles

>

2<

definition

>

3<

style 

name

='testanim2'

type

='animation'

duration

='1'

start

=' $canvasstartx-30 '

param

="_x"

/>

4<

style 

name

='testanim'

type

='animation'

duration

='1'

start

='0'

param

="_alpha"

/>

5definition

>

6<

>

7<

toobject

='canvas'

styles

='testanim2,testanim'

/>

8>

9styles

>

10注意這裡我們用了乙個巨集引數$canvasstartx,大家可以複習一下

2.

自定義動畫

我們除了對背景可以進行自定義動畫外,我們還可以對圖表的任何物件實施動畫效果,這裡,我們以標題為例。

**1<

styles

>

2<

definition

>

3<

style 

name

='testanim3'

type

='animation'

duration

='1'

start

='30'

param

="_x"

easing

="elastic"

/>

4definition

>

5<

>

6<

toobject

='caption'

styles

='testanim3'

/>

7>

8styles

>

9大家可以看到這裡的動畫效果是彈性的效果-- easing="elastic" 我們換個值bounce 看看**效果是什麼 easing=" bounce "因為這些是動畫效果,大家可以自行檢視。

使用動畫效果我們可以實現

xy軸移動、透明度變化、

xy軸縮放、圓周動畫以及5

種動畫型別選擇(

elastic

、bounce

、strong

、regular

、none

)等

FusionCharts完全入門手冊11

斜面樣式型別 如果你想為圖表的任何物件應用斜面效果,你需要使用下列的斜面樣式型別屬性列表 屬性描述 angle 斜面的角度。有效值從0到360,預設值是45 distance 斜面的距離.有效值是畫素 浮點 預設值是4.shadowcolor 斜面陰影顏色。有效值格式是 rrggbb 無 預設值是0...

FusionCharts完全入門手冊10

發光樣式型別 the 發光樣式型別 讓你對任何圖表物件應用發光的輪廓。它具有以下可配置的屬性 屬性描述 color 發光的十六進製制顏色 無 預設值是ff0000 alpha 發光顏色的透明度。有效值範圍是0到100,例如,25設定的是25 的透明度 blurx 水平模糊量。有效值為0到255。預設...

fusioncharts如何運用

fusioncharts是乙個很使用的網頁報表外掛程式,通過它可以滿足各種各樣的 需要而且樣式也肯酷。接下來就看看它是如何完成乙個圖表的 我用的是myeclipse所以就用的web專案做的,首先建立web專案。然後建立fusioncharts資料夾把壓縮包下js資料夾裡所有的檔案考過來。type是圖...