FusionCharts图表的标题配置

原创|其它|编辑:郝浩|2012-05-27 22:40:53.000|阅读 5758 次

概述:FusionCharts 允许你为chart配置标题、子标题、x轴标题和y轴标题,可以为它们指定字体、样式和动画效果等。

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>


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果

文章转载自:胡杰的博客

登录慧都网发表评论登录


慧都网友 2017-03-29 13:03:09.000
0

请问标题caption文字在IE浏览器显示完整,在火狐,google显示不全 怎么处理


慧都网友 2017-03-29 13:01:58.000
0

请问子


为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
相关厂商
相关产品
FusionCharts XT

50万用户首选的跨平台、跨浏览器的JavaScript/HTML图表解决方案

在线客服 在线QQ 电话咨询
400-700-1020
反馈
在线客服系统
live chat