Adobe ColdFusion Charts（3）

　　作为查询分析的图表大多数情况下是全局的笼统概括的，它能够给使用者以直观的形式产生对总体进行把握的信息。但图表的功能不应仅限于此，当使用者对某个具体部分或某个具体数字感兴趣的时候，他应该可以对这个部分或数字进行进一步详细分析，因此图表中最好有钻取功能以满足需求。

　　实现钻取功能最直观的想法就是通过链接传递参数到相关联的查询中来返回对应的信息。在ColdFusion中也是这样做的。你可以在图表的进行单击操作来获取详细信息，实现这一功能只需要设置好cfchart标签的url属性。url属性中的参数等信息可以通过ColdFusion的内置变量来传递。

典型的一个链接如下：

url=”moreinfo.cfm?series=$SERIESLABEL$&item=$ITEMLABEL$&value=$VALUE$”

　　三个内置变量分别代表了当前数据组标签，当前项标签，当前值。

　　下面通过一个具体示例来进行演示。

　　首先创建一个详细信息页面，salary_details.cfm. 此页面实现根据给定的参数信息进行详细信息的查询操作。

<!--- Get data from database with the specified DEPARTMENT --->
<cfquery name="GetSalaryDetails" datasource="cfdocexamples">
	SELECT 
		APP.DEPARTMT.DEPT_NAME,
		APP.EMPLOYEE.FIRSTNAME,
		APP.EMPLOYEE.LASTNAME,
		APP.EMPLOYEE.STARTDATE,
		APP.EMPLOYEE.SALARY,
		APP.EMPLOYEE.CONTRACT
	FROM
		APP.EMPLOYEE,
		APP.DEPARTMT
	WHERE
		APP.DEPARTMT.DEPT_ID = APP.EMPLOYEE.EMP_ID
		AND
		APP.DEPARTMT.DEPT_NAME = '#URL.Item#'
	ORDER By
		APP.EMPLOYEE.LASTNAME,
		APP.EMPLOYEE.FIRSTNAME
</cfquery>

<html>
	<head>
		<title>Employee Salary Details</title>
	</head>
	
	<body>
		<h1>
			<cfoutput>
				#GetSalaryDetails.DEPT_NAME[1]# Department	Salary Details
			</cfoutput>
		</h1>
		
		<table border cellspacing="0" cellpadding="5">
			<tr>
				<th>Employee Name</th>
				<th>StartDate</th>
				<th>Salary</th>
				<th>Contact?</th>
			</tr>		
			<cfoutput query="GetSalaryDetails">
				<tr>
					<td>#FIRSTNAME# #LASTNAME#</td>
					<td>#DATEFORMAT(STARTDATE, "mm/dd/yyyy")#</td>
					<td>#NUMBERFORMAT(SALARY, "$999,999")#</td>
					<td>#CONTRACT#</td>
				</tr>
			</cfoutput>
		</table>
	</body>
</html>

　　然后定义概括信息页面，salarydetail.cfm. 代码同以前的图表页面一致，只不过要设置cfchart的url属性。

<!--- Get the raw data from the database --->
<cfquery name="GetSalaries" datasource="cfdocexamples">
	SELECT APP.DEPARTMT.DEPT_NAME,
		APP.EMPLOYEE.STARTDATE,
		APP.EMPLOYEE.SALARY
	FROM APP.DEPARTMT, APP.EMPLOYEE
	WHERE APP.DEPARTMT.DEPT_ID = APP.EMPLOYEE.DEPT_ID
</cfquery>

<!--- Generate a query with statistical data for each department. --->
<cfquery dbtype="query" name="DeptSalaries">
	SELECT 
		DEPT_NAME,
		AVG(SALARY) AS AvgByDept
	FROM GetSalaries
	GROUP BY DEPT_NAME
</cfquery>

<!--- Reformat the generated numbers to show only thousands. --->
<cfloop index="i" from="1" to="#DeptSalaries.recordcount#">
	<cfset DeptSalaries.AvgByDept[i]=Round(DeptSalaries.AvgByDept[i]/1000)*1000>
</cfloop>

<!--- Convert start date to start year. --->
<!--- Convert the date to a number for the query to work. --->
<cfloop index="i" from="1" to="#GetSalaries.recordcount#">
	<cfset GetSalaries.STARTDATE[i]=NumberFormat(DatePart("yyyy",GetSalaries.STARTDATE[i]),9999)>
</cfloop>

<!--- Query of queries for average salary by start year. --->
<cfquery dbtype="query" name="HireSalaries">
	SELECT 
		StartDate,
		AVG(Salary) AS AvgByStart
	FROM
		GetSalaries
	GROUP BY
		StartDate
</cfquery>

<!--- Round average salaries to thousands. --->
<cfloop index="i" from="1" to="#HireSalaries.recordcount#">
	<cfset HireSalaries.AvgByStart[i]=Round(HireSalaries.AvgByStart[i]/1000)*1000>
</cfloop>

<html>
	<head>
		<title>Employee Salary Analysis</title>
	</head>
	
	<body>
		<h1>Employee Salary Analysis</h1>
		
		<!--- Pie chart, from DeptSalaries Query of Queries. --->
		<cfchart
				font="Times"
				fontbold="true"
				backgroundcolor="##CCFFFF"
				show3d="yes"
				url="salary_details.cfm?Item=$ITEMLABEL$"
			>
			
			<cfchartseries 
					type="pie"
					query="DeptSalaries"
					valueColumn="AvgByDept"
					itemcolumn="Dept_Name"
					colorlist="##990066,##660099,##006699,##069666"
				/>	
		</cfchart>
		
	</body>
</html>

在浏览器中浏览，效果如图1，图2.

图 1

图 2

功能可以实现，效果也很好。但是仔细观察可以发现传递的参数信息是具体的标签，而在实际应用中我们的查询操作一般情况下都会使用编码作为参数，这样既可以保障唯一性，就可以避免由于数据格式不一致造成的错误。因此实际应用中我们还需要对这个参数传递进行进一步加工，笔者在这里不再深究。

前面三篇随笔只是对ColdFusion Charts做了一个最简单的介绍，还有很多东西值得挖掘，尤其是图标的外观样式。这在以后的关于报表的随笔中还要提到。

Enjoy!

posted @ 2010-02-08 10:56 spoony 阅读(544) 评论(0) 编辑收藏举报

刷新页面返回顶部