FusionChart三维立体图之折线图

niulanshan

浏览: 563997 次

最近访客更多访客>>

扶起之秀

qijojo

qy86615069

yungaoyue2005

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (1540)

社区版块

存档分类

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{
      width:100%;
      height:100%;
      font-size: 12px;
    }
    #Line3D{
      width: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、显示结果如下图：