extjs 图表 FusinoCharts Free 属性实例

转载 http://www.ibm.com/developerworks/cn/web/1312_linbc_fusionextjs/

FusionCharts Free 图表制作

FushionCharts Free 是一款开源的免费的以 Flash 为支撑来制作数据动画图表的图表组件解决方案，它最大的特性是跨平台、跨浏览器、兼容主流的 Web 技术，通过 XML 作为其数据接口，利用绚丽的 Flash，创建交互式、数据驱动的动态图表。

FusionCharts Free 优点

FushionCharts Free 拥有自身很多的优点：

大量的图表类型

FushionCharts Free 给用户提供多种不同的 2D 或 3D 图表类型，包括柱状图、直方图、直线图、饼图、圆环图、甘特图、漏斗图、堆栈图表、组合图表等，提供用户多种选择，可以很好地满足用户的需求。

良好的动画和交互

FusionCharts Free 在图表设置方面为用户提供了多种选项，例如：是否显示动画效果，透明度，色彩主题，热点选区、盘旋标题，倾斜度，字体，字体显示位置，字体背景，饼图半径和各饼瓣颜色等，很多属性用户都可以进行个性化设置，使得制作出的图表表现形式丰富，光滑、栩栩如生的动态图像效果与用户有良好的交互。

兼容主流 Web 技术、网络技术，平台和设备

FusionCharts Free 可运行在 Windows、Linux、Unix 等操作系统上。通过 XML 作为数据接口，可兼容 HTML、JavaScript、ASP、ASP.NET、PHP、JSP、ColdFusion 等主流 Web 技术和数据库。充分利用 Flash 和 Javascript，可无缝地在 PC 机、Macs、iPad、iPhone 和其他移动设备上实现。

降低服务器的负载

通常情况下，显示的图表都是在服务器端生成后再传给客户端，这消耗了服务器的资源和网络带宽。而 FusionCharts Free 只是将预构建的 SWF 文件和数据文件传给浏览器（客户端），图片渲染等工作由客户端的 Flash 插件完成，极大地减少了服务器端计算负荷和网络传输量。与此同时，浏览器会将 SWF 文件缓存起来，以后只需更新数据，而不是每次都发送图表 SWF 文件。

使用简单，免安装

使用 FusionCharts Free 不需了解太多关于 Flash 的知识，创建图表过程非常便捷，只需拷贝所需的模板 SWF 文件，将显示的数据转换成特定的 XML 格式，最后使用语句通过 Flash 进行展示。

创建 FusionCharts Free 图表

FushionCharts Free 使用 XML 作为数据接口，其制图流程如图 1 所示。

图 1. FusionCharts Free 制作图表流程图

包含 SWF 文件的图表显示页面向数据提供页面发送数据请求，数据提供页面接收到请求后根据条件连接数据库查询获取源数据，然后返回数据给数据提供页面，数据提供页面根据具体情况将数据转换成 XML 格式并传送到图表显示界面，图表显示界面通过 Fash 插件对 XML 数据进行解析并展示图表。FusionCharts Free 制作简便，广泛应用在 Web 应用中，下面通过一个基于 Java 的 Web 工程（FusionChartsDemo）创建多柱状图为例（某超市 2012 年度啤酒、尿布和纸巾的销售额）来说明图表的创建过程。

首先，下载 FusionCharts 后解压，找到 FusionCharts.js 文件和需要的.swf 文件（本例以多个 3D 柱状图：MSColumn3D.swf 为例）放到工程 WebRoot 目录下。

其次，在页面中引入 js 文件，代码如下所示：

<script language="JavaScript" src="FusionCharts/JS/FusionCharts.js"></script>

再次，创建数据源（以 XML 格式为例），分为静态数据和动态数据，静态数据可在工程目录下直接进行创建，动态数据指从服务器端或进行换算获取数据进行字符串拼接，无论静态数据还是动态数据，创建好的 XML 数据格式如清单 1 所示（本例采用文件名为 DataMulti.xml 静态数据来实现）：

清单 1. XML 数据格式

<graph palette='3' caption='季度销售对比表' xAxisName='季度' yAxisName='销售额（单位：千）' 
baseFont='Arial' baseFontSize ='14' baseFontColor ='000000'  ShowAboutMenuItem='0'
 decimals='0' formatNumberScale='0' useRoundEdges='1'>
	<categories>
		<category label='第 1 季度'/>
		<category label='第 2 季度'/>
		<category label='第 3 季度'/>
		<category label='第 4 季度'/>
	</categories>
	<dataset seriesName='啤酒'> 
 <set value='1240' link='chartDemo/detail.do?value=a1'/> 
		 <set value='1920' link='chartDemo/detail.do?value=a2'/> 
		 <set value='2080' link='chartDemo/detail.do?value=a3'/> 
		 <set value='910' link='chartDemo/detail.do?value=a4'/> 
	</dataset>
<dataset seriesName='尿布'> 
 ......//格式参照“啤酒”设定
	</dataset>
	<dataset seriesName='纸巾'> 	 
                    ......//格式参照“啤酒”设定
	</dataset>
</graph >

如清单 1 所示每个 XML 以<graph >开始，以</graph >结束，<categories></categories>这个标签包含多个子标签<category ></ category>，用来设置图片横坐标的元素。<dataset >标签代表横坐标一个元素中拥有的子元素（如本例中，横坐标的第一个元素“第 1 季度”包含啤酒、尿布和纸巾 3 个子元素，那么就有 3 个<dataset >标签），标签中 seriesName 属性将在横坐标下面形成一组图例。<dataset>里的子节点<set>可以用来设置每个具体元素的属，可见每个标签都拥有自己特有的一些属性。

最后，在页面（FusionCharts.jsp）中调用生成的 XML 格式数据生成图表，代码如清单 2 所示。

清单 2. 调用静态数据源生成图表

<script type="text/javascript">
          //本例采用静态数据 DataMulti.xml 为数据源
          function showFusionCharts(){ 
          // 用四个参数构建一个 FusionCharts 对象，第 1 个参数是 SWF 文件的地址，
          //第 2 个是图形的 id，唯一即可，第 3 个是图表的宽，第 4 个是图表的高     
          var myChart = new FusionCharts("FusionCharts/Charts/MSColumn3D.swf", \
          "myChartId", "1000", "800");
          //采用静态数据时，设置数据文件的地址 url
          myChart.setDataURL("DataMulti.xml");
          //把图表渲染到指定的容器
          myChart.render("chartdiv");
    }
</script>
<body onload="showFusionCharts();"><div id="chartdiv"></div></body>

部署项目，启动服务器在网页中输入 http://127.0.0.1:8080/FusionChartsDemo/FusionCharts.jsp 就可以访问刚刚创建好的多个柱状图。

图 2. 季度销售对比图

部分常用 FusionCharts Free 属性说明

FusionCharts Free 在 XML 标签中的属性值有 4 种类型，Boolean（只能为 1 或 0 的布尔类型），Number（数字类型），String（字符串类型）和 Hex Color Code（十六进制颜色代码）。

表 1. 通用参数

属性名称	类型	说明
animation	Boolean	是否动画显示数据，默认为 1(True)
showNames	Boolean	是否显示横向坐标轴(x 轴)标签名称
rotateNames	Boolean	是否旋转显示标签，默认为 0(False):横向显示
showValues	Boolean	是否在图表显示对应的数据值，默认为 1(True)
showLimits	Boolean	是否显示图表限值(y 轴最大、最小值)，默认为 1(True)

表 2. 图表标题和轴名称

属性名称	类型	说明
caption	String	图表上方的主标题
subCaption	Boolean	图表上方的副标题
xAxisName	String	X 轴的名字
xAxisName	String	y 轴的名字

表 3. 字体属性

属性名称	类型	说明
baseFont	String	字体样式
baseFontSize	Number	字体大小
baseFontColor	Hex Color Code	字体颜色
outCnvBaseFont	String	设置图表外侧的字体样式
outCnvBaseFontSze	Number	设置图表外侧的字体大小
outCnvBaseFontColor	Hex Color Code	设置图表外侧的字体颜色

表 4. <set>标签的属性

属性名称	类型	说明
label	String	名称
value	Number	值
color	Color	颜色
link	String	点击所调用的页面或者方法
toolText	String	代称，别称
showLabel	Boolean	是否显示名称
dashed	Boolean	是否用虚线
alpha	Number	透明度 0-100

表 5. 图标边距和背景属性

属性名称	类型	说明
chartLeftMargin	Number	设置图表左边距
chartRightMargin	Number	设置图表右边距
chartTopMargin	Number	设置图表上边距
chartBottomMargin	Number	设置图表下边距
canvasBgColor	Hex Color Code	图表背景的颜色
canvasBaseColor	Hex Color Code	图表基部的颜色
canvasBaseDepth	Hex Color Code	图表背景的深度
showCanvasBg	Boolean	是否显示图表背景
showCanvasBase	Boolean	是否显示图表基部

表 6 数字格式

属性名称	说明
numberPrefix=”$”	设置数据值的前缀
numberSuffix=”%”	设置数据值的后缀，% 、 (吨)等（特殊字符需使用 URL Encode 编码）
formatNumber=”1/0”	设置是否格式化数据,逗号来分隔数字(千位，百万位)
formatNumberScale=”1/0”	设置是否用“K”来代表千，“M”来代表百万
decimalSeparator=”.”	用指定的字符来代替小数点
thousandSeparator=”,”	用指定的字符来代替千位分隔符
decimalPrecision=”2”	指定小数位的位数， [0-10]
divLineDecimalPrecision=”2”	指定水平分区线的值小数位的位数， [0-10]
limitsDecimalPrecision=”2”	设置 y 轴的最大最小值的小数位数

回页首

ExtJs 简介

ExtJs 框架是一个用 JavaScript 编写的用来开发具有绚丽外观的 RIA（富客户端）的 Web 应用，是一个与后台技术无关的前端 Aax 框架。其最大优势是类似传统 GUI 方式的编程以及浏览器兼容性，开发出来的界面非常的统一、标准，省去美工的时间和麻烦。它的劣势在于是重量级的框架，体积大，加载需消耗较大的带宽，针对这一点在 ExtJs 4.0 及以上版本中推出了动态加载即按需加载用户需要的文件。

在 ExtJs 4.0 中提供了纯 JavaScript 实现的 Ext.draw 绘图包，它可以适应不同的绘图引擎自动选择 VML 和 SVG 实现，并提供了统一的绘图 API，图表与数据模型无缝地整合在一起，图表可直接从 Store 中获取数据（效果如图 3 所示）。ExtJs 提供了较丰富的图表类型，但到目前为止其图表实际表现无法达到 3D 的美观效果。因此将 FusionCharts Free 与 ExtJs 进行结合，就能弥补 ExtJs 中图表美观的瑕疵，下面对两者结合的实现进行阐述。

图 3. ExtJs 中的柱状图

回页首

FusionCharts Free 在 ExtJs 框架中图表的应用

在前面已经介绍了如何使用 FusionCharts Free 制作图表，在此基础上，与 ExtJs 的结合就显得较容易了。首先新建一个 Web 工程，准备所需的文件，如图 4 所示，下载 ExtJs 和 FusionCharts Free 并放到 WebRoot 目录下，这样环境准备就完成了。

图 4. 工程目录图

其次，创建数据源，本例采用动态数据，从服务器端的数据库中获取某超市 2012 年度啤酒、尿布和纸巾的销售额，服务器端获取数据页面 getData.jsp 获取数据后构造成和 DataMulti.xml 文件一样的数据。

再次，创建 ExtJs UI 界面并获取数据源，本例采用在 ExtJs 的 Panel 中显示所创建的图表（以 FusionChatsDemo.js 为例），写成 js 文件可以有助于重用。

清单 3. 在 ExtJs 中 FusionCharts Free 调用动态数据源生成图表

Ext.onReady(function(){
    Ext.QuickTips.init();
    Ext.form.Field.prototype.msgTarget = 'qtip';
    Ext.BLANK_IMAGE_URL ='ExtJs/images/s.gif'; 
    var dataXml = "";		
    //获取后台数据源
    function loadData()
	 {
	    try{
	       Ext.Ajax.request(
	           url:"getData.jsp",
	           success:function (response){ 
	           dataXml = response.responseText;                        
	         } 
	       });
	    }catch (e){ 
	    alert("服务器请求错误,请稍后再试");
	  } 
    //panel 中的 div 来渲染图表
    var myPanel = new Ext.Panel({
    html : "<div id='myChartDiv'></div>"});
    loadData();
var myChart = new FusionCharts("FusionCharts/Charts/MSColumn3D.swf", "myChartId", "650", "590");
//设置数据源 XML 内容，赋予动态数据源
    myChart.setDataXML(dataXml);
    myChart.render("'myChartDiv'"); 
    //存放 panel 的 window
    var myChartWin = new Ext.Window({
    frame : true,
    	width : 416,
    	height : 333,
    	title : "ExtJs 中嵌入 FusionCharts 图表",
    	shadow : true,
    	modal : true,
    items : [myPanel ]
    });
    myChartWin .show();
})

最后，在 JSP 页面中进行调用，只要引入 ExtJs、FusionCharts 以及所写的 FusionChatsDemo.js 即可，在浏览器中访问就可以看到实现的效果图（如图 5 所示），

图 5 ExtJs 中使用 FusionCharts Free 制图效果图

回页首

遇到的问题解析

FusionCharts Free 中文乱码问题

ExtJs 和 FusionCharts Free 在处理中文的时候经常会出现乱码问题，出现较多的是在调用数据源的时候，无论调用的是静态的数据还是动态的数据，我们只要确保数据源文件格式一直为 gbk，另外页面编码为 UTF-8，这样乱码问题就基本能够解决。

在链接属性 link 传参时出现乱码问题，例：link="JavaScript:myJSFunction('传到中文', 235);"//此时传到中文会出现乱码。需要在 graph 属性中添加 unescapeLinks='0' ，那么乱码问题就能解决。

文件名大小写问题

在 windows 中文件名不区分大小写，但是在 Linux 或者 MAC 操作系统中，文件名是区分大小写的，因此在代码中引用 Flash 模板时要注意文件名的大小写，否则图表将不能正常渲染。

图表右键菜单选项问题

设置了图表可以导出的功能后，图表右键菜单会出现"Save as..." 选项，若想删除可以设置<graph>元素中的 exportShowMenuItem = ‘0’，若想禁用可在<graph>元素中定义 exportFormats="JPG|PNG"。右键菜单中有一项 About FusionCharts，禁用的话可设置<graph>元素中的 showAboutMenuItem= ‘0’。

图表显示时，提示信息“Invalid Data.”

出现"Invalid Data."提示信息时意味着 XML 数据格式不正确。可能存在以下的错误：

XML 文件中可能存在重复的属性。
元素缺少结尾标签。
标签不一致。例如<graph>的结尾标签应该为</graph>，不是</Graph>或者</GRAPH>。
属性中缺少前或后引号，如，<graph numberPrefix=$’应该写为 <graph numberPrefix=’$’。
若双引号作为数据的一部分，编码应为" 例如：<set label='He says "Hi" to all.' />。
若单引号作为数据的一部分，编码应为 ' 例如：<set label='It's chart’ />

回页首

总结

本文对 FusionCharts Free 的功能、特点、创建过程、标签属性，与 ExtJs 的结合过程进行详细的阐述，为用户创建图表时提供一些参考价值。总的来说，FusionCharts Free 可以和很多组件进行集成使用，ExtJs 与 FusionCharts Free 结合后具有更多优势，FusionCharts Free 在使用上简单，服务器端负载小，运行速度快，图表类型多样、美观，与用户交互性多，实用性强，能够更好地满足不用用户的需求，加之以 ExtJs 自身核心控件（表格和树）的优势，使得 ExtJs 成为很多企业开发管理信息系统的良好选择。

FusionCharts Free 是开源的免费的图表解决方案，有一个图表种类更多，报表功能更丰富，功能更强大的非免费的商用版本 FusionCharts XT，商用版在 3D 动画和阴影效果处理上更加生动形象，用户可以下载试用版进行体验。