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,结果如下图:


  • 相关阅读:
    setStyleSheet来设定窗口部件的样式
    Qt中设置widget背景颜色/图片的注意事项(使用样式表 setStyleSheet())
    Qt编程—去掉标题栏和设置窗口透明用法
    php设计模式总结
    典型的MVC架构图
    搜索引擎设计分析
    社区论坛设计分析
    (二) vim的Tabbar插件
    目录结构设计分析
    用户注册系统分析
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13315806.html
Copyright © 2011-2022 走看看