zoukankan      html  css  js  c++  java
  • FusionChart三维立体图之折线图

    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、显示结果如下图:


  • 相关阅读:
    ASP.NET MVC案例——————拦截器
    Windows Azure Virtual Network (10) 使用Azure Access Control List(ACL)设置客户端访问权限
    Windows Azure Storage (20) 使用Azure File实现共享文件夹
    Windows Azure HandBook (5) Azure混合云解决方案
    Windows Azure Service Bus (6) 中继(Relay On) 使用VS2013开发Service Bus Relay On
    Azure PowerShell (9) 使用PowerShell导出订阅下所有的Azure VM的Public IP和Private IP
    Windows Azure Service Bus (5) 主题(Topic) 使用VS2013开发Service Bus Topic
    Azure China (9) 在Azure China配置CDN服务
    Windows Azure Storage (19) 再谈Azure Block Blob和Page Blob
    Windows Azure HandBook (4) 分析Windows Azure如何处理Session
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13315802.html
Copyright © 2011-2022 走看看