<%@ 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{ width: 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="width:100%;text-align: center;"> <input type="button" id="odd" value="奇數月"> <input type="button" id="even" value="偶數月"> </div></body></html>