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[i]+"'>";
}
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">
<!--
<aop:aspectj-autoproxy proxy-target-class="true"/>
-->
<!-- 数据库外部文件配置 -->
<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>
<!-- 数据库外部文件配置 -->
<!-- 配置数据源 使用dbcp数据源 -->
<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>
<!-- 配置数据源 使用dbcp数据源 -->
<!-- Hibernate SessionFactory配置 -->
<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>
<!-- Hibernate SessionFactory配置 -->
<!-- hibernateTemplate -->
<bean id="hibernateTemplate" class="org.springframework.orm.hibernate3.HibernateTemplate">
<property name="sessionFactory" ref="sessionFactory" />
</bean>
<!-- hibernateTemplate -->
<!-- dao -->
<bean id="testDao" class="dao.TestDaoImp" >
<property name="hibernateTemplate">
<ref bean="hibernateTemplate" />
</property>
</bean>
<!-- dao -->
<!-- serice -->
<bean id="testService" class="service.TestServiceImp" >
<property name="testDao" >
<ref bean="testDao" />
</property>
</bean>
<!-- serice -->
<!-- spring MVC -->
<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>
<!-- spring MVC -->
</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);
*********************************
*********************************
*********************************
- 大小: 37.9 KB
分享到：
相关推荐
FusionChartsFree.rar 作者主页:http://www.easy518.com
FusionChartsFree，做动态报表的好工具
3D_饼图FusionChartsFree调用json数据的简单例子
FusionChartsFree,饼状图,折线图等制作.例子,内涵详细文档*.doc、*.pdf
酷炫漂亮的PB 11.5 FLASH图表源码(FusionChartsFree) 自己整理的酷炫漂亮的PB...一个关于FCF即FusionChartsFree常见问题的文档
FusionChartsFree V2.2，各种报表例子和数据格式，对开发者很有帮助
FusionCharts的帮助文档的详细说明手册.是一个不错的开源平台.
FusionChartsFree_FLASH图表控件，用于做FLASH图形报表的一个开源控件，包含源代码和实用文档，很实用
灰常牛B的报表插件，有柱状图，饼图，区域图，趋势图等各种图形，还可以做到3D效果。
FusionChartsFree动态报表工具，跨浏览器的flash图表组件解决方案，能够被 ASP.NET, ASP, PHP, JSP, ColdFusion, Ruby on Rails, 简单 HTML 页面甚至PPT调用，提供饼形图、扇形图、折线图、柱状图等多种报表的2D、3D...
相信很多做图表的朋友都听说过FusionChartsFree，再不学习你就out了，它的功能十分强大，本资源包括FusionChartsFreeAPI，相关的很多资料文档，教程，解决方案，帮助手册，参数大全等等。
可以快速生成各种你想要的好看的报表图，简单，好操作。
采用xml数据格式，支持饼图、柱状图、甘特图、烛柱图等多种最常用图表样式，支持多动态语言jsp、php等并有样例
FusionChartsFree官方示例