Adobe ColdFusion Charts（1）

对于数字信息，用图表展示显然要比单单的表格给人感觉更加直观。常见的图表有柱状图，饼图，折线图等等。企业报表中经常会用到这些。

使用Adobe ColdFusion创建图表是一件很容易的事情，主要有两种方式。第一，像其它元素一样，可以用标签创建。图表对应的标签为cfchart, 与之配合使用的还有cfchartseries和cfchartdata。从字面就可以看出cfchartseries定义了一组相关数据的信息，而cfchartdata定义了每个点的数值信息。第二，使用ColdFusion Report Builder创建。

在ColdFusion中共有11种图表：bar, cylinder, cone, pyramid, horizontal bar, line, curve, step, area, pie, scatter. 如图1.

图 1

下面通过一个简单示例来演示一下。新建一个ColdFusion Page, 输入以下代码，一个简单图表就算完成了。在浏览器预览，效果如图2.

<cfchart>
	<cfchartseries type="pie">
		<cfchartdata item="New car sales" value="50000">
		<cfchartdata item="Used car sales" value="25000">
		<cfchartdata item="Leasing" value="30000">
		<cfchartdata item="Service" value="40000">
	</cfchartseries>
</cfchart>

图 2

其中cfchartseries标签的type属性指定了图表类型。它可以是最开始提到的11种图表中任意一种。cfchartdata的item属性指定了该数值点的描述信息，根据图表类型不同，它的显示方式有很大差异，有时甚至不会直接显示在图表上，比如上面例子中只有将鼠标悬停在特定区域时，才会显示出来。而value属性是数值信息，是必须要提供给图表的。

还可以观察到ColdFusion中的图表其实使用Flash Player显示。

上面例子展现了ColdFusion图表定义的基本框架：

<cfchart>
	<cfchartseries type="type">
		<cfchartdata item="item" value="value">
	</cfchartseries>
</chart>

这种使用数据的方式很直观，但是实际应用中一般会采用更加灵活的动态获取数据的方式，比如通过查询。可以观察到上面提到的图表信息其实都是二维数据（即使可以采用3D效果）。所以我们可以通过查询获取两列数据，一列表示描述信息，对应于cfchartdata中的item, 另一列表示数值信息，对应于cfchartdata中的value.

下面来看另一个例子。

在ColdFusion中，有一个”query of queries”的概念。不妨将它翻译为“基于查询的查询”。使用方式为，首先将数据从物理数据库中取出来，当然这里的数据库可以是任何广义上的数据库，然后将数据赋给一个查询变量驻留在内存中。然后可以基于这个内存中的“小型数据库”进行查询操作。笔者这里并不讨论这种方式的优缺点，只是简单在下面的例子中利用一下。

首先，从数据库中获取数据。这里采用ColdFusion自带的示例数据库数据源cfdocexamples.

<!--- 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>

到此数据准备工作完毕。下面来定义显示方式。

<html>
	<head>
		<title>Employee Salary Analysis</title>
	</head>
	
	<body>
		<h1>Employee Salary Analysis</h1>
		
		<!--- Bar chart, from DeptSalaries Query of Queries. --->
		<cfchart
				xAxisTitle="Department"
				yAxisTitle="Salary Average"
				font="Arial"
				gridlines=6
				showXGridlines="yes"
				showYGridlines="yes"
				showborder="yes"
				show3d="yes"
			>
			
			<cfchartseries 
					type="bar"
					query="DeptSalaries"
					valueColumn="AvgByDept"
					itemcolumn="Dept_Name"
					seriesColor="olive"
					paintStyle="plain"	
				/>	
		</cfchart>
		
	</body>
</html>

在浏览器中预览。效果如图3.

图 3

从上面代码中可以看出，并没有显式设置cfchartdata而是另外设置了cfchartseries的两个属性：valuecolumn和itemcolumn. 分别对应数值列和描述列。自然，我们可以通过cfchartdata方式显示数据：

<cfoutput query="deptSalaries">
	<cfchartdata item="#dept_name#" value=#Round(AvgByDept/1000)*1000#>
</cfoutput>

效果一样。

使用查询还是直接使用单独的固定数值是获取数据的两种不同方式，它们还可以结合使用。比如，有些数据可能相对比较固定而且又不能方便的从数据库中取出或根本就不存在于数据库中，我们可以结合两种方式。

将上面示例中的cfchartseries内容给为以下：

<cfchart chartwidth="600">
	<cfchartseries
			type="bar"
			query="DeptSalaries"
			itemColumn ="Dept_Name"
			valueColumn="AvgByDept"
		>
		<cfchartdata item="Facilities" value="35000">
		<cfchartdata item="Documentation" value="45000">
	</cfchartseries>
</cfchart>

其中名称为”Facilities”和”Documentation”的项使用的是固定数值。浏览器中浏览，效果如图4.

图 4

还可以得出结论，默认情况下单独的固定数值点显示在查询数据之前。当然可以利用cfchart的sortxaxis属性来对其进行按字母排序操作。

posted @ 2010-02-06 21:47 spoony 阅读(803) 评论(2) 编辑收藏举报

刷新页面返回顶部