1、新建Web工程,取名chart
2、在WebContent目录下,将FusionChart的swf文件放在指定的文件夹下
3、WebContent下新建一个JSP文件,取名line3D.jsp,源码如下:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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>3D LineChart</title>
<script type="text/javascript" src="fusionchart/FusionCharts.js"></script>
<script type="text/javascript" src="fusionchart/jquery-1.10.1.js"></script>
<style type="text/css">
body{
100%;
height:100%;
font-size: 12px;
}
#Line3D{
100%;
height:100%;
font-size:12px;
}
</style>
<script type="text/javascript">
$(function(){
var chart = new FusionCharts( "fusionchart/MSLine.swf", "chart", "100%", "100%", "0", "1");
chart.setXMLUrl("Line3D.xml");
chart.render("Line3D");
});
</script>
</head>
<body>
<div id="Line3D"></div>
</body>
</html>
4、同样,新建一个xml文件,取名Line3D.xml,源码如下:
<?xml version="1.0" encoding="UTF-8"?>
<chart bgColor="FFE4C4" outCnvBaseFontColor="666666" caption="月收入"
xAxisName="月份" yAxisName="收入" showLabels="1" showValues="0"
plotFillAlpha="70" numVDivLines="10" showAlternateVGridColor="1"
AlternateVGridColor="e1f5ff" divLineColor="999999" baseFontColor="666666"
canvasBorderThickness="1" showPlotBorder="0" plotBorderThickness="0"
zgapplot="0" zdepth="120" exeTime="1.2" dynamicShading="1" YZWallDepth="5"
ZXWallDepth="5" XYWallDepth="5" canvasBgColor="BDB76B" startAngX="0"
startAngY="0" endAngX="5" endAngY="-25" divLineEffect="bevel" baseFontSize="12">
<categories>
<category label="一月" />
<category label="二月" />
<category label="三月" />
<category label="四月" />
<category label="五月" />
<category label="六月" />
<category label="七月" />
<category label="八月" />
<category label="九月" />
<category label="十月" />
<category label="十一月" />
<category label="十二月" />
</categories>
<dataset seriesName="张三" color="B1D1DC" plotBorderColor="B1D1DC" renderAs="line">
<set value="27400" />
<set value="29800"/>
<set value="25800" />
<set value="26800" />
<set value="29600" />
<set value="32600" />
<set value="31800" />
<set value="36700" />
<set value="29700" />
<set value="31900" />
<set value="32900" />
<set value="34800" />
</dataset>
<dataset seriesName="李四" color="C8A1D1" plotBorderColor="C8A1D1" renderAs="line">
<set value="4850"/>
<set value="9850"/>
<set value="4500"/>
<set value="6500"/>
<set value="7600" />
<set value="6800" />
<set value="11800" />
<set value="19700" />
<set value="21700" />
<set value="21900" />
<set value="22900" />
<set value="29800" />
</dataset>
</chart>
5、显示结果如下图: