原創|使用教程|編輯:龔雪|2014-05-19 09:43:59.000|閱讀 1172 次
概述:本教程主要介紹在使用FusionCharts時,如何利用XML/JSON屬性加載外部LOGO。
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關鏈接:
在使用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" }] }
預覽結果:
值得注意的是,出于安全原因,Flash Player不允許你加載跨域名文件或帶有絕對路徑的文件。因此,logoUrl文件與圖表應屬于同一
域,并且應該從相對路徑加載。
配置Logo位置
外部Logo可以通過<logoPosition='TL' ... >屬性進行配置,并顯示在下列位置:
配置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圖表顯示結果如下:
將Logo與外部URL鏈接
設置<chart ... logoLink='link in FusionCharts format'>,將Logo與外部URL鏈接起來。此鏈接可以在同一窗口,新窗口,彈出窗口,框架,甚至調用JavaScript方法來打開。
本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@fc6vip.cn