Chart配置——Chart标题
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：定义和应用样式的元素
definitionrotate属性：定义样式的元素
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）效果。如下的代码为标题添加反弹（B
ounce）效果。代码如下：
<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>
本章完…….

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。