FusionCharts 允許你為chart配置標(biāo)題、子標(biāo)題、x軸標(biāo)題和y軸標(biāo)題,可以為它們指定字體、樣式和動(dòng)畫效果等。
Chart主標(biāo)題
Chart的caption屬性設(shè)置主標(biāo)題。代碼如下:
<chart caption='Monthly Summary' ...>
顯示效果如下:
需要將標(biāo)題和子標(biāo)題對其,可以使用styles屬性來設(shè)置樣式。代碼如下:
<chart caption='Quarterly Sales Summary' subcaption='Figures in $' xAxis='Quarter' yAxisName='Sales' outCnvBaseFont='Arial' outCnvBaseFontSize='12' outCnvBaseFontColor='333333'>
<set label='Quarter 1' value='420500' />
<set label='Quarter 2' value='295400' />
<set label='Quarter 3' value='523400' />
<set label='Quarter 4' value='465400' />
<styles>
<definition>
<style name='myCaptionFont' type='font' align='left'/>
</definition>
<application>
<apply toObject='Caption' styles='myCaptionFont' />
<apply toObject='SubCaption' styles='myCaptionFont' />
</application>
</styles>
</chart>
配置說明:
styles:定義和應(yīng)用樣式的元素
definition:定義樣式的元素
application:應(yīng)用樣式的元素
toObject:應(yīng)用到那個(gè)chart屬性
styles的值應(yīng)用definition中定義的樣式名
顯示效果如下:
Chart副標(biāo)題
同樣,可以使用subCaption為chart設(shè)置副標(biāo)題:代碼如下:
<chart ... subCaption='Figures in USD' ...>
顯示效果如下:
X軸配置
可按如下代碼來配置chart的x軸名稱:
<chart ... xAxisName='Month' ...>
顯示效果如下:
y軸配置
可按如下代碼來配置chart的y軸名稱:
<chart ... yAxisName='Revenue' ..>
Y軸名稱默認(rèn)以旋轉(zhuǎn)(縱向字母排列)的形式顯示。不過,可用將y軸的文字設(shè)置為水平顯示。代碼如下:
<chart rotateYAxisName='0' ..>
顯示效果如下:
Y軸水平顯示后,可設(shè)置文字的顯示寬度。代碼如下:
<chart ... rotateYAxisName='0' yAxisNameWidth='40' ...>
字體屬性配置
為所有標(biāo)題應(yīng)用同一個(gè)字體
如果希望為整個(gè)畫布(chart區(qū)域)設(shè)置同一種字體,你可以使用outCnvBaseFont 屬性組。這些屬性將應(yīng)用到“標(biāo)題”、“副標(biāo)題”、“x軸名稱”、“y軸名稱”、“數(shù)據(jù)標(biāo)簽”等。
outCnvBaseFont 屬性組包含如下內(nèi)容:
屬性名 |
描述 |
示例 |
outCnvbaseFont |
字體樣式 |
outCnvBaseFont='Verdana' |
outCnvbaseFontSize |
字體大小 |
outCnvbaseFontSize='10' |
outCnvbaseFontColor |
字體顏色,如: 000000 或 009933 |
outCnvbaseFontColor='009933' |
示例代碼如下:
<chart caption='Quarterly Sales Summary' subcaption='Figures in $' xAxis='Quarter' yAxisName='Sales' outCnvBaseFont='Arial' outCnvBaseFontSize='12' outCnvBaseFontColor='333333'>
<set label='Quarter 1' value='420500' />
<set label='Quarter 2' value='295400' />
<set label='Quarter 3' value='523400' />
<set label='Quarter 4' value='465400' />
</chart>
顯示效果如下:
使用styles為指定標(biāo)題設(shè)置樣式
如果你不想為所有的標(biāo)題指定同一個(gè)樣式,可以使用styles為某標(biāo)題指定特定樣式。通過它,可以很好的控制字體樣式。你可以使用加粗、傾斜、下劃線或指定邊框和背景。
下面的例子我們將為標(biāo)題和副標(biāo)題使用不同的樣式。代碼如下:
<chart caption='Quarterly Sales Summary' subcaption='Figures in $' xAxisName='Quarter' yAxisName='Sales'>
<set label='Quarter 1' value='420500' />
<set label='Quarter 2' value='295400' />
<set label='Quarter 3' value='523400' />
<set label='Quarter 4' value='465400' />
<styles>
<definition>
<style name='myCaptionFont' type='font' font='Arial' size='14' color='666666' bold='1' underline='1'/>
<style name='mySubCaptionFont' type='font' font='Arial' size='12' color='666666' italic='1'/>
<style name='myAxisTitlesFont' type='font' font='Arial' size='11' bold='1'/>
</definition>
<application>
<apply toObject='Caption' styles='myCaptionFont' />
<apply toObject='SubCaption' styles='mySubCaptionFont' />
<apply toObject='XAxisName' styles='myAxisTitlesFont' />
</application>
</styles>
</chart>
顯示效果如下:
注意:不能為縱向顯示的y軸標(biāo)題指定字體樣式,它采用內(nèi)嵌樣式。
應(yīng)用特效
你也可以用styles為標(biāo)題添加特效(陰影、模糊、鋸齒和發(fā)光等)。代碼如下:
<chart caption='Quarterly Sales Summary' subcaption='Figures in $' xAxisName='Quarter' yAxisName='Sales'>
<set label='Quarter 1' value='420500' />
<set label='Quarter 2' value='295400' />
<set label='Quarter 3' value='523400' />
<set label='Quarter 4' value='465400' />
<styles>
<definition>
<style name='myCaptionFont' type='font' font='Arial' size='14' color='666666' bold='1' underline='1'/>
<style name='myShadow' type='Shadow' color='999999' angle='45'/>
<style name='myGlow' type='Glow' color='FF5904'/>
</definition>
<application>
<apply toObject='Caption' styles='myCaptionFont,myShadow' />
<apply toObject='SubCaption' styles='myShadow' />
<apply toObject='XAxisName' styles='myGlow' />
<apply toObject='YAxisName' styles='myGlow' />
</application>
</styles>
</chart>
顯示效果如下:
在上面的chart中,我們?yōu)?ldquo;標(biāo)題”、和“副標(biāo)題”應(yīng)用的陰影效果,為x、y軸名稱應(yīng)用了發(fā)光效果。
為標(biāo)題添加動(dòng)畫效果
你可以使用styles屬性為標(biāo)題添加動(dòng)畫(animation)效果。如下的代碼為標(biāo)題添加反彈(Bounce)效果。代碼如下:
<chart caption='Quarterly Sales Summary' subcaption='Figures in $' xAxisName='Quarter' yAxisName='Sales'>
<set label='Quarter 1' value='420500' />
<set label='Quarter 2' value='295400' />
<set label='Quarter 3' value='523400' />
<set label='Quarter 4' value='465400' />
<styles>
<definition>
<style name='myCaptionAnim' type='animation' param='_y' easing='Bounce' start='0' duration='1' />
</definition>
<application>
<apply toObject='Caption' styles='myCaptionAnim' />
</application>
</styles>
</chart>
標(biāo)簽:
本站文章除注明轉(zhuǎn)載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載,但請務(wù)必注明出處、不得修改原文相關(guān)鏈接,如果存在內(nèi)容上的異議請郵件反饋至chenjj@fc6vip.cn
文章轉(zhuǎn)載自:胡杰的博客