FusionCharts Free 在 ExtJs 框架中图表的应用（1）
|
- UID
- 1066743
|
FusionCharts Free 在 ExtJs 框架中图表的应用（1）
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 文件，代码如下所示：
1
| <script language="JavaScript" src="FusionCharts/JS/FusionCharts.js"></script>
|
再次，创建数据源（以 XML 格式为例），分为静态数据和动态数据，静态数据可在工程目录下直接进行创建，动态数据指从服务器端或进行换算获取数据进行字符串拼接，无论静态数据还是动态数据，创建好的 XML 数据格式如清单 1 所示（本例采用文件名为 DataMulti.xml 静态数据来实现）：
清单 1. XML 数据格式1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <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. 调用静态数据源生成图表1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <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. 通用参数属性名称类型说明animationBoolean是否动画显示数据，默认为 1(True)showNamesBoolean是否显示横向坐标轴(x 轴)标签名称rotateNamesBoolean是否旋转显示标签，默认为 0(False):横向显示showValuesBoolean是否在图表显示对应的数据值，默认为 1(True)showLimitsBoolean是否显示图表限值(y 轴最大、最小值)，默认为 1(True)
表 2. 图表标题和轴名称属性名称类型说明captionString图表上方的主标题subCaptionBoolean图表上方的副标题xAxisNameStringX 轴的名字xAxisNameStringy 轴的名字
表 3. 字体属性属性名称类型说明baseFontString字体样式baseFontSizeNumber字体大小baseFontColorHex Color Code字体颜色outCnvBaseFont String设置图表外侧的字体样式outCnvBaseFontSzeNumber设置图表外侧的字体大小outCnvBaseFontColorHex Color Code设置图表外侧的字体颜色
<h5 id="0.3.4.表 4. 标签的属性 |outline" class="ibm-h5">表 4. <set>标签的属性属性名称类型说明labelString名称valueNumber值colorColor颜色linkString点击所调用的页面或者方法toolTextString代称，别称showLabelBoolean是否显示名称dashedBoolean是否用虚线alphaNumber透明度 0-100
表 5. 图标边距和背景属性属性名称类型说明chartLeftMarginNumber设置图表左边距chartRightMarginNumber设置图表右边距chartTopMarginNumber设置图表上边距chartBottomMarginNumber设置图表下边距canvasBgColorHex Color Code图表背景的颜色canvasBaseColorHex Color Code图表基部的颜色canvasBaseDepthHex Color Code图表背景的深度showCanvasBgBoolean是否显示图表背景showCanvasBaseBoolean是否显示图表基部
表 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 轴的最大最小值的小数位数 |
|
|
|
|
|
