程序员人生 网站导航

FusionCharts入门教程:以实例代码让你快速上手

栏目:综合技术时间:2014-05-05 03:07:55
在使用FusionCharts前所要做的只是拷贝几个SWF文件而已,网上有破解版也有免费版
可以下来,使用FusionCharts,将想要显示的数据转成XML,FusionCharts帮你处理xml数据显示成你需要的flash.

将下载的FusionCharts文件夹放到你的网站目录中,可以查看相关API,

现在来做个实例吧

Java代码
<%@ page contentType="text/html; charset=UTF-8" import="java.util.*" %>
<jsp:useBean id ="chart" scope ="page" class="com.gui.chart.FunsionCharts" />
<HTML>
<HEAD>
<TITLE>FusionCharts - Simple Column 3D Chart</TITLE>
<META HTTP-EQUIV="Content-Type" content="text/html; charset=UTF-8">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="0">
</HEAD>
<BODY>

<CENTER>
<h2>FusionCharts Examples</h2>
<%
StringBuffer sb = new StringBuffer();
sb.append("<chart caption='对比图' shownames='1' imageSave='1'"
+"imageSaveURL='FusionChartsSave.jsp' imageSaveDialogFontColor ='cfbbfc'>");
sb.append("<categories><category label='资产负债表(%25)' /><category label='负债与所有者权益比率(%25)' />"
+"<category label='负债与有形净资产比率(%25)' /></categories>");
sb.append("<dataset seriesName='2006' color='F6BD0F' showValues='1'><set value='60.9300' />"
+"<set value='30.1900' /><set value='25.4900' /></dataset>");
sb.append("<dataset seriesName='2007' color='000000' showValues='1'><set value='68.4200' />"
+"<set value='45.8100' /><set value='66.8200' /></dataset>");
sb.append("<dataset seriesName='2008' color='8BBA00' showValues='1'><set value='53.34' />"
+"<set value='82.22' /><set value='91.21' /></dataset>");
sb.append("</chart>");
//Create the chart - Column 3D Chart with data from Data/Data.xml
//createChartHTML方法可在源码包中查找 CodeJSPIncludesFusionCharts.jsp
String chartHTMLCode=chart.createChartHTML("flash/MSColumn3D.swf", "", sb.toString(), "myFirst", 600, 300, false);
%> <%=chartHTMLCode%> <BR>
<BR>
</CENTER>
</BODY>
</HTML>
<%@ page contentType="text/html; charset=UTF-8" import="java.util.*" %>
<jsp:useBean id ="chart" scope ="page" class="com.gui.chart.FunsionCharts" />
<HTML>
<HEAD>
<TITLE>FusionCharts - Simple Column 3D Chart</TITLE>
<META HTTP-EQUIV="Content-Type" content="text/html; charset=UTF-8">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="0">
</HEAD>
<BODY>

<CENTER>
<h2>FusionCharts Examples</h2>
<%
StringBuffer sb = new StringBuffer();
sb.append("<chart caption='对比图' shownames='1' imageSave='1'"
+"imageSaveURL='FusionChartsSave.jsp' imageSaveDialogFontColor ='cfbbfc'>");
sb.append("<categories><category label='资产负债表(%25)' /><category label='负债与所有者权益比率(%25)' />"
+"<category label='负债与有形净资产比率(%25)' /></categories>");
sb.append("<dataset seriesName='2006' color='F6BD0F' showValues='1'><set value='60.9300' />"
+"<set value='30.1900' /><set value='25.4900' /></dataset>");
sb.append("<dataset seriesName='2007' color='000000' showValues='1'><set value='68.4200' />"
+"<set value='45.8100' /><set value='66.8200' /></dataset>");
sb.append("<dataset seriesName='2008' color='8BBA00' showValues='1'><set value='53.34' />"
+"<set value='82.22' /><set value='91.21' /></dataset>");
sb.append("</chart>");
//Create the chart - Column 3D Chart with data from Data/Data.xml
//createChartHTML方法可在源码包中查找 CodeJSPIncludesFusionCharts.jsp
String chartHTMLCode=chart.createChartHTML("flash/MSColumn3D.swf", "", sb.toString(), "myFirst", 600, 300, false);
%> <%=chartHTMLCode%> <BR>
<BR>
</CENTER>
</BODY>
</HTML>

另存图片功能
在<chart caption='name' shownames='1' imageSave='1'
imageSaveURL='FusionChartsSave.jsp' >
好像不支持jdk 1.3,
除了jsp方式另存,还有其他方式可供参考
具体可以看ImageSaving目录中的源码

在FusionCharts 里,如果要在图形里用到一些特殊的字符,你就要对它进行编码,否则就无法显示。

欧元符号
在FusionCharts 里显示“€”,你需要用“%80”来替换它。
上面的代码会在数字前面都加上“€”。

英镑符号
在FusionCharts里显示“£”,你需要用“%A3”来替换它。

人民币符号
在FusionCharts 里显示“¥”,你需要用“%A5”来替换它。

分符号
在FusionCharts里显示“¢”,你需要用“%A2”来替换它.

百分号符号
在FusionCharts里显示“%”,你需要用“%25”来替换它。

&符号
在FusionCharts 里显示“&”,你需要用“&amp;”来替换它。

>符号
在要用“&gt;”来替换它。如下:

单引号符号
在FusionCharts 里显示“'”,你需要用“&apos;”来替换它。如下:
<graph decimalPrecision='0' >
<set name='John&apos;s Count' value='420' color='AFD8F8' />
<set name='Mary&apos;s Count' value='295' color='F6BD0F' />
<set name='Tom&apos;s Count' value='523' color='8BBA00' />
</graph>

上面的代码显示为“John's Count”。
如果你想要显示双引号,直接使用就可以了,前提是你的属性值是用单引号括起来的。如果你的属性值是用双引号括起来的,你要显示单引号,也可以直接使用,而不必用“&apos;”来替换它

------分隔线----------------------------
------分隔线----------------------------

最新技术推荐