Fusion Charts学习-----Column3D

来源：互联网发布：歌曲后期制作软件aa 编辑：程序博客网时间：2024/05/17 04:27

1.什么是FusionCharts
FusionCharts 是一个统计图表工具，它利用FLASH+XML为数据承载方式，基于FLASH的图表数据呈现形式非常漂亮、直观。
同时使用起来也十分方便、开发人员不必关心其FLASH 是如何制作，只需要选择合适的图表文件，
利用XML进行辅助就能呈现直观的数据视图（3D饼图、曲线图、柱状图）

2.资料下载

Demo下载：http://www.fusioncharts.com/demos/business/

3.下载的安装包的文件说明

1.Charts文件夹下放的主要是swf文件和js文件
2.Code文件夹下存放的是源代码
3.Gallery文件夹下存放的是创建的图形例子

4.Contents文件夹存放的是文档

4.小例子

(1)事前准备

创建各个目录，其中FusionCharts文件夹下所有文件均来自于下载目录 Charts下。

fusioncharts.js足够灵活来自动加载所需的其他JavaScript文件：

jquery.min.js，fusioncharts.hc.charts.js和fusioncharts.hc.js

(2)Data.xml内容

<chart caption='Weekly Sales Summary'   xAxisName='Week' yAxisName='Amount' numberPrefix='$'>     <set label='Week 1' value='14400' />     <set label='Week 2' value='19600' />     <set label='Week 3' value='24000' />     <set label='Week 4' value='15700' /> </chart>

(3)weekly-sales.html文件源码

<html>  <head>            <title>My First chart using FusionCharts XT</title>             <script type="text/javascript" src="FusionCharts/FusionCharts.js">    </script>  </head>     <body>         <div id="chartContainer">FusionCharts XT will load here!</div>              <script type="text/javascript">             //方式1      //参数含义：SWF文件URL，该Chart的Id，宽度，高度，debug模式(0(默认)、1)        /* var myChart = new FusionCharts( "FusionCharts/Column3D.swf",       "myChartId", "400", "300", "0" );      myChart.setXMLUrl("Data.xml");      myChart.render("chartContainer"); */            //方式2       //最后两个参数：要绘制的DIV、数据源       var myChart = FusionCharts.render( "FusionCharts/Column3D.swf",             "myChartId", "450", "350", "chartContainer", "Data.xml" );    </script>        </body> </html>

(4)运行结果：

0 0