shuaiqixiao4
- 浏览: 52725 次
- 性别:
- 来自: 天津
-
最近访客 更多访客>>
最新评论
-
shuiyunbing：
单元格样式怎么处理？
将flex页面数据导出到excel -
gaoyide：
啥破玩意！！
FLEX alive pdf 打印pdf -
zhong_pro：
关于博主的问题点，做如下修改就可以达到不需要属性isSelec ...
Flex 4通过重写DataGridColumn和CheckBox类给DataGrid添加选择列-CheckBoxColumn -
zhenxingzzx：
看不到附件的 ！！
Adobe AIR右键菜单和系统托盘（Tray)功能以及实现方法 -
pangxin12345：
dingdingdingdingding
Adobe AIR右键菜单和系统托盘（Tray)功能以及实现方法
从 http://www.infosoftglobal.com/ 站点下载免费版本到本地，解压到本地，取出 JSClass目录和Charts 目录下所有文件拷贝到你的网站chart目录下，即可开始FusionCharts的使用之旅。
一、 开始一个简单的demo
1. 在你的网站根目录下新建 Data.xml文档，作为图表的数据源，内容如下：
<graph caption='Monthly Unit Sales' xAxisName='Month' yAxisName='Units' showNames='1' decimalPrecision='0' formatNumberScale='0'>
<set name='Jan' value='462' color='AFD8F8' />
<set name='Feb' value='857' color='F6BD0F' />
<set name='Mar' value='671' color='8BBA00' />
<set name='Apr' value='494' color='FF8E46' />
<set name='May' value='761' color='008E8E' />
<set name='Jun' value='960' color='D64646' />
<set name='Jul' value='629' color='8E468E' />
<set name='Aug' value='622' color='588526' />
<set name='Sep' value='376' color='B3AA00' />
<set name='Oct' value='494' color='008ED6' />
<set name='Nov' value='761' color='9D080D' />
<set name='Dec' value='960' color='A186BE' />
</graph>
2. 再建立一个展示页面，Demo.html ：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>第一个Flash图表页面</title>
<!-- 引入FusionCharts 需要的JS脚本文件 -->
<script language="JavaScript" src="chart/FusionCharts.js"></script>
</head>
<body>
<div id="chartDiv" align="center">First Chart Container Pie 3D</div>
<script type="text/javascript">
var myChart1 = new FusionCharts("chart/FCF_Column3D.swf", "myChartId", "600", "350");
myChart1.setDataURL("Data.xml");
myChart1.render("chartDiv");
</script>
</body>
</html>
3. 猛击 Demo.html 文件，即可看到如下效果：
4. 够简单吧，这样才好。
二、 对中文字符的支持
1. 让 FusionCharts支持中文
修改一下刚才 Data.xml 文件，加入几个中文字符，狂刷新浏览器，会看到几个不协调的字符。这里我修改图表标题(caption='Monthly Unit Sales' è caption='月销售历史')：
FusionCharts告诉我们XML文件加载失败，可能有非法字符。下面要修改Data.xml，使之好好工作。官方说当前Data.xml文件缺乏BOM标记（Byte Order Mark），打开UltraEdit 文本编辑器，另存为的时候，一定要选择：
UTF-8编码方式(已经附加BOM标记)，直接覆盖原文件。
再次刷新Demo.html 页面，即可看到标题变成了中文：
若您对16进制熟悉，以16进制打开文件，直接修改前6位字符为
”EF BB BF”,保存成UTF-8格式即可。
牢记：静态的XML文件，须包含BOM特征码。
2. 让动态产生的XML文件避免中文问题
我们实验一下把Data.xml文件替换成动态生成XML方式。
新建一个JSP 页面：Data.jsp ,输入以下内容：
<%@ page language="java" contentType="text/xml; charset=UTF-8"%>
<%
String xmlStr = "<graph caption='Monthly Unit Sales' xAxisName='Month' yAxisName='Units' showNames='1' decimalPrecision='0' formatNumberScale='0'>"
+ "<set name='Jan' value='462' color='AFD8F8' />"
+ "<set name='Feb' value='857' color='F6BD0F' />"
+ "<set name='Mar' value='671' color='8BBA00' />"
+ "<set name='Apr' value='494' color='FF8E46' />"
+ "<set name='May' value='761' color='008E8E' />"
+ "<set name='Jun' value='960' color='D64646' />"
+ "<set name='Jul' value='629' color='8E468E' />"
+ "<set name='Aug' value='622' color='588526' />"
+ "<set name='Sep' value='376' color='B3AA00' />"
+ "<set name='Oct' value='494' color='008ED6' />"
+ "<set name='Nov' value='761' color='9D080D' />"
+ "<set name='Dec' value='960' color='A186BE' />"
+ "</graph>";
out.write(xmlStr);
%>
在Demo.html页面，修改 setDataURL参数为“Data.jsp”，再次刷新Demo.html页面，即可看到效果。
下面在JSP页面中同样把图表标题修改成中文，刷新浏览器，会看到“Invalid XML Data”字样。
怎么办，设置JSP文件具有BOM标记，不行！设置其XML输出编码尝试一下吧：
<%@ page language="java" contentType="text/xml; charset=GBK"%>
看到了吗，UTF-8 被修改成了 GBK编码，刷新Demo.html文件，看一看到正常效果了。
牢记 ：动态产生的XML文档，编码须是GBK或者gb2312。
三、 表格数据源-字符串形式加载
以上使用FusionCharts 提供的 setDataURL方法，参数须是可访问、产生xml文档的URL地址。若不是url，字符串亦可作为参数传递过去：
新建Demo2.html文件：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>使用字符串充当数据源</title>
<script language="JavaScript" src="chart/FusionCharts.js"></script>
</head>
<body>
<div id="chartDiv" align="center"> Chart Container Pie 3D</div>
<script type="text/javascript">
//数据源
var xmlData = "<graph caption='Monthly Unit Sales' xAxisName='Month' yAxisName='Units' showNames='1' decimalPrecision='0' formatNumberScale='0'>" +
"<set name='Jan' value='462' color='AFD8F8' />" +
"<set name='Feb' value='857' color='F6BD0F' />" +
"<set name='Mar' value='671' color='8BBA00' />" +
"<set name='Apr' value='494' color='FF8E46' />" +
"<set name='May' value='761' color='008E8E' />" +
"<set name='Jun' value='960' color='D64646' />" +
"<set name='Jul' value='629' color='8E468E' />" +
"<set name='Aug' value='622' color='588526' />" +
"<set name='Sep' value='376' color='B3AA00' />" +
"<set name='Oct' value='494' color='008ED6' />" +
"<set name='Nov' value='761' color='9D080D' />" +
"<set name='Dec' value='960' color='A186BE' />" +
"</graph>";
var myChart1 = new FusionCharts("chart/FCF_Column3D.swf", "myChartId", "600", "350");
myChart1.setDataXML(xmlData);
myChart1.render("chartDiv");
</script>
</body>
</html>
访问Demo2.html页面，会看到正常的图标显示。
尝试一下将图表标题修改成中文，这次很顺利的显示出来了，但标题显示为乱码:
怎么办 ？把当前的html文件修改成包含有BOM特征码的UTF-8文件，这招不好使了。
解决方法，建立一个JSP页面（Demo2.jsp），比Demo2.html文件多了一行内容:
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
访问一下，可以看到中午乱码问题解决了。
牢记 ：提供字符串数据源的页面必须硬编码才行，可以是GBK或UTF-8。
再深入一下，动态产生的字符串数据源，是否也存在乱码问题。
修改Demo2.jsp中的
myChart1.setDataXML("<jsp:include page= 'Data2.jsp' />");</sp>
一、 开始一个简单的demo
1. 在你的网站根目录下新建 Data.xml文档，作为图表的数据源，内容如下：
<graph caption='Monthly Unit Sales' xAxisName='Month' yAxisName='Units' showNames='1' decimalPrecision='0' formatNumberScale='0'>
<set name='Jan' value='462' color='AFD8F8' />
<set name='Feb' value='857' color='F6BD0F' />
<set name='Mar' value='671' color='8BBA00' />
<set name='Apr' value='494' color='FF8E46' />
<set name='May' value='761' color='008E8E' />
<set name='Jun' value='960' color='D64646' />
<set name='Jul' value='629' color='8E468E' />
<set name='Aug' value='622' color='588526' />
<set name='Sep' value='376' color='B3AA00' />
<set name='Oct' value='494' color='008ED6' />
<set name='Nov' value='761' color='9D080D' />
<set name='Dec' value='960' color='A186BE' />
</graph>
2. 再建立一个展示页面，Demo.html ：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>第一个Flash图表页面</title>
<!-- 引入FusionCharts 需要的JS脚本文件 -->
<script language="JavaScript" src="chart/FusionCharts.js"></script>
</head>
<body>
<div id="chartDiv" align="center">First Chart Container Pie 3D</div>
<script type="text/javascript">
var myChart1 = new FusionCharts("chart/FCF_Column3D.swf", "myChartId", "600", "350");
myChart1.setDataURL("Data.xml");
myChart1.render("chartDiv");
</script>
</body>
</html>
3. 猛击 Demo.html 文件，即可看到如下效果：
4. 够简单吧，这样才好。
二、 对中文字符的支持
1. 让 FusionCharts支持中文
修改一下刚才 Data.xml 文件，加入几个中文字符，狂刷新浏览器，会看到几个不协调的字符。这里我修改图表标题(caption='Monthly Unit Sales' è caption='月销售历史')：
FusionCharts告诉我们XML文件加载失败，可能有非法字符。下面要修改Data.xml，使之好好工作。官方说当前Data.xml文件缺乏BOM标记（Byte Order Mark），打开UltraEdit 文本编辑器，另存为的时候，一定要选择：
UTF-8编码方式(已经附加BOM标记)，直接覆盖原文件。
再次刷新Demo.html 页面，即可看到标题变成了中文：
若您对16进制熟悉，以16进制打开文件，直接修改前6位字符为
”EF BB BF”,保存成UTF-8格式即可。
牢记：静态的XML文件，须包含BOM特征码。
2. 让动态产生的XML文件避免中文问题
我们实验一下把Data.xml文件替换成动态生成XML方式。
新建一个JSP 页面：Data.jsp ,输入以下内容：
<%@ page language="java" contentType="text/xml; charset=UTF-8"%>
<%
String xmlStr = "<graph caption='Monthly Unit Sales' xAxisName='Month' yAxisName='Units' showNames='1' decimalPrecision='0' formatNumberScale='0'>"
+ "<set name='Jan' value='462' color='AFD8F8' />"
+ "<set name='Feb' value='857' color='F6BD0F' />"
+ "<set name='Mar' value='671' color='8BBA00' />"
+ "<set name='Apr' value='494' color='FF8E46' />"
+ "<set name='May' value='761' color='008E8E' />"
+ "<set name='Jun' value='960' color='D64646' />"
+ "<set name='Jul' value='629' color='8E468E' />"
+ "<set name='Aug' value='622' color='588526' />"
+ "<set name='Sep' value='376' color='B3AA00' />"
+ "<set name='Oct' value='494' color='008ED6' />"
+ "<set name='Nov' value='761' color='9D080D' />"
+ "<set name='Dec' value='960' color='A186BE' />"
+ "</graph>";
out.write(xmlStr);
%>
在Demo.html页面，修改 setDataURL参数为“Data.jsp”，再次刷新Demo.html页面，即可看到效果。
下面在JSP页面中同样把图表标题修改成中文，刷新浏览器，会看到“Invalid XML Data”字样。
怎么办，设置JSP文件具有BOM标记，不行！设置其XML输出编码尝试一下吧：
<%@ page language="java" contentType="text/xml; charset=GBK"%>
看到了吗，UTF-8 被修改成了 GBK编码，刷新Demo.html文件，看一看到正常效果了。
牢记 ：动态产生的XML文档，编码须是GBK或者gb2312。
三、 表格数据源-字符串形式加载
以上使用FusionCharts 提供的 setDataURL方法，参数须是可访问、产生xml文档的URL地址。若不是url，字符串亦可作为参数传递过去：
新建Demo2.html文件：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>使用字符串充当数据源</title>
<script language="JavaScript" src="chart/FusionCharts.js"></script>
</head>
<body>
<div id="chartDiv" align="center"> Chart Container Pie 3D</div>
<script type="text/javascript">
//数据源
var xmlData = "<graph caption='Monthly Unit Sales' xAxisName='Month' yAxisName='Units' showNames='1' decimalPrecision='0' formatNumberScale='0'>" +
"<set name='Jan' value='462' color='AFD8F8' />" +
"<set name='Feb' value='857' color='F6BD0F' />" +
"<set name='Mar' value='671' color='8BBA00' />" +
"<set name='Apr' value='494' color='FF8E46' />" +
"<set name='May' value='761' color='008E8E' />" +
"<set name='Jun' value='960' color='D64646' />" +
"<set name='Jul' value='629' color='8E468E' />" +
"<set name='Aug' value='622' color='588526' />" +
"<set name='Sep' value='376' color='B3AA00' />" +
"<set name='Oct' value='494' color='008ED6' />" +
"<set name='Nov' value='761' color='9D080D' />" +
"<set name='Dec' value='960' color='A186BE' />" +
"</graph>";
var myChart1 = new FusionCharts("chart/FCF_Column3D.swf", "myChartId", "600", "350");
myChart1.setDataXML(xmlData);
myChart1.render("chartDiv");
</script>
</body>
</html>
访问Demo2.html页面，会看到正常的图标显示。
尝试一下将图表标题修改成中文，这次很顺利的显示出来了，但标题显示为乱码:
怎么办 ？把当前的html文件修改成包含有BOM特征码的UTF-8文件，这招不好使了。
解决方法，建立一个JSP页面（Demo2.jsp），比Demo2.html文件多了一行内容:
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
访问一下，可以看到中午乱码问题解决了。
牢记 ：提供字符串数据源的页面必须硬编码才行，可以是GBK或UTF-8。
再深入一下，动态产生的字符串数据源，是否也存在乱码问题。
修改Demo2.jsp中的
myChart1.setDataXML("<jsp:include page= 'Data2.jsp' />");</sp>
分享到：
发表评论
-
[转]构建Flex应用的10大误区
2011-05-31 23:29 715原文地址：http://www.infoq ... -
转：flex滤镜：聚光灯效果、放大镜效果、缩放模糊效果、浮雕效果和水波效果
2011-05-30 21:30 1712可惜提供的源代码没有相应的libs包 1:聚光灯效果： 实 ... -
Air File类使用方法
2010-09-06 10:24 2143air file 系统中文件或目 ... -
Flex air修改外部xml文件
2010-09-06 09:35 2047AIR的文件操作不难，看完教程应该可以满足你对文件的所有基本操 ... -
air 读取服务器端文件
2010-09-03 13:44 991import flash.events.Event; ... -
air下载文件
2010-09-02 10:43 797http://www.code-design.cn/blogd ... -
三维程序/游戏制作基本常识
2010-08-25 13:19 853Furry/DDM君: 很多flash3d初 ... -
FLEX的RIA应用程序中配置文件(*-app.xml)的说明
2010-06-22 16:53 844<?xml version="1.0" ... -
Adobe AIR右键菜单和系统托盘（Tray)功能以及实现方法
2010-05-31 17:21 2027AIR教程 Adobe AIR右键菜单和系统托盘（Tray ... -
Flash Bulider4注册码生成器
2010-05-18 11:03 1785Flash Builder 4正式版发布，很高兴还有简体中文 ... -
FLex视图模式与视图转换
2010-05-10 14:13 17933.2 视图模式与视图转换 3.2.1 视图模式 Fle ... -
Flex ShareObject简单应用
2010-04-26 17:47 1031[size=medium]Share object一般用来保存 ... -
FLEX问题总汇(1)
2010-04-23 15:17 835论坛一直有些问题有人重复的发帖,今天有空就做了点总结,希望和大 ... -
Flex 开发: 类的反射
2010-04-23 10:34 1014Flex 反射简介 在很多时候反射为程序的动态性提供了一种可 ... -
Flex 3 体验:AdvancedDataGrid的使用(第一部分)
2010-04-22 17:14 1383今天我们要说的是官方文档中用了整章介绍的AdvancedDat ... -
FLEX alive pdf 打印pdf
2010-04-22 10:33 1916FLEX alive pdf 打印pdf ,废话不多说了，代码 ... -
FLEX AIR 连接local SQL database
2010-04-22 10:19 1281FLEX AIR 连接本地LocalSQL实现增删改查，废话不 ... -
将flex页面数据导出到excel
2010-04-20 10:07 1559本例实现将flex中的数据 ... -
FLEX TEXTINPUT restrict(正则表达式，约束,限定)
2010-04-19 16:28 2047通常要对输入TextInput中 ... -
actionscript 中 如何控制数字精度(小数位数)
2010-04-16 16:58 1619很简单的一件事，但是如果不知道的话一样很麻烦。Number包里 ...
相关推荐
在fusioncharts中点击柱子中文乱码问题，(i) + "' value='" + list.get(i).getCount() + "' link='[removed]myJss('" + idTest + "','" + idTest1 + "'," + "'" + path + "&category;=...
但是会有乱码问题(可能出现在AJAX情况),具体使用过的童鞋应该明白. 具体细节不详细说明了. 处理办法. 如果你Ajax请求的返回内容乱码,就直接使用Jquery.ajax. 代码如下:function mychartclick(month) { var id =1; ...
FusionCharts 破解版 是中文文档，其中包括了开发需要的flash 和 配置的xml文件。 是很好的例子。 有意者请下载参阅
FusionCharts 部分中文文档.doc
fusionCharts完美破解版：解决中文竖排不显示问题 FusionCharts 完美破解版，不是之前的36个，一共49个 包含FusionCharts使用手记 官方Demo 中文开发指南 解决中文乱码Demo Area2D.swf Bar2D.swf Bubble.swf Column...
fusioncharts中文幫助文檔 fusioncharts中文幫助文檔
fusioncharts中文开发指南
FusionCharts一个好用的报表工具，方便、高效、快速创建报表。各式报表应有尽有。
NULL 博文链接：https://liujiao-976542139.iteye.com/blog/1732800
FusionCharts是最炫的3D图形工具，全面取代JFreeChar，这里提供了破解版，能生成没有水印的图形报表。 FusionCharts中文开发指南为pdf格式
当你利用FusionCharts创建图表时报错，原因是多方面的。本文总结了100个常见问题及解决方法供大家参考，希望对大家有帮助。
4、收集网上一些FusionCHarts的使用问题，如中文乱码的解决办法； 5、包括了官方的FusionCharts.js脚本文件，拿去即可使用了，呵呵； 6、最新独家修改的官方的DEMO例子，直接可以在本地打开哦。 不了解FusionCharts...
4、收集网上一些FusionCHarts的使用问题，如中文乱码的解决办法； 5、包括了官方的FusionCharts.js脚本文件，拿去即可使用了; 6、最新独家修改的官方的DEMO例子，直接可以在本地打开哦。 不了解FusionCharts的人...
利用FusionCharts 实现数据图表展示 利用FusionCharts 实现数据图表展示 利用FusionCharts 实现数据图表展示 利用FusionCharts 实现数据图表展示
fusionCharts正式版 You need to enable frames in your browser to see FusionCharts documentation.
FusionCharts中文教程、FusionCharts详细参数，FusionCharts帮助文档 我将自己从开始到使用这套插件开发的所有文档放在这里，希望对大家有所帮助
FusionCharts Free中文开发指南.doc
FusionCharts
FustionCharts总结：包含FusionCharts XT (v3.2.2),test项目,FusionCharts参数说明