zoukankan      html  css  js  c++  java
  • FusionChart 2D面积图

    1、创建一个web工程,命名为chart;

    2、在WebContent目录下新建一个fusionchart文件夹,将FusionCharts.js拷到该目录下;

    3、同样,将jquery-1.10.1.js和Area2D.swf也拷到WebContent目录下;

    4、然后在WebContent目录下,新建一个JSP文件,取名为Area2D.jsp;

    Area2D.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>FushionChart 2D 面积图</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;
         background: silver;
       }
       fieldset{
         100%;
         height:100%;
         font-size: 12px;
       }
    </style>
    <script type="text/javascript">
       $(function(){
    	   var areaChart = new FusionCharts( "fusionchart/Area2D.swf", "areaChart", "100%", "100%", "0", "1");
    	   areaChart.setXMLUrl("Area2D.xml");
    	   areaChart.render("Area2D"); 
       });
    </script>
    </head>
    <body>
      <fieldset>
          <legend>2D面积图</legend>
          <div id="Area2D"></div>
      </fieldset>
    </body>
    </html>
    5、同理,在该目录下新建一个Area2D.xml文件,源码如下:

    <?xml version="1.0" encoding="UTF-8"?>
    <chart caption='张华2012年月收入' xAxisName='月份' yAxisName='收入' anchorSides='3' 
           showValues= '1' bgColor='7FFF00' drawAnchors='1' baseFontSize='12'
           numDivLines='8' divLineColor='F4A460' zeroPlaneColor='008080' 
           anchorBgColor='FFF000' showPlotBorder='1' plotBorderColor='FFE4B5'
           canvasBgColor='5EA294'>
    
       <set label='一月' value='3250' color='FF0000'/>
       <set label='二月' value='5650' color='FF0000'/>
       <set label='三月' value='6200' color='FF0000'/>
       <set label='四月' value='4500' color='FF0000'/>
       <set label='五月' value='6100' color='FF0000'/>
       <set label='六月' value='3134' color='FF0000'/>
       <set label='七月' value='4578' color='FF0000'/>
       <set label='八月' value='8745' color='FF0000'/>
       <set label='九月' value='2356' color='FF0000'/>
       <set label='十月' value='4580' color='FF0000'/>
       <set label='十一月' value='6500' color='FF0000'/>
       <set label='十二月' value='7840' color='FF0000'/>
    
    </chart>

    6、运行web项目,结果如下图:



  • 相关阅读:
    判断是否微信浏览器,是的话,加入自己想加的功能
    Spring MVC源码(三) ----- @RequestBody和@ResponseBody原理解析
    Spring MVC源码(二) ----- DispatcherServlet 请求处理流程 面试必问
    Spring MVC源码(一) ----- 启动过程与组件初始化
    spring5 源码深度解析----- IOC 之 bean 的初始化
    spring5 源码深度解析-----IOC 之 循环依赖处理
    spring5 源码深度解析-----IOC 之 属性填充
    spring5 源码深度解析----- IOC 之 bean 创建
    spring5 源码深度解析----- IOC 之 开启 bean 的加载
    spring5 源码深度解析----- IOC 之 自定义标签解析
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13315798.html
Copyright © 2011-2022 走看看