从 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>
分享到:
相关推荐
这个程序是自己写的一个关于fusioncharts的简单应用,基本上把fusioncharts的作用体现了出来,通过修改这个程序可以实现你需要的功能。这个程序是学习fusioncharts很好的入门程序。
FusionCharts是一个Flash的...FusionCharts提供先进的办法,将图表与AJAX应用程式或JavaScript模组。您可以随时更新海图在用户端,调用JavaScript函数的热点链结,或要求作出动态XML资料到伺服器不涉及任何页面刷新。
FusionCharts 实例应用学习,效果很cool,简单实例,易学易上手
angular-fusioncharts, 面向FusionCharts的Angular JS绑定 #AngularJS 图表插件简单有效的AngularJS图表插件。###Details 使用这个AngularJS图表插件,只使用一个指令向你的网络和移动应用程序添加交互式图表。 从...
每个 ArrayList 实例都有一...并未指定增长策略的细节,因为这不只是添加元素会带来分摊固定时间开销那样简单。 在添加大量元素前,应用程序可以使用 ensureCapacity 操作来增加 ArrayList 实例的容量。这可以减少递增
FCF的XML参考分为Single Series Charts、Multi-Series Charts、Stacked Charts等等好几部分,但是对于绝大部分应用来说,Single Series Charts就足够了。 Single Series Charts包括Column 2D Chart、Column 3D Chart...
FusionCharts JavaScript图表库的一个简单而轻巧的官方Angular组件。 angular-fusioncharts使您可以轻松地在Angular应用程序中添加JavaScript图表。 Github回购: : 文档: : 支持: : 融合图 官方网站: : ...
FusionCharts JavaScript图表库的一个简单轻巧的官方React组件。 react-fusioncharts使您可以轻松地在React应用程序或项目中添加JavaScript图表。 Github回购: : 文档: : 支持: : 融合图 官方网站: : ...
苗条融合图用于FusionCharts JavaScript图表库的简单轻巧的官方Svelte组件。 svelte-fusioncharts使您可以轻松地在Svelte应用程序或项目中添加JavaScript图表。Github回购: : 支持: : 融合图官方网站: : 官方NPM...
angularjs-fusioncharts 一个用于FusionCharts JavaScript图表库的简单轻巧的官方AngularJS组件。 angularjs-fusioncharts使您可以轻松地在AngularJS应用程序中添加JavaScript图表。Github回购: : 文档: : 支持: ...
该项目不再被积极维护FusionCharts React Native: 一个React Native组件,为FusionCharts JavaScript图表库提供绑定。 它可以轻松地将丰富的交互式图表添加到任何React Native项目中。Github回购: : 文档: : 支持...
Highcharts (非开源,商业收费)是一个用纯JavaScript编写的一个图表库(需要jquery支持), 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习、个人网站和非商业用途使用,商业...
Highcharts (非开源,商业收费)是一个用纯JavaScript编写的一个图表库(需要jquery支持), 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习、个人网站和非商业用途使用,商业...
Git空间Visualize your GitHub Profile 一个 Web 应用程序 :magnifying_glass_tilted_right: 可视化 GitHub 配置文件 :bar_chart: 使用简单的身份验证 :locked_with_key: 使用react-auth0 :card_file_box: 技术栈 :...
一个挺好用的flash图形组件,可以动态生成柱状图、饼图等;能够和php、asp、.net、JSP等一起应用;操作简单方便,易学易用;最重要的一点是这是个免费的版本,虽然有些限制,但对于大多数应用已然够用了。