FusionCharts使用教程:利用XML/JSON属性加载外部LOGO

原创|使用教程|编辑:龚雪|2014-05-19 09:43:59.000|阅读 977 次

概述:本教程主要介绍在使用FusionCharts时,如何利用XML/JSON属性加载外部LOGO。

# 您正在找协同办公软件吗?点击这里站长给您推荐 #

相关链接:

在使用FusionCharts图表时,你可以在运行时加载外部Logo并显示于图表中。Logo可以是GIF/JPEG/PNG或SWF文件。你可以使用chart元素的logoURL属性来加载一个Logo。

XML

<chart yAxisName='Sales Figure' caption='Top 5 Sales Person' numberPrefix='$' useRoundEdges='1' bgColor='FFFFFF,FFFFFF' showBorder='0' exportEnabled='1' exportShowMenuItem='0' logoURL='fusionchartsv3.2-logo.png'>
<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>

JSON

{
"chart":{ "yaxisname":"Sales Figure", "caption":"Top 5 Sales Person", "numberprefix":"$", "useroundedges":"1", "bgcolor":"FFFFFF", "showborder":"0", "exportenabled":"1", "exportshowmenuitem":"0", "logourl":"fusionchartsv3.2-logo.png" },
"data":[{ "label":"Alex", "value":"25000" },
{ "label":"Mark", "value":"35000" },
{ "label":"David", "value":"42300" },
{ "label":"Graham", "value":"35300" },
{ "label":"John", "value":"31300" }]
}

预览结果:

FusionCharts教程,加载外部LOGO

值得注意的是,出于安全原因,Flash Player不允许你加载跨域名文件或带有绝对路径的文件。因此,logoUrl文件与图表应属于同一
域,并且应该从相对路径加载。

配置Logo位置

外部Logo可以通过<logoPosition='TL' ... >属性进行配置,并显示在下列位置:

  • TL - Top-left of the chart
  • TR - Top-right of the chart
  • BL - Bottom-left of the chart
  • BR - Bottom-right of the chart
  • CC - Center of the chart

配置Logo不透明度和大小

一旦加载了Logo,就可以在FusionCharts图表中配置其不透明度和大小,具体方式如下:

XML

<chart yAxisName='Sales Figure' caption='Top 5 Sales Person' numberPrefix='$' useRoundEdges='1' bgColor='FFFFFF,FFFFFF' showBorder='0' exportEnabled='1' exportShowMenuItem='0' logoURL='fusionchartsv3.2-logo.png' logoPosition='CC' logoAlpha='30' logoScale='110'>
<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>

JSON

{
"chart":{
"yaxisname":"Sales Figure",
"caption":"Top 5 Sales Person",
"numberprefix":"$",
"useroundedges":"1",
"bgcolor":"FFFFFF,FFFFFF",
"showborder":"0",
"exportenabled":"1",
"exportshowmenuitem":"0",
"logourl":"fusionchartsv3.2-logo.png",
"logoposition":"CC",
"logoalpha":"30",
"logoscale":"110"
},
"data":[{
"label":"Alex",
"value":"25000"
},
{
"label":"Mark",
"value":"35000"
},
{
"label":"David",
"value":"42300"
},
{
"label":"Graham",
"value":"35300"
},
{
"label":"John",
"value":"31300"
}
]
}

最终带有Logo的FusionCharts图表显示结果如下:

FusionCharts教程,加载外部LOGO

将Logo与外部URL链接

设置<chart ... logoLink='link in FusionCharts format'>,将Logo与外部URL链接起来。此链接可以在同一窗口,新窗口,弹出窗口,框架,甚至调用JavaScript方法来打开。



标签:JavaScript FusionCharts图像处理

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

登录 慧都网发表评论


暂无评论...

为你推荐

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

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

在线
客服
在线
QQ
咨询
电话
177-4994-3557
购物车 反馈 返回
顶部
在线客服系统
live chat