1.什么是FusionCharts
FusionCharts 是一个统计图表工具,它利用FLASH+XML为数据承载方式,基于FLASH的图表数据呈现形式非常漂亮、直观。
同时使用起来也十分方便、开发人员不必关心其FLASH 是如何制作,只需要选择合适的图表文件,
利用XML进行辅助就能呈现直观的数据视图(3D饼图、曲线图、柱状图)
2.资料下载
Demo下载:http://www.fusioncharts.com/demos/business/
3.下载的安装包的文件说明
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)运行结果: