彩票走势图

FusionCharts图表的标题配置

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

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

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

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 属性组。这些属性将应用到&ldquo;标题”、“副标题”、“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@pclwef.cn

文章转载自:胡杰的博客

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP