Adobe ColdFusion Charts（2）

最新推荐文章于 2025-09-11 20:53:34 发布

weixin_30312563

最新推荐文章于 2025-09-11 20:53:34 发布

阅读量85

点赞数

CC 4.0 BY-SA版权

文章标签：数据库

原文链接：http://www.cnblogs.com/spoony/archive/2010/02/07/coldfusion-charts-2.html

在企业应用中，有时候我们不止需要一组数据，我们还需要对比数据，比如对比计划数值和实际数值。这个时候我们需要在同一个图表中结合使用两种不同类型的图，比如折线图与柱状图结合使用。还有一种情况就是我们可能需要查看同一项的不同组成部分分别在这一项中所占百分比，这在图表中称为“堆叠”。

在ColdFusion中，这种图表也很容易完成。前面提到过每个cfchartseries代表了一组相关的数据，而现在我们需要两组，自然需要两个cfchartseries, 而且图的类型是cfchartseries的属性，所以可以分别对每组数据的图表显示类型进行单独定义。

<!--- Get the raw data from the database --->
<cfquery name="GetSalaries" datasource="cfdocexamples">
	SELECT APP.DEPARTMT.DEPT_NAME,
		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>

<html>
	<head>
		<title>Employee Salary Analysis</title>
	</head>
	
	<body>
		<h1>Employee Salary Analysis</h1>
		
		<!--- Bar chart, from DeptSalaries Query of Queries. --->
		<cfchart
				backgroundColor="white"
				xAxisTitle="Department"
				yAxisTitle="Salary Average"
				font="Arial"
				gridlines=6
				showXGridlines="yes"
				showYGridlines="yes"
				showborder="yes"
			>
			
			<cfchartseries
					type="line"
					seriesColor="blue"
					paintstyle="plain"
					serieslabel="Contract Salaries"
				>
					<cfchartdata item="HR" value=70000>
					<cfchartdata item="Marketing" value=9500>
					<cfchartdata item="Sales" value=80000>
					<cfchartdata item="Training" value=9300>
			</cfchartseries>
			
			<cfchartseries 
					type="bar"
					query="DeptSalaries"
					valueColumn="AvgByDept"
					itemcolumn="Dept_Name"
					seriesColor="gray"
					paintStyle="plain"
					serieslabel="Dept. Average Salaries"	
				/>	
		</cfchart>
	</body>
</html>

下面看一个示例，新建一个ColdFusion Page, 将下面代码放入其中。

　　代码很简单，不再解释。稍微提一点的就是cfchart标签中，我们可以看到好多关于图表样式的属性。其实ColdFusion提供了好多关于样式的属性。笔者不再在这里列出。

　　在浏览器中浏览刚创建的页面，效果如图1.