zoukankan      html  css  js  c++  java
  • 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{
          100%;
          height:100%;
          font-size: 12px;
        }
        #column{
          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,结果如下图:


  • 相关阅读:
    五种常见的 PHP 设计模式
    转载:php header下载乱码 空格 问题
    PHP程序员最常犯的11个MySQL错误
    启迪人心:10个的有关编程的至理名言
    如何使用搜索技巧来成为一名高效的程序员
    随机验证码
    产生sql表中表示字段, 实现自增列
    在当前页面弹出对话框
    读取页面传入的URL值
    Sql临时表
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13315806.html
Copyright © 2011-2022 走看看