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


  • 相关阅读:
    ESFramework Demo -- 动态组及群聊Demo(附源码)
    反射整理学习
    JavaScript 每周导读
    SQLSERVER 中的 with锁级别
    代码细节重构:请对我的代码指手划脚
    SQLServer查询死锁语句
    模块加载系统 v16
    数据结构之排序算法C#实现
    浅谈操作系统对内存的管理
    如何编写可维护的面向对象JavaScript代码
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13315802.html
Copyright © 2011-2022 走看看