FusionCharts 允許你為chart配置標題、子標題、x軸標題和y軸標題,可以為它們指定字體、樣式和動畫效果等。
Chart主標題
Chart的caption屬性設置主標題。代碼如下:
<chart caption='Monthly Summary' ...>
顯示效果如下:
需要將標題和子標題對其,可以使用styles屬性來設置樣式。代碼如下:
<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:定義和應用樣式的元素
definition:定義樣式的元素
application:應用樣式的元素
toObject:應用到那個chart屬性
styles的值應用definition中定義的樣式名
顯示效果如下:
Chart副標題
同樣,可以使用subCaption為chart設置副標題:代碼如下:
<chart ... subCaption='Figures in USD' ...>
顯示效果如下:
X軸配置
可按如下代碼來配置chart的x軸名稱:
<chart ... xAxisName='Month' ...>
顯示效果如下:
y軸配置
可按如下代碼來配置chart的y軸名稱:
<chart ... yAxisName='Revenue' ..>
Y軸名稱默認以旋轉(縱向字母排列)的形式顯示。不過,可用將y軸的文字設置為水平顯示。代碼如下:
<chart rotateYAxisName='0' ..>
顯示效果如下:
Y軸水平顯示后,可設置文字的顯示寬度。代碼如下:
<chart ... rotateYAxisName='0' yAxisNameWidth='40' ...>
字體屬性配置
為所有標題應用同一個字體
如果希望為整個畫布(chart區域)設置同一種字體,你可以使用outCnvBaseFont 屬性組。這些屬性將應用到“標題”、“副標題”、“x軸名稱”、“y軸名稱”、“數據標簽”等。
outCnvBaseFont 屬性組包含如下內容:
屬性名 |
描述 |
示例 |
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為指定標題設置樣式
如果你不想為所有的標題指定同一個樣式,可以使用styles為某標題指定特定樣式。通過它,可以很好的控制字體樣式。你可以使用加粗、傾斜、下劃線或指定邊框和背景。
下面的例子我們將為標題和副標題使用不同的樣式。代碼如下:
<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軸標題指定字體樣式,它采用內嵌樣式。
應用特效
你也可以用styles為標題添加特效(陰影、模糊、鋸齒和發光等)。代碼如下:
<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中,我們為“標題”、和“副標題”應用的陰影效果,為x、y軸名稱應用了發光效果。
為標題添加動畫效果
你可以使用styles屬性為標題添加動畫(animation)效果。如下的代碼為標題添加反彈(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>
標簽:
本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@fc6vip.cn
文章轉載自:胡杰的博客