开始学习前准备
类库下载:http://www.fusioncharts.com/download/trials/
Demo下载:http://www.fusioncharts.com/demos/business/
理解FusionCharts的用处
FusionCharts是InfoSoft Global公司的一个产品,InfoSoft Global公司是专业的Flash图形方案提供商,他们还有几款其他的基于flash技术的产品,都非常的漂亮
FusionCharts是一个基于Flash的图表组件,可以用来提供数据驱动的动态图标,FusionCharts可用于任何网页脚本语言如, HTML格式,JSP, Asp.Net, PHP技术等等。提供交互式和强大的动态图标,FusionCharts充分利用流体美丽的Flash为模板,使用XML作为其数据接口,创造紧凑,互动和真正的动态图表
下载的安装包的文件说明
1.Charts文件夹下放的主要是swf文件和js文件
2.Code文件夹下存放的是源代码
3. Gallery文件夹下存放的是创建的图形例子
4. Contents文件夹存放的是文档
安装使用的方法
1、在你的web应用根目录下新建一个叫FusionCharts的文件夹。当然,并不是说它一定要叫这个名字,也不是一定要在根目录下。
2、把所有的SWF文件都拷贝到这个FusionCharts里。
这就完成安装了,不再需要其他多余的步骤。
当然,有些情况下,并不需要与服务器的交互(比如,你直接使用JavaScript来嵌入,而不用jsp或php。数据也是直接写死在你的JavaScript代码里或xml文件里。),为了学习方便,你也可以把它安装在你的电脑上随便一个地方,比如d:\test下。安装步骤和上面的安装一样。
SWF
接下来介绍SWF文件都分别对应哪种图形。
图形类型 | 文件名 |
|
Single Series Charts | ||
Column 3D | Column3D.swf |
|
Column 2D | Column2D.swf |
|
Line 2D | Line.swf |
|
Area 2D | Area2D.swf |
|
Bar 2D | Bar2D.swf |
|
Pie 2D | Pie2D.swf |
|
Pie 3D | Pie3D.swf |
|
Doughnut 2D | Doughnut2D.swf |
|
| ||
Multi-series Charts | ||
Multi-series Column 2D | MSColumn2D.swf |
|
Multi-series Column 3D | MSColumn3D.swf |
|
Multi-series Line 2D | MSLine.swf |
|
Multi-series Bar 2D | MSBar2D.swf |
|
Multi-series Area 2D | MSArea2D.swf |
|
| ||
Stacked Charts | ||
Stacked Column 3D | StackedColumn3D.swf |
|
Stacked Column 2D | StackedColumn2D.swf |
|
Stacked Bar 2D | StackedBar2D.swf |
|
Stacked Area 2D | StackedArea2D.swf |
|
| ||
Combination Charts | ||
Multi-series Column 3D + Line - Dual Y Axis | MSColumn2DLineDY.swf |
|
Multi-series Column 3D + Line - Dual Y Axis | MSColumn3DLineDY.swf |
|
| ||
Financial Charts | ||
Candlestick Chart | Candlestick.swf |
|
|
|
|
Funnel Chart |
|
|
Funnel Chart | Funnel.swf |
|
|
|
|
Gantt Chart |
|
|
Gantt Chart | Gantt.swf |
|
开始书写Demo
1.选择好你要创建的图形类型对应的SWF文件。例如,我们现在要创建的是3D柱状图形,那么我们的SWF文件就是Column3D.swf。上篇文章已经介绍过了,所有的SWF文件都放在FusionCharts-->Charts文件夹里。
2.XML数据文件。FCF只接受基于XML格式的数据。因此,你需要把你的数据转成XML格式。
3.HTML文件。这个HTML文件将包含用来嵌入图形的代码。
FusionCharts对象共有四个方法:
初始化方法:FusionCharts(swf,id,w,h)
例如:FusionCharts("../FCF_Column3D.swf", "chart1", "850", "370")
Swf:swf文件的url
Id:用以标示该对象
W:宽度
H:高度
利用XML文件填充FusionCharts对象:dataURL(url)
例如:dataURL("../data.xml ")
url:XML文件所在的URL
利用XML字符串填充FusionCharts对象:dataXML(str)
例如:chart1.setDataURL("<graph><set name='A供电公司' value='14' /></graph>")
Str:匹配格式的字符串
将FusionCharts对象填充到指定的div标签处:render(div)
例如:render("divid")
Div:div标签的id
利用XML文件填充并刷新FusionCharts对象:updateChartURL(url)
例如:updateChartURL("../data.xml ")
url:XML文件所在的URL
chart.setDataXML(AngularGaugeXmlStr);
chart.setDataURL("data/Data.xml");//xml文件
chart.setJSONData(JsonStr);
利用XML字符串填充并刷新FusionCharts对象:updateChartXML(str)
例如:updateChartXML("<graph><set name='A供电公司' value='14' /></graph>")
Str:匹配格式的字符串
现在创建一个完整的Demo
第一步:拷贝需要的库文件
第二步:创建模拟数据
包括xml文件和js文件中创建xml数据对象和json数据对象两种格式
Xml文件
3.书写html绑定页面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript" src="js/FusionCharts.js"></script><!--引入主类库-->
<script type="text/javascript" src="data/data.js"></script>
</head>
<body>
<div id="mzl">在这加载图形</div><!--定义一个div用于存放图形-->
<script type="text/javascript">
var chart = new FusionCharts("swf/Column2D.swf", "ChartId", "450", "300", "0", "0");
//创建一个FusionCharts对象,第一个参数为swf文件的路径,第二个为id用来标识这个对象,第三个为宽度,第四个为高度
//chart.setDataURL("data/data.xml");//xml文件
// chart.setDataXML(xmldata);
chart.setJSONData(json);
chart.render("mzl");//将FusionCharts对象填充到指定的div标签处:render(div)
</script>
</body>
</html>
4.书写数据文件
var json= '{"chart": {"yaxisname": "Sales Figure","caption": "Top 5 Sales Person","numberprefix": "$","useroundedges": "1","bgcolor": "FFFFFF,FFFFFF","showborder": "0"},"data": [{"label": "Alex","value": "25000"},{"label": "Mark","value": "35000"},{"label": "David","value": "42300"},{"label": "Graham","value": "35300"},{"label": "John","value": "31300"}]}';
数据文件的格式在帮助文档中能够找到
5.文件夹组织
data:数据文件夹
js:脚本文件夹()
swf:从类库中copy出的swf文件
打开页面测试即可,尽量使用火狐进行测试,使用ie需要进行安全确认添加