zoukankan      html  css  js  c++  java
  • FusionChart实现奇偶间隔显示

    1、设计思路

    (1)当点击“奇数月”按钮时,3D柱状图显示1,3,5,7,9,11六个月份的收入数据;

    (2)当点击“偶数月”按钮时,3D柱状图显示2,4,6,8,10,12六个月份的收入数据。

    2、设计源码

    column3D.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>FusionChart实现奇偶间隔显示</title>
    <script type="text/javascript" src="../Scripts/JS/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="../Scripts/JS/FusionCharts.js"></script>
    <style type="text/css">
         body,table{
              100%;
             height: 100%;
             font-size: 12px;
         }
         #odd,#even{
             background-color: #CCCCCC;
             font-weight: bold;
         }
    </style>
    <script type="text/javascript">
         $(function(){
        	 
        	//利用随机数提供的数据来作为数据源
        	var column3D = new FusionCharts( "../Scripts/FusionChart/Column3D.swf", "columnId", "96%", "500", "0", "1" );
        	var strXML = "<chart palette='2' caption='月收入统计(随机数)' xAxisName='月份' yAxisName='收入' showValues='1' decimals='0' formatNumberScale='0' baseFontSize='14'>";
        	var i;  //循环次数
        	
        	//判断点击奇数月按钮,产生的柱状图
        	$("#odd").click(function(){
        		for(var i=1;i<=12;i++){
        		    if(i%2 == 1){
        	    		strXML += "<set label ='" + i +"月' value = '" + (Math.random()*1000 + 5000) + "'/>";
        	    		//alert("奇数:"+i);
        	    	}
        		}
        		strXML = strXML + "</chart>";
        		//alert("偶数:"+strXML);
            	column3D.setXMLData(strXML);
            	column3D.render("column3D1");
        	});
        	
        	//判断点击偶数月按钮,产生的柱状图
        	$("#even").click(function(){
        		for(var i=1;i<=12;i++){
        				if(i%2 == 0){
        	    		strXML += "<set label ='" + i +"月' value = '" + (Math.random()*1000 + 5000) + "'/>";
        	    		//alert("偶数:"+i);
        	    	}
        		}
        		strXML = strXML + "</chart>";
        		//alert("偶数:"+strXML);
            	column3D.setXMLData(strXML);
            	column3D.render("column3D1");
        	});
        	
         });
    </script>
    </head>
    <body>
       <div id="column3D1"></div>
       <hr>
       <div style="100%;text-align: center;">
         <input type="button" id="odd" value="奇数月">
                
         <input type="button" id="even" value="偶数月">
       </div>
    </body>
    </html>
    3、运行结果

    (1)初始化时



    (2)点击“奇数月”按钮时


    (3)点击“偶数月”按钮时


    4、设计缺陷

          当点击“奇数月”按钮后,再点击“偶数月”按钮时,3D柱状图显示不出来,不能连续点击显示,如图




  • 相关阅读:
    【野生程序员】:优先招聘
    C#-面向对象:争议TDD(测试驱动开发)
    培训班的同学,拜托不要把用人单位想得那么傻,好不好?!
    为什么要讲数据结构和算法?以及如何学习数据结构和算法
    关于办技术线下社区的一些思考
    做了十年的程序员,为什么我没有加班
    编程新手如何理解“面向对象”
    .NET程序员不加班——写在《华为工程师猝死,36岁,22月无休》之后
    “6年的程序员还不会写委托”,问题在哪?
    现身说法:37岁老码农找工作
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13315672.html
Copyright © 2011-2022 走看看