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


  • 相关阅读:
    arangodb安装
    ubuntu安装java方法
    设置代理
    自动机
    统计学习基本理论知识(一)
    条件随机场(四)
    条件随机场(三)
    hive安装
    GC root & 使用MAT分析java堆
    jinfo介绍
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13315802.html
Copyright © 2020-2023  润新知