需準備FusionChartsFree插件的FusionCharts.js文件和FCF_Column3D.swf兩個文件
官方鏈接地址
FusionCharts.js：
http://www.fusioncharts.com/free/demos/Blueprint/FusionCharts/FusionCharts.js
FCF_Column3D.swf：
http://www.fusioncharts.com/free/demos/Blueprint/FusionCharts/FCF_Column3D.swf
效果如下
代碼(可直接用，若失效可自行下載FusionCharts.js和FCF_Column3D.swf這兩個文件)
Html代碼 ![收藏代碼]()
- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <script language="Javascript" src="http://www.fusioncharts.com/free/demos/Blueprint/FusionCharts/FusionCharts.js"></script>
- <body>
- <div id="chart1div"></div>
- <script language="JavaScript">
- var areaObject=[{name:"三槍",count:1100,color:"008E8E"},
- {name:"刺陵",count:901,color:"A186BE"},
- {name:"熊貓大俠",count:807,color:"F6BD0F"},
- {name:"大兵小將",count:41,color:"AFD8F8"},
- {name:"花田囍事2010",count:741,color:"B3AA00"},
- {name:"全稱熱戀",count:121,color:"008ED6"}
- ];
- var strXML="<graph caption='最爛電影排名' xAxisName='電影名' yAxisName='count' baseFont='宋體' baseFontSize='12' >";
- var length=areaObject.length;
- for(var i=1;i<=length;i++){
- strXMLstrXML= strXML+"<set name='"+areaObject[i-1].name+"' value='"+areaObject[i-1].count+"' color='"+areaObject[i-1].color+"'/>";
- }
- strXMLstrXML= strXML+"</graph>";
- var chart1 = new FusionCharts("http://www.fusioncharts.com/free/demos/Blueprint/FusionCharts/FCF_Column3D.swf", "chart1Id", "500", "400");
- chart1.setDataXML(strXML);
- chart1.render("chart1div");
- </script>
- </body>
- </html>