FusionChart三维立体图

1、首先,新建一个web工程,取名3dChart;

2、将包含FusionChart的swf文件放在WebContent目录下,给文件夹取名为fusionchart;

3、在WebContent目录下,新建一个chart.jsp和Data.xml

chart.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>FusionChart三维立体图</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{
      width:100%;
      height:100%;
      font-size: 12px;
    }
    #column{
      width:100%;
      height:100%;
      font-size:12px;
    }
</style>
<script type="text/javascript">
    $(function(){
    var chart = new FusionCharts( "fusionchart/MSCombi3D.swf", "chart", "100%", "100%", "0", "1");
    chart.setXMLUrl("Data.xml");
    chart.render("column");
    });
</script>
</head>
<body>
   <div id="column"></div>
</body>
</html>


Data.xml源文件如下:

<?xml version="1.0" encoding="UTF-8"?>
<chart palette="2" caption="节日活动人数统计" showLabels="1" showvalues="0" 
       decimals="0" clustered="0" exeTime="1.5" showPlotBorder="0" 
       zGapPlot="30" zDepth="140" divLineEffect="emboss" startAngX="10" 
       endAngX="18" startAngY="-10" endAngY="-40" bgColor="cccccc" baseFontSize="12">
<categories>
    <category label="五一劳动活动" />
    <category label="端午节活动" />
    <category label="中秋团圆活动" />
    <category label="国庆长假活动" />
    <category label="元旦新春活动" />
</categories>

<dataset seriesName="目标人数" color="8BBA00" areaBorderColor="8BBA00" showValues="0">
<set value="3500000" />
<set value="4483578" />
<set value="5897989" />
<set value="6894646" />
<set value="7845566" />
</dataset>

<dataset seriesName="累计总人数" color="F6BD0F" areaBorderColor="F6BD0F" showValues="0">
<set value="7845455" />
<set value="5613121" />
<set value="4784545" />
<set value="7845455" />
<set value="2651222" />
</dataset>

<dataset seriesName="受访人数" color="AFD8F8" areaBorderColor="AFD8F8" showValues="0">
<set value="1578455" />
<set value="2457845" />
<set value="9894545" />
<set value="5612345" />
<set value="6894545" />
</dataset>

<dataset seriesName="访友人数" color="2FD8F8" areaBorderColor="2FD8F8" showValues="0">
<set value="3578455" />
<set value="8457845" />
<set value="2894545" />
<set value="7612345" />
<set value="3894545" />
</dataset>

</chart>

4、将项目添加到Tomcat7.x下,运行http://localhost:8080/3dChart/chart.jsp,结果如下图:

FusionChart三维立体图_第1张图片


你可能感兴趣的:(jquery,css,fusionchart,Column3D,三维立体图)