fusioncharts使用(二)简单的柱状图事件驱动
fusioncharts使用(二)简单的柱状图事件驱动
对原有的项目文件，入手看起的主要是如下三个文件：
Default.jsp DEMO的首页
DataGen.jsp 生成xml数据
FusionChartsCreator.java 生成页面的script
从里面主要分离出了三种不同样式的页面，其中：
1.三维柱状图
<script type="text/javascript"
src="../../scripts/FusionCharts/FusionCharts.js"></script>
<div id='SalesByYearDiv' align='center'>Chart.</div>
<script type='text/javascript'>
var chart_SalesByYear = new FusionCharts(
'../../scripts/FusionCharts/MSColumn3DLineDY.swf', 'SalesByYear',
'450', '325', '0', '1');
// Provide entire XML data using dataXML method
chart_SalesByYear
.setDataXML("<chart caption='Yearly Sales Comparison' XAxisName='Year' palette='2' animation='1' subcaption='(Click on a column to drill-down to monthly sales in the chart below)' formatNumberScale='0' numberPrefix='$' showValues='0' seriesNameInToolTip='0'><categories><category label='1994'/><category label='1995'/><category label='1996'/></categories><dataset seriesname='Revenue'><set value='219702' link='javaScript:updateCharts(1994);'/><set value='682796' link='javaScript:updateCharts(1995);'/><set value='547248' link='javaScript:updateCharts(1996);'/></dataset><dataset seriesName='Units Sold' parentYAxis='S'><set value='7381'/><set value='25007'/><set value='18929'/></dataset><styles><definition><style type='font' color='666666' name='CaptionFont' size='15' /><style type='font' name='SubCaptionFont' bold='0' /></definition><application><apply toObject='caption' styles='CaptionFont' /><apply toObject='SubCaption' styles='SubCaptionFont' /></application></styles></chart>");
// Finally, render the chart.
chart_SalesByYear.render("SalesByYearDiv");
</script>
其中体现事件的就是
<set value='219702' link='javaScript:updateCharts(1994);' />
在图形中可以去调用javascript事件。
2.饼图
<chart caption='Top 5 Employees for 1994' palette='2' animation='1'
subCaption='(Click to slice out or right click to choose rotation mode)'
YAxisName='Sales Achieved' YAxisName='Quantity' showValues='0'
numberPrefix='$' formatNumberScale='0' showPercentInToolTip='0'>
<set label='Peacock' value='58366.78000' isSliced='0' />
<set label='Davolio' value='36566.03000' isSliced='0' />
<set label='Callahan' value='20701.21000' isSliced='0' />
<set label='Fuller' value='20545.60000' isSliced='0' />
<set label='Leverling' value='20605.80000' isSliced='0' />
<styles>
<definition>
<style type='font' name='CaptionFont' color='666666' size='15' />
<style type='font' name='SubCaptionFont' bold='0' />
</definition>
<application>
<apply toObject='caption' styles='CaptionFont' />
<apply toObject='SubCaption' styles='SubCaptionFont' />
</application>
</styles>
</chart>
3.三维柱状图以URL形式获得数据
<script type="text/javascript"
src="../../scripts/FusionCharts/FusionCharts.js"></script>
<div id='SalesByCatDiv' align='center'>Chart.</div>
<script type='text/javascript'>
var chart_SalesByCat = new FusionCharts('../../scripts/FusionCharts/MSColumn3D.swf',
'SalesByCat', '875', '350', '0', '1');
// Set the dataURL of the chart
chart_SalesByCat.setDataURL("../../BluePrintApp/Data_SalesByCategory.jsp?year=1994&FCCurrTime=11%2F24%2F2009+14_37_47+%E4%B8%8B%E5%8D%88");
// Finally, render the chart.
chart_SalesByCat.render("SalesByCatDiv");
</script>
那么按照平时的项目构建，做一个柱状图利用javascript刷新另外一个柱状图的示例。数据通过后台返回前台页面。
我拷贝了原来的easyaop项目过来，重用了原来配置的MVC的框架，修改view.jsp页面如下：
<html>
<head>
<script type="text/javascript"
src="../scripts/FusionCharts/FusionCharts.js"></script>
</head>
<body>
<h1>View Page</h1>
<p>
view page groovy
</p><br />
UserId : ${user.id}<br />
UserName : ${user.userName}<br />
UserPassword : ${user.userPassword}<br/>
<script type="text/javascript">
function getTimeForURL(){
var dt = new Date();
var strOutput = "";
strOutput = dt.getHours() + "_" + dt.getMinutes() + "_" + dt.getSeconds() + "_" + dt.getMilliseconds();
return strOutput;
}
function updateCharts(){
var strURL = "http://localhost:8080/easyfusion/user/countuser.do";
strURL = strURL + "?currTime=" + getTimeForURL();
strURL = escape(strURL);
var chartObj = getChartFromId("SalesByProd");
chartObj.setDataURL(strURL);
//chartObj.setDataXML(strXML);
}
</script>
<div id='SalesByYearDiv' align='center'>Chart.</div>
<script type='text/javascript'>
var strURL = "http://localhost:8080/easyfusion/user/countworkgroup.do";
var chart_SalesByYear = new FusionCharts(
'../scripts/FusionCharts/MSColumn3DLineDY.swf', 'SalesByYear',
'450', '325', '0', '1');
strURL = escape(strURL);
strURL = strURL + "?currTime=" + getTimeForURL();
chart_SalesByYear.setDataURL(strURL);
chart_SalesByYear.render("SalesByYearDiv");
</script>
<div id='SalesByProdDiv' align='center'>Chart.</div>
<script type='text/javascript'>
var chart_SalesByProd = new FusionCharts(
'../scripts/FusionCharts/MSColumn3DLineDY.swf?ChartNoDataText=testMessage.',
'SalesByProd', '875', '350', '0', '1');
chart_SalesByProd.setDataXML("<chart></chart>");
chart_SalesByProd.render("SalesByProdDiv");
</script>
</body>
</html>
在UserController中做了如下修改：
package com.sillycat.easyfusion.web;
import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;
import com.sillycat.easyfusion.model.User;
import com.sillycat.easyfusion.service.UserManager;
@Controller("userController")
public class UserController {
UserManager userManager;
@RequestMapping("/user/main.do")
public ModelAndView main(HttpServletRequest request,
HttpServletResponse response) throws Exception {
userManager.echo();
User user = userManager.get(null);
user.setUserPassword("111112");
System.out.println("controller test2");
userManager.save(user);
userManager.delete(user);
return new ModelAndView("jsp/view", "user", user);
}
@RequestMapping("/user/countworkgroup.do")
public void countworkgroup(HttpServletRequest request,
HttpServletResponse response) throws Exception {
String xml = "<chart caption='test1' XAxisName='Year' palette='2' animation='1' subcaption='(Click on a column to drill-down to monthly sales in the chart below)' formatNumberScale='0' numberPrefix='$' showValues='0' seriesNameInToolTip='0'><categories><category label='1994'/><category label='1995'/><category label='1996'/></categories><dataset seriesname='Revenue'><set value='219702' link='javaScript:updateCharts(1994);'/><set value='682796' link='javaScript:updateCharts(1995);'/><set value='547248' link='javaScript:updateCharts(1996);'/></dataset><dataset seriesName='Units Sold' parentYAxis='S'><set value='7381'/><set value='25007'/><set value='18929'/></dataset><styles><definition><style type='font' color='666666' name='CaptionFont' size='15' /><style type='font' name='SubCaptionFont' bold='0' /></definition><application><apply toObject='caption' styles='CaptionFont' /><apply toObject='SubCaption' styles='SubCaptionFont' /></application></styles></chart>";
response.setContentType("text/xml");
response.getOutputStream().write(xml.getBytes());
}
@RequestMapping("/user/countuser.do")
public void countuser(HttpServletRequest request,
HttpServletResponse response) throws Exception {
String xml = "<chart caption='Beverages - Product wise Sales for May 1994' XAxisName='Product' palette='2' animation='0' formatNumberScale='0' numberPrefix='$' showValues='0' PYAxisName='Revenue' SYAxisName='Units Sold' seriesNameInToolTip='0'><categories><category label='Chang' /><category label='Chartreuse verte' /><category label='Guaran Fantstica' /><category label='Lakkalikri' /><category label='Outback Lager' /><category label='Rhnbru Klosterbier' /><category label='Steeleye Stout' /></categories><dataset seriesname='Revenue'><set value='1995' /><set value='864' /><set value='194' /><set value='270' /><set value='615' /><set value='93' /><set value='360' /></dataset><dataset seriesName='Units Sold' parentYAxis='S'><set value='105' /><set value='48' /><set value='43' /><set value='15' /><set value='41' /><set value='12' /><set value='20' /></dataset><styles><definition><style type='font' name='CaptionFont' size='15' color='666666' /><style type='font' name='SubCaptionFont' bold='0' /></definition><application><apply toObject='caption' styles='CaptionFont' /><apply toObject='SubCaption' styles='SubCaptionFont' /></application></styles></chart>";
response.setContentType("text/xml");
response.getOutputStream().write(xml.getBytes());
}
@Resource(name = "userManager")
public void setUserManager(UserManager userManager) {
this.userManager = userManager;
}
}
实现了报表图形的互动。需要优化的是从数据库返回回来的集合，如何更高效的生成Controller里面用到的XML，这是一个要解决的问题，可能要用到操作XML的DOM4J这些了。
另外一个要解决的问题，示例由于是试用版，所以有这个提示：
FusionCharts Evaluation - An InfoSoft Global Creation
破解倒是可以通过两种途径，一种是去GOOGLE或者BAIDU上去搜索对应的可以用的swf文件，下载过来替换了我们的SWF就行了，因为这个mask就是加在这个swf文件上的。
另外也可以参照下文作者的做法，另外用一个swf先载入，去不让mask起作用http://www.gaodengming.cn/post/fusioncharts-v3-crack.aspx
