2010.03.11(3)——FusionChartsFree之从后台获取数据并动态数据源

lipeng88213 · 发表于 2013-1-23 02:11:07

2010.03.11(3)——FusionChartsFree之从后台获取数据并动态数据源

今天从做这个里面，学到了两个要点，
1.让复选框总是有一个是check的
//判断复选框至少要选一项if($("[name=checkbox1]:checkbox:checked").length==1){$("[name=checkbox1]:checkbox:checked").attr("disabled","disabled");}else{$("[name=checkbox1]:checkbox:checked").removeAttr("disabled");}2.知道了发生事件的同时，会传入一个事件对象(最起码jquery是)，利用这个事件对象可以做很多事情，
for(var i=1;i<10;i++){$("#bn"+i).click(function(event){pic = event.target.name;updateChart(pic);});}event.target 得到触发事件的元素
event.target.name; 得到元素的name属性值，这个可以得到任意的元素属性值
event.type 可以得到这个事件的类型如 click等等
event.pageX() 得到光标相对于页面的x坐标
event.pageY() 得到光标相对于页面的y坐标
event.which() 在鼠标单击事件中可以得到鼠标左，中，右键。1--left，2---middle，3--right

好了，就直接说这个例子吧

*********************************
dao
*********************************

package dao;import java.util.List;import org.springframework.orm.hibernate3.support.HibernateDaoSupport;import pojo.JianZhu;import pojo.LiangShi;import pojo.TuDi;public class TestDaoImp extends HibernateDaoSupport implements TestDao {public List<JianZhu> query1(){String hql = "from JianZhu";return (List<JianZhu>)this.getHibernateTemplate().find(hql);}public List<LiangShi> query2(){String hql = "from LiangShi";return (List<LiangShi>)this.getHibernateTemplate().find(hql);}}
*********************************
service
*********************************
package service;import java.util.List;import pojo.JianZhu;import pojo.LiangShi;import pojo.TuDi;import dao.TestDao;public class TestServiceImp implements TestService {private TestDao testDao;public TestDao getTestDao() {return testDao;}public void setTestDao(TestDao testDao) {this.testDao = testDao;}public List<JianZhu> query1(){return this.testDao.query1();}public List<LiangShi> query2(){}

*********************************
control
*********************************

package control;import java.io.IOException;import java.io.PrintWriter;import java.util.List;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import org.springframework.web.servlet.ModelAndView;import pojo.JianZhu;import pojo.LiangShi;import pojo.TuDi;import service.TestService;public class TestControl {private TestService testService;public TestService getTestService() {return testService;}public void setTestService(TestService testService) {this.testService = testService;}public ModelAndView test3(HttpServletRequest request,HttpServletResponse response) throws IOException{request.setCharacterEncoding("utf-8");response.setCharacterEncoding("utf-8");String liangshi = request.getParameter("liangshi");String jianzhu = request.getParameter("jianzhu");List<JianZhu> list1 = this.testService.query1();List<LiangShi> list2 = this.testService.query2();String[] colors = {"AFD8F8","F6BD0F","8BBA00","FF8E46","008E8E","008E8E","D64646","8E468E","588526","B3AA00","008ED6","9D080D","A186BE"};//byte[] utf8Bom = new byte[]{(byte) 0xef, (byte) 0xbb, (byte) 0xbf}; //String utf8BomStr= new String(utf8Bom,"UTF-8");//定义BOM标记 String xml = "<?xml version='1.0' encoding='UTF-8' ?>" +"<graph numberSuffix='平方米' caption='三地区用地情况' xAxisName='地区' baseFont='宋体' baseFontSize='13' decimalPrecision='0' formatNumberScale='0'> " +"<categories font='Arial' fontSize='11' fontColor='000000'>";for(JianZhu o : list1){xml += "<category name='"+o.getName()+"' />";}xml += " </categories>";if(jianzhu.equals("true")){//判断建筑是否选上for(int i=0;i<list1.size();i++){JianZhu o = list1.get(i);if(i==0){xml += "<dataset seriesname='建筑用地' color='"+colors+"'>";}xml += "<set value='"+o.getValue()+"' />";if(i==list1.size()-1){xml += "</dataset>";}}}if(liangshi.equals("true")){//判断粮食是否选上for(int i=0;i<list2.size();i++){LiangShi o = list2.get(i);if(i==0){xml += "<dataset seriesname='粮食用地' color='"+colors[list1.size()+i]+"'>";}xml += "<set value='"+o.getValue()+"' />";if(i==list1.size()-1){xml += "</dataset>";}}}xml += "</graph>";System.out.println(xml);PrintWriter out = response.getWriter();out.print(xml);return null;}}

*********************************
spring.xml
*********************************

<?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.springframework.org/schema/beans"    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"    xmlns:aop="http://www.springframework.org/schema/aop"    xmlns:tx="http://www.springframework.org/schema/tx"    xmlns:context="http://www.springframework.org/schema/context"    xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-2.0.xsd          http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-2.0.xsd          http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-2.0.xsd          http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-2.5.xsd"          default-autowire="byName">  <bean class="org.springframework.beans.factory.config.PropertyPlaceholderConfigurer"><property name="locations"><list><value>classpath:db.properties</value></list></property><property name="fileEncoding" value="utf-8" /></bean>            <bean id="dataSource" class="org.apache.commons.dbcp.BasicDataSource">          <property name="driverClassName"             value="${jdbc.driverClassName}" />          <property name="url" value="${jdbc.url}" />          <property name="username" value="${jdbc.username}" />          <property name="password" value="${jdbc.password}" />    </bean>               <bean id="sessionFactory"       class="org.springframework.orm.hibernate3.annotation.AnnotationSessionFactoryBean">          <property name="dataSource" ref="dataSource" />       <property name="annotatedClasses">             <list>                <value>pojo.JianZhu</value>             <value>pojo.LiangShi</value>                <value>pojo.TuDi</value>             </list>       </property>          <property name="hibernateProperties">             <props>                <prop key="hibernate.dialect">                      org.hibernate.dialect.OracleDialect                </prop>                <prop key="show_sql">true</prop>                <prop key="hibernate.format_sql">true</prop>                <prop key="hibernate.use_sql_comments">true</prop>             </props>          </property>    </bean>  <bean id="hibernateTemplate" class="org.springframework.orm.hibernate3.HibernateTemplate">    <property name="sessionFactory" ref="sessionFactory" />  </bean> <bean id="testDao" class="dao.TestDaoImp" ><property name="hibernateTemplate"><ref bean="hibernateTemplate" /></property></bean><bean id="testService" class="service.TestServiceImp" ><property name="testDao" ><ref bean="testDao" /></property></bean><bean id="testDelegate" class="control.TestControl"><property name="testService"><ref bean="testService"/></property></bean><bean id="testController" class="org.springframework.web.servlet.mvc.multiaction.MultiActionController"> <property name="methodNameResolver" ref="propMethodNameResolver"/> <property name="delegate" ref="testDelegate"/></bean><bean id="urlMapping" class="org.springframework.web.servlet.handler.SimpleUrlHandlerMapping"><property name="mappings"><props><prop key="/test_*.do">testController</prop></props></property></bean><bean id="propMethodNameResolver" class="org.springframework.web.servlet.mvc.multiaction.PropertiesMethodNameResolver">          <property name="mappings">             <props>             <prop key="/test_3.do">test3</prop>          </props>          </property>    </bean>          <bean id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver"><property name="viewClass"><value>org.springframework.web.servlet.view.JstlView</value></property><property name="prefix"><value></value></property><property name="suffix"><value>.jsp</value></property><property name="contentType"><value>text/html;charset=utf-8</value></property></bean></beans>

*********************************
web.xml
*********************************

<?xml version="1.0" encoding="UTF-8"?><web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">  <welcome-file-list> <welcome-file>index.jsp</welcome-file>  </welcome-file-list><servlet>    <servlet-name>DispatcherServlet</servlet-name>    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>    <init-param>       <param-name>contextConfigLocation</param-name>       <param-value>classpath:spring.xml</param-value>    </init-param>    <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping>       <servlet-name>DispatcherServlet</servlet-name>    <url-pattern>*.do</url-pattern> </servlet-mapping>    </web-app>
*********************************
jsp
*********************************

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>数据源可变 </title><script type="text/javascript" src="FusionCharts/FusionCharts.js"></script><script type="text/javascript" src="js/jquery-1.3.2.js"></script><script type="text/javascript">var xml = "";var pic = "FusionCharts/FCF_MSColumn3D.swf";function ajax(value1,value2,value3){$.ajax({type: "post",url: "test_3.do",data: {jianzhu:value1,liangshi:value2},dataType: "text",success: function(data){xml = data;updateChart(value3);}});}function updateChart(chartSWF){//Create another instance of the chart.var chart = new FusionCharts(chartSWF, "chart1Id", "600", "350", "0", "0");chart.setDataXML(xml);chart.render("chartDiv");}$(function(){ajax("true","true",pic);$("#jianzhu").click(function(){ajax($("#jianzhu").is(":checked"),$("#liangshi").is(":checked"),pic);//判断复选框至少要选一项if($("[name=checkbox1]:checkbox:checked").length==1){$("[name=checkbox1]:checkbox:checked").attr("disabled","disabled");}else{$("[name=checkbox1]:checkbox:checked").removeAttr("disabled");}});$("#liangshi").click(function(){ajax($("#jianzhu").is(":checked"),$("#liangshi").is(":checked"),pic);if($("[name=checkbox1]:checkbox:checked").length==1){$("[name=checkbox1]:checkbox:checked").attr("disabled","disabled");}else{$("[name=checkbox1]:checkbox:checked").removeAttr("disabled");}});for(var i=1;i<10;i++){$("#bn"+i).click(function(event){pic = event.target.name;updateChart(pic);});}});</script> </head><body bgcolor="#ffffff" >　  <form name='frmUpdate'>展现方式：<input id="bn1" type='button' value='3D柱状图' name='FusionCharts/FCF_MSColumn3D.swf' /><input id="bn2" type='button' value='2D柱状图' name='FusionCharts/FCF_MSColumn2D.swf'  /><input id="bn3" type='button' value='折线图'  name='FusionCharts/FCF_MSLine.swf' /><input id="bn4" type='button' value='2D面积图' name='FusionCharts/FCF_MSArea2D.swf'  /><input id="bn5" type='button' value='2D横向柱状图' name='FusionCharts/FCF_MSBar2D.swf'  /><input id="bn6" type='button' value='面积堆栈图' name='FusionCharts/FCF_StackedArea2D.swf'  /><input id="bn7" type='button' value='横向柱状堆栈图' name='FusionCharts/FCF_StackedBar2D.swf'  /><input id="bn8" type='button' value='2D柱状堆栈图' name='FusionCharts/FCF_StackedColumn2D.swf'  /><input id="bn9" type='button' value='3D柱状堆栈图' name='FusionCharts/FCF_StackedColumn3D.swf'  /></form>  <div id="chartDiv" align="center">对不起，有错误</div>  数据显示：<input name="checkbox1" type="checkbox" value="jianzhu" id="jianzhu" checked="checked"/>　建筑<input name="checkbox1" type="checkbox" value="liangshi" id="liangshi" checked="checked"/> 粮食</body></html>

*********************************
sql
*********************************

create table jianzhu(name varchar2(20),value number(20));create table liangshi(name varchar2(20),value number(20));insert into jianzhu values('唐家岭',2000);insert into jianzhu values('东北旺',1500);insert into jianzhu values('上地',3200);insert into liangshi values('唐家岭',7500);insert into liangshi values('东北旺',4100);insert into liangshi values('上地',13000);

*********************************
*********************************
*********************************

		自动登录	找回密码
密码			立即注册

2010.03.11(3)——FusionChartsFree之从后台获取数据 并动态数据源

2010.03.11(3)——FusionChartsFree之从后台获取数据并动态数据源