(需要导入官方的FusionCharts文件夹(包含js和swf))
新建一个FusionCharts需要三步:
1.new 一个FusionCharts对象(var chart = new FusionCharts(Relative URL of the chart SWF file of the chart type,ID of the chart,width,height,debugMode parameter);)
2.加载xml或者json数据(chart.setXMLDATA(data);)
3.设置chart的显示位置id(chart.render(id))
FusionCharts XT可以使用两种格式作为数据来源(XML&JSON)。两种数据来源也提供了两种方法获取来源:
1.fusionCharts.setXML(or JSON)DATA();
2.fusionCharts.setXMLUrl(or JSON)DATA();
简单示例代码如下:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 <script type="text/javascript" src="../FusionCharts/FusionCharts.js"> </script> 7 </head> 8 <body> 9 <div id="chartContainer">FusionCharts XT will load here!</div> 10 <script type="text/javascript"> 11 var json = {"chart":{"caption":‘Weekly Sales Summary‘ , "xAxisName":‘Week‘, "yAxisName":‘Amount‘, "numberPrefix":‘$‘}, 12 "data":[ 13 {"label":‘Week 1‘ ,"value":‘14400‘}, 14 {"labe2":‘Week 2‘ ,"value":‘42400‘}, 15 {"labe3":‘Week 3‘ ,"value":‘34400‘}, 16 {"labe4":‘Week 4‘ ,"value":‘23400‘} 17 ] 18 19 }; 20 var myChart = new FusionCharts( "FusionCharts/Column3D.swf", "myChartId", "400", "300", "0" ); 21 myChart.setJSONDATA(json); 22 myChart.render("chartContainer"); 23 </script> 24 </body> 25 </html>
FusionCharts XT 从零学习1,布布扣,bubuko.com
原文:http://www.cnblogs.com/yuqian-gongqifen/p/3670364.html