fusioncharts

Index.jsp代码如下：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>My First FusionCharts</title>

</head>

</object>

</body>

</html>

只用了解标记的参数就可以了。其中Column3D.swf是显示flash需要用到的文件，在Fusion Charts的资源包中，Data.xml是flash显示数据的数据源。

要导入的文件：

Data.xml文件如下：

</chart>

向项目中加入以上代码后生成的flash报表如下：

2.示例二

Index2.jsp代码如下：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>My First FusionCharts</title>

</head>

var chart = new FusionCharts("FusionCharts/Bar2D.swf", "ChartId", "500", "350", "0", "0");

chart.setDataURL("Data/Data2.xml");

chart.render("chartdiv");

</script>

</div>

</body>

</html>

Data2.xml如下：

</chart>

生成的flash报表如下：

//myChart.setDataXML(strChart);

myChart.render("chartdiv");

</script></td>

</tr>

<tr>

String strChart = "";

strChart += "<?xml version='1.0' encoding= 'gb2312'?>";

strChart += "<chart dateFormat='yyyy/mm/dd'ganttWidthPercent='85' canvasBorderColor='999999' canvasBorderThickness='0' gridBorderColor='4567aa' gridBorderAlpha='20' showSlackAsFill='1' slackFillColor='eeeeee' ganttPaneDuration='30' ganttPaneDurationUnit='d'>";

strChart += "<categories bgColor='ffffff' fontColor='1288dd' fontSize='12' align='center'>";

strChart += "<category start='2011/10/17' end='2011/11/01' label='October'/>";

strChart += "<category start='2011/11/01' end='2011/11/05' label='November'/>";

strChart += "</categories>";

strChart += "<categories bgColor='ffffff' fontColor='1288dd' isBold='0'>";

strChart += "<category start='2011/10/17' end='2011/10/18' label='17' />";

strChart += "<category start='2011/10/18' end='2011/10/19' label='18' />";

strChart += "<category start='2011/10/19' end='2011/10/20' label='19' />";

strChart += "<category start='2011/10/20' end='2011/10/21' label='20' />";

strChart += "<category start='2011/10/21' end='2011/10/22' label='21' />";

strChart += "<category start='2011/10/22' end='2011/10/23' label='22' />";

strChart += "<category start='2011/10/23' end='2011/10/24' label='23' />";

strChart += "<category start='2011/10/24' end='2011/10/25' label='24' />";

strChart += "<category start='2011/10/25' end='2011/10/26' label='25' />";

strChart += "<category start='2011/10/26' end='2011/10/27' label='26' />";

strChart += "<category start='2011/10/27' end='2011/10/28' label='27' />";

strChart += "<category start='2011/10/28' end='2011/10/29' label='28' />";

strChart += "<category start='2011/10/29' end='2011/10/30' label='29' />";

strChart += "<category start='2011/10/30' end='2011/10/31' label='30' />";

strChart += "<category start='2011/10/31' end='2011/11/01' label='31' />";

strChart += "<category start='2011/11/01' end='2011/11/02' label='1' />";

strChart += "<category start='2011/11/02' end='2011/11/03' label='2' />";

strChart += "<category start='2011/11/03' end='2011/11/04' label='3' />";

strChart += "<category start='2011/11/04' end='2011/11/05' label='4' />";

strChart += "</categories>";

strChart += "<processes headerText='里程碑' fontColor='000000' fontSize='12' isAnimated='1' bgColor='4567aa' headerVAlign='middle' headerAlign='left' headerbgColor='4567aa' headerFontColor='ffffff' headerFontSize='12' align='left' isBold='1' bgAlpha='25'>";

strChart += "<process label='张三' id='1134' />";

strChart += "<process label='李四' id='1135' />";

strChart += "</processes>";

strChart += "<dataTable showProcessName='1' nameAlign='left' fontColor='000000' fontSize='10' vAlign='right' align='center' headerVAlign='bottom' headerAlign='left' headerbgColor='4567aa' headerFontColor='ffffff' headerFontSize='10'>";

strChart += "</dataTable>";

strChart += "<tasks >";

strChart += "<task label='Plan' toolText='Progress:100.00%;TaskTime:2011/10/18To2011/10/19' processId='1134' start='2011/10/18' end='2011/10/20' id='1134-1' color='ffc20e' height='32%' topPadding='12%'percentComplete='100.00' /> ";

strChart += "<task label='Actual' toolText='Progress:10.0%;TaskTime:2011/10/18To2011/10/25' processId='1134' start='2011/10/18' end='2011/10/26' id='1134' color='ff938e'alpha='100' topPadding='56%' height='32%'percentComplete='10.0' />";

strChart += "<task label='Plan' toolText='Progress:100.00%;TaskTime:2011/10/18To2011/10/19' processId='1135' start='2011/10/18' end='2011/10/20' id='1135-1' color='ffc20e' height='32%' topPadding='12%'percentComplete='100.00' />";

strChart += "<task label='Actual' toolText='Progress:100.0%;TaskTime:2011/10/18To2011/10/18' processId='1135' start='2011/10/18' end='2011/10/19' id='1135' color='92d5ff' alpha='100' topPadding='56%' height='32%' percentComplete='100.0' /> ";

strChart += "</tasks>";

strChart += "<legend>";

strChart += "<item label='Plan' color='ffc20e' />";

strChart += "<item label='Normal' color='#bdebac' />";

strChart += "<item label='Advance' color='#92d5ff' />";

strChart += "<item label='Lag' color='#ff938e' />";

strChart += "</legend>";

strChart += "<styles>";

strChart += "<definition>";

strChart += "<style type='Font' name='legendFont' size='12' />";

strChart += "</definition>";

strChart += "<application>";

strChart += "<apply toObject='LEGEND' styles='legendFont' />";

strChart += "</application>";

strChart += "</styles>";

strChart += "</chart>";

FusionChartsCreator fusionChartsCreator = new FusionChartsCreator();

fusionChartsCreator.strToXml(strChart);

//String chartHTMLCode=FusionChartsCreator.createChartHTML("FusionCharts/Gantt.swf", "", strChart, "myFirst", 800, 300, false);

<%--

<%=chartHTMLCode%>

--%>

</div>

var myChart = new FusionCharts("FusionCharts/Gantt.swf", "myChartId", "800", "300", "0", "0");

myChart.setDataURL("Data/Gantt1.xml");

//myChart.setDataXML(strChart);

myChart.render("chartdiv1");

</script>

</td>

</tr>

</table>

</body>

</html>

----------------------------------------------------------

附：

一个学习fusioncharts很好的blog

http://blog.sina.com.cn/s/articlelist_1463420203_7_1.html

-----------------------

附件为一些swf文件，相对比较全（gallery.rar为甘特图的swf文件）

示例是随便以前写的，不怎么好，但是附件可能会对你有帮助！

2.示例二

猜你喜欢