在项目目录下,新建文件夹Gallery存放jsp文件、datas存放xml文件、FusionCharts存放swf文件、新建js文件夹存放js文件。
将FCF_MSLine.swf放置在FusionCharts下。
将FusionCharts.js放置在jS文件夹下。
在datas下新建MSLine.xml,代码如下:
<graph caption='Daily Visits'
subcaption='(from 8/6/2006 to 8/12/2006)'
hovercapbg='FFECAA'
hovercapborder='F47E00'
formatNumberScale='0'
decimalPrecision='0'
showvalues='0'
numdivlines='3'
numVdivlines='0'
yaxisminvalue='1000'
yaxismaxvalue='1800'
rotateNames='1' >
<!--caption 图表主标题,
subcaption 图表副标题,
hoverCapBgColor 悬停说明框背景色,6位16进制颜色值,
hoverCapBorderColor 悬停说明框边框颜色,6位16进制颜色值
formatNumberScale 是否格式化数字,默认为1(True),自动的给你的数字加上K(千)
decimalPrecision 指定小数位的位数, [0-10] 例如:='0' 取整
showValues 是否在图表显示对应的数据值,默认为1(True)
numDivLines 画布内部水平分区线条数,数字
numVDivLines 画布内部垂直分区线条数,数字.
yAxisMinValue 指定纵轴(y轴)最小值,数字
yAxisMaxValue 指定纵轴(y轴)最小值,数字
rotateNames 是否旋转显示标签,默认为0(False):横向显示
-->
<categories >
<category name='8/6/2006' />
<category name='8/7/2006' />
<category name='8/8/2006' />
<category name='8/9/2006' />
<category name='8/10/2006' />
<category name='8/11/2006' />
<category name='8/12/2006' />
</categories>
<dataset seriesName='Offline Marketing' color='1D8BD1' anchorBorderColor='1D8BD1' anchorBgColor='1D8BD1'>
<set value='1327' />
<set value='1826' />
<set value='1699' />
<set value='1511' />
<set value='1904' />
<set value='1957' />
<set value='1296' />
</dataset>
<dataset seriesName='Search' color='F1683C' anchorBorderColor='F1683C' anchorBgColor='F1683C'>
<set value='2042' />
<set value='3210' />
<set value='2994' />
<set value='3115' />
<set value='2844' />
<set value='3576' />
<set value='1862' />
</dataset>
<dataset seriesName='Paid Search' color='2AD62A' anchorBorderColor='2AD62A' anchorBgColor='2AD62A'>
<set value='850' />
<set value='1010' />
<set value='1116' />
<set value='1234' />
<set value='1210' />
<set value='1054' />
<set value='802' />
</dataset>
<dataset seriesName='From Mail' color='DBDC25' anchorBorderColor='DBDC25' anchorBgColor='DBDC25'>
<set value='541' />
<set value='781' />
<set value='920' />
<set value='754' />
<set value='840' />
<set value='893' />
<set value='451' />
</dataset>
</graph>
在FusionCharts下新建MSLine.jsp文件,代码如下:
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>FusionCharts Free Documentation</title>
<link rel="stylesheet" href="<%=basePath%>css/Style.css" type="text/css" />
<script language="JavaScript" src="<%=basePath%>js/FusionCharts.js"></script>
</head>
<body>
<table width="98%" border="0" cellspacing="0" cellpadding="3" align="center">
<tr>
<td valign="top" class="text" align="center"> <div id="chartdiv" align="center">
FusionCharts. </div>
<script type="text/javascript">
var chart = new FusionCharts("<%=basePath%>FusionCharts/FCF_MSLine.swf", "ChartId", "600", "350");
chart.setDataURL("<%=basePath%>datas/MSLine.xml");
chart.render("chartdiv");
</script> </td>
</tr>
</table>
</body>
</html>