fusionchart for iphone with svg

MegatronKings 2013-01-26

1.让你的fusionchart以svg的形式跑在未安装flash的浏览器上

HowdoIrenderchartsusingJavaScript(withoutFlash)&iniPhone/iPod/iPad?

FusionChartsusingJavaScript:

FusionChartsXTallowsyoutocreateJavaScriptbasedcharts(sometimesalsoreferredtoasHTML5/Canvaschartsontheweb).ThisfeatureallowsyoutocreatechartsinwebbrowserswhereFlashPlayerisnotsupportede.g.iniPhone/iPad.FusionChartsinternallymakesuseofHighchartslibrarytogenerateJavaScriptbasedcharts.

ThisfeatureworksseamlesslywiththecurrentimplementationmodeofFusionChartsi.e.,youdonotneedtowriteanyadditionalcodetoimplementthis.FusionCharts.jsJavaScriptclassautomaticallydetectsdeviceswhereFlashisnotsupportedandrendersJavaScriptbasedchartsinstead.YoucanalsoignoreFlashandonlyuseJavaScriptforcharting.

HowitWorks?

FusionChartsXTfeaturesacompletelynewFusionChartsJavaScriptclass.FusionChartsJavaScriptclassnowconsistsoffourmainfiles:FusionCharts.js,FusionCharts.HC.js,FusionCharts.HC.Charts.jsandjquery.min.js.ThesefourfilesarepresentinDownloadPack>Chartsfolder.

YouwouldonlyneedtoincludeFusionCharts.jsinyourwebpage(however,donotforgettocopytherestoffilestoyourwebapplication).TherestoftheJavaScriptfileswillbeautomaticallyloadedon-demandbyFusionCharts.js.

OnceFusionChartsclassdeterminesthatFlashplayerisnotavailableinthedevice,itautomaticallyswitchestherenderingmodetoJavaScript.IfyouwishtorenderthechartasJavaScriptbydefault,youcandothisbysettingtherenderingmethodtoJavaScriptfromyourcode.

Let'slookatcodewherebothFlashandJavaScriptrenderingisenabled,withJavaScriptrenderingonlycomingintoeffectwhereFlashPlayerisnotavailable:

<html><head><title>MyFirstchartusingFusionCharts-UsingJavaScript</title><scripttype="text/javascript"src="FusionCharts/FusionCharts.js"></script></head><body><divid="chartContainer">FusionChartswillloadhere!</div><scripttype="text/javascript"><!--varmyChart=newFusionCharts("FusionCharts/Column2D.swf","myChartId","400","300","0","1");myChart.setXMLUrl("Data.xml");myChart.render("chartContainer");//--></script></body></html>

ExplicitlyrenderJavaScriptonlycharts:

IfyouwishtorenderJavaScriptchartsonly,youjusthavetoaddalineofcodeasshownbelow:

FusionCharts.setCurrentRenderer('javascript')

ThiscodewillaskFusionChartsrenderertoskipFlashrenderingandcreatepureJavaScriptcharts.

Thissettinggetsappliedtoallthechartsrenderedafterthisline.Hence,ifyoudeclarethisatthebeginning,allthechartsinthepagewillrenderedusingJavaScript.Youwouldnotneedtodeclarethesameforeachchartinthepage.

Themodifiedcodewilllooklikethefollowing:

<html><head><title>MyFirstchartusingFusionCharts-UsingpureJavaScript</title><scripttype="text/javascript"src="FusionCharts/FusionCharts.js"></script></head><body><divid="chartContainer">FusionChartswillloadhere!</div><scripttype="text/javascript"><!--FusionCharts.setCurrentRenderer('javascript');varmyChart=newFusionCharts("FusionCharts/Column2D.swf","myChartId","400","300","0","1");myChart.setXMLUrl("Data.xml");myChart.render("chartContainer");//--></script></body></html>

fusionchart上要跑仪表盘,记得添加FusionWidgetsXT下的FusionCharts.HC.Widgets.js

相关推荐