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
