注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

星期五

明天不上班

 
 
 

日志

 
 
关于我

一个特立独行的Java程序员,比较宅,上上网,写博客,听音乐,看电影。

网易考拉推荐

使用FusionChart的渐变  

2012-03-14 19:50:29|  分类: Fusionchart |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
先看一个没有渐变效果的普通Chart。(Column2D Chart FusionChart Version:3.2
<chart yAxisName='Sales Figure' caption='Top 5 Sales Person' numberPrefix='$'
bgColor='FFFFFF,FFFFFF' showBorder='0'>
<set label='Alex' value='25000' />
<set label='Mark' value='35000' />
<set label='David' value='42300' />
<set label='Graham' value='35300' />
<set label='John' value='31300' />
</chart>
使用FusionChart的渐变 - 星期五 - 星期五
FusionChart提供一个属性(useRoundEdges='1')可以很轻松的达到渐变的效果,但是它不具有可控性。

<chart yAxisName='Sales Figure' caption='Top 5 Sales Person' numberPrefix='$'
bgColor='FFFFFF,FFFFFF' showBorder='0' useRoundEdges='1'>
<set label='Alex' value='25000' />
<set label='Mark' value='35000' />
<set label='David' value='42300' />
<set label='Graham' value='35300' />
<set label='John' value='31300' />
</chart>


使用FusionChart的渐变 - 星期五 - 星期五
看图,它虽然可能不是你想要的效果,但是很漂亮。(玻璃效果的渐变,但是有缺点,它同时将画布和边框生效,并产生圆角效果)

那么这时候介绍一些Chart上的属性,让你自由的控制渐变:
plotFillAngle     控制渐变方向
plotFillRatio     控制渐变色之间的比例
plotFillAlpha     控制渐变色的透明度
plotGradientColor 控制渐变的最终色

其实,我们使用渐变的目的是想达到一种立体的视觉效果

先看一下,两色渐变。(两种颜色渐变 ,使用plotGradientColor属性的颜色作为颜色的渐变色)

<chart yAxisName='Sales Figure' caption='Top 5 Sales Person' numberPrefix='$'
bgColor='FFFFFF,FFFFFF' showBorder='0' plotGradientColor='435336'
plotFillAngle='0' plotFillAlpha="90" plotFillRatio='50,50' >
<set label='Alex' value='25000' color="698950"/>
<set label='Mark' value='35000' color="698950"/>
<set label='David' value='42300' color="698950"/>
<set label='Graham' value='35300' color="698950"/>
<set label='John' value='31300' color="698950"/>
</chart>

使用FusionChart的渐变 - 星期五 - 星期五
是不是有一种简单的立体效果,右边颜色浅,左边深。

再看三种颜色渐变。(注意 set 中的color属性使用两种颜色定义 例如 color = '698950,435336')

<chart yAxisName='Sales Figure' caption='Top 5 Sales Person' numberPrefix='$'
bgColor='FFFFFF,FFFFFF' showBorder='0' plotGradientColor='698950'
plotFillAngle='0' plotFillAlpha="90" plotFillRatio='30,40,30' >
<set label='Alex' value='25000' color="698950,435336"/>
<set label='Mark' value='35000' color="698950,435336"/>
<set label='David' value='42300' color="698950,435336"/>
<set label='Graham' value='35300' color="698950,435336"/>
<set label='John' value='31300' color="698950,435336"/>
</chart>

使用FusionChart的渐变 - 星期五 - 星期五
 是不是有种凸起的效果,当然你可以调节颜色的比例(plotFillRatio='30,40,30')。
 
 注意上面的例子所有的柱子都是渐变到同一种颜色,因为plotGradientColor属性在chart上。
 你如果想要,在不同的柱子上使用不同的渐变最终色,这时候有个要技巧,将比例给为 plotFillRatio='50,50,0'
 这样就可以达到你要的效果。
<chart yAxisName='Sales Figure' caption='Top 5 Sales Person' numberPrefix='$' 
bgColor='FFFFFF,FFFFFF' showBorder='0' plotGradientColor='698950'
plotFillAngle='0' plotFillAlpha="90" plotFillRatio='50,50,0' >
<set label='Alex' value='25000' color="698950,435336"/>
<set label='Mark' value='35000' color="d75758,bc1018"/>
<set label='David' value='42300' color="698950,435336"/>
<set label='Graham' value='35300' color="d75758,bc1018"/>
<set label='John' value='31300' color="698950,435336"/>
</chart>

使用FusionChart的渐变 - 星期五 - 星期五
看到这里,你是不是对FusionChart的渐变有了很详细的了解。

参考资料:
http://docs.fusioncharts.com/charts/
  评论这张
 
阅读(1323)| 评论(0)
推荐

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017