FusionCharts学习笔记（一）_fusioncharts angulargauge 手册-CSDN博客

本文链接：https://blog.csdn.net/qadada/article/details/8423538

开始学习前准备

类库下载：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>
<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需要进行安全确认添加