`
niulanshan
  • 浏览: 565417 次
文章分类
社区版块
存档分类
最新评论

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{
      width:100%;
      height:100%;
      font-size: 12px;
    }
    #Line3D{
      width: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、显示结果如下图:


分享到:
评论

相关推荐

    三维立体图及答案.pdf

    三维立体图技术详解 三维立体图是一种特殊的图像表现形式,它可以在二维平面上展示三维立体的效果。这种图像的秘密在于它的视觉陷阱,即眼睛可以看到三维立体的效果,而实际上只是二维平面上的图像。 三维立体图的...

    C# OpenGL 三维立体图绘制源码

    C# OpenGL 三维立体图绘制 源码 用C#实现调用opengl实现三维图的绘制。如有问题,请发送邮件至gaocongly@126.com咨询讨论

    python_pyecharts画三维折线图1.csv

    python_pyecharts画三维折线图 测试数据

    三维立体图像制作大师 V3.02 注册版

    在图像制作领域,三维立体图是一种利用人眼视差创造深度错觉的技术。通过特定的算法和处理方法,可以使静止的二维图像呈现出立体效果,仿佛图像中的物体跳出了画面,具有了空间感。这款软件就是帮助用户实现这一效果...

    三维立体图

    ### 三维立体图知识点 #### 一、三维立体图概览 三维立体图是一种通过特殊技术制作而成的图像,能够使观察者在二维平面上看到具有深度感的三维效果。这种技术利用了人眼的视差特性,即两眼观察同一物体时因位置不同...

    三维立体图制作精灵 三维立体制作工具 三维立体图制作软件

    三维立体图制作精灵是一款专为用户设计的高效、易用的三维立体制作工具,它集成了多种功能,旨在帮助用户创造出逼真的三维图形。在IT领域,制作三维立体图是一项重要的技能,广泛应用于游戏开发、建筑设计、产品设计...

    MATLAB - SCI 绘图配色第六期 - 三维折线图

    在MATLAB中,绘制三维折线图是一种展示数据在三个维度上分布的有效方式。这种图形类型可以帮助我们理解复杂的数据结构,特别是在科学研究和工程领域。在本篇内容中,我们将深入探讨如何利用MATLAB的SCI(Scientific ...

    三维立体图片制作大师v3.15

    三维立体图片制作大师v3.15是一款专为用户打造的高效、易用的三维图像创作软件。该软件集成了多种先进的图像处理技术,让用户能够轻松制作出具有强烈视觉冲击力和个性化特色的三维立体图片。在当今数字媒体艺术日益...

    很好的三维立体图制作软件

    标题中的“很好的三维立体图制作软件”指的是一款专门用于创建三维图像的应用程序。这类软件通常包含各种工具和功能,使用户能够设计、编辑和渲染立体图像,为设计师、艺术家和爱好者提供了创造逼真或抽象三维图形的...

    三维立体图欣赏制作王 v1.0

    随心所欲自动生成高质量三维立体图。 2、自带前景制作工具,画图简单,可以充分发挥你独特的创意。 3、32层前景制作,平滑过渡层功能,呈现出最完美立体效果。 4、自由导入导出前景和背景图片,生成图画可进行尺寸...

    三维立体图--网页设计

    在网页设计领域,三维立体图的应用为用户带来了更为生动、真实的视觉体验,极大地提升了网站的吸引力和交互性。"红岩"的作品展示了如何巧妙地利用三维立体图形来创造过渡效果,这种技术对于增强网页的动态感和用户...

    三维立体图像制作大师 V3.15 算法注册机

    三维立体图像制作大师 V3.15 算法注册机

    绘制多个三维立体图形GUI

    在这个特定的"绘制多个三维立体图形GUI"项目中,我们主要关注的是如何利用MATLAB的GUI工具箱来创建一个能够展示多个三维曲面的应用。下面我们将详细探讨相关的MATLAB知识点。 首先,我们需要了解MATLAB的GUIDE(GUI...

    三维立体图像制作大师v3.15安装免费版

    三维立体图像制作大师是一款简单实用,小巧易用的三维立体图像制作软件,只需三步即可制作出多层次立体感的精美作品!支持设定立体画画质,最高可达128层专业效果,完成后可保存图像到硬盘的文件,或者直接打印出来...

    delphi中用GDI函数画三维立体图

    delphi中用GDI函数画三维立体图,带源码,在delphi 7+WinXP sp2下编译通过

    在pdf文件中嵌入三维立体图形

    ### 在PDF文件中嵌入三维立体图形的知识点 #### 一、PDF文件的高级功能:三维立体图形嵌入 PDF(Portable Document Format)文件格式,最初由Adobe Systems开发,是一种用于呈现和交换文档的可靠格式,能够保持...

    三维立体图片-(检测视觉神经的发达程度)

    三维立体图片,也被称为立体图像或3D图像,是一种能够模拟真实世界中物体深度和空间感的视觉表现形式。这种图像技术广泛应用于电影、游戏、医疗、科研等多个领域,尤其在视觉感知研究中,常常被用来检测和评估视觉...

    三维立体画文字教程 机密

    【三维立体画】是一种独特的图像表现形式,利用人的双眼视觉差异和光学原理,在二维平面上创造出具有三维深度感的图像。这种技术的核心在于利用【视差立体法】,即通过两个或多个略有差异的视角捕获同一物体的图像,...

    三维立体画制作软件2009三维立体图片制作软件

    三维立体画制作软件是计算机图形学领域中的一种专业应用,主要用于创建、编辑和展示具有深度感的三维图像。2009年发布的这款软件代表了当时的先进技术,为用户提供了丰富的功能来实现三维立体图片的创作。以下是这款...

    三维立体图像制作大师

    立体图像制作,可以创作立体效果的图片,简单实用,值得学习学习。好东西乐意分享。

Global site tag (gtag.js) - Google Analytics