从 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>
- 大小: 20.1 KB
- 大小: 639 Bytes
- 大小: 4.5 KB
- 大小: 16.9 KB
- 大小: 21.9 KB
- 大小: 980 Bytes
- 大小: 11 KB
- 大小: 9.4 KB
分享到:
相关推荐
包含FusionCharts使用手记 官方Demo 中文开发指南 解决中文乱码Demo Area2D.swf Bar2D.swf Bubble.swf Column2D.swf Column3D.swf Doughnut2d.swf Doughnut3D.swf FCExporter.swf Funnel.swf InverseMSArea.swf ...
FusionCharts使用源码例子,结合FusionCharts使用
fusioncharts使用范例
FusionCharts V3使用文档.pdf
用fusioncharts使用json格式数据展示图表
这个文档写了FusionCharts如何使用
FusionCharts图表组件简单使用
FusionCharts使用及参数说明,很好的图表工具,使用简单方便
FusionCharts使用之保存图片 说明文档
fusionCharts使用文档
FusionCharts 帮助文档 FusionCharts 学习 FusionCharts 使用笔记
FusionCharts详解使用
3. 使用前的准备工作(基于java的Web工程为例): 1 4. 创建第一个Chart: 1 5. FusionCharts提供多样式图: 3 6. FusionCharts的高级特性: 7 7. FusionCharts提供了很多设置chart样式的属性: 10 8. 动态XML生成的...
FusionCharts是一款非常优秀的数据报表组件,外观上远远胜于JFreeChart
FusionCharts一个好用的报表工具,方便、高效、快速创建报表。各式报表应有尽有。
利用FusionCharts 实现数据图表展示 利用FusionCharts 实现数据图表展示 利用FusionCharts 实现数据图表展示 利用FusionCharts 实现数据图表展示
FusionCharts图表控件中文版使用手册。构成fusionCharts的三要素:swf、data.xml、承载图表的载体