【IT168 技术】在分析数据时，使用图表的方式是很直接形象的，而假如图表是可以有交互能力的，那么其效果会更加好。在本文中，将探讨如何使用php搭配开源报表库FusionCharts(项目地址：www.fusioncharts.com/)，去创建交互式的钻取报表。所谓的钻取报表，指的是可以当用户点取报表中的数据轴的时候，可以再新打开一个新的报表，这样方便在不同的报表之间导航，十分方便。
介绍链接式图表
一般而言，普通图表的数据都是独立的，如何才能将这些数据聚合在一起，并且让我们可以在这些数据图之间来回地导航查看呢？这正是LinkedCharts能实现的。它是在FusionCharts 3.2中新增加的钻取新特性，它允许只需要一个数据源就可以创建无限制级的钻取图表，所有的的链接都是来自父图表和其数据。
在本文中，我们将学习如何将图表跟web应用结合起来。其中Mysql数据库会包含所需要的数据，而PHP程序则会将数据从数据库中取出，而FusionCharts则会负责处理和显示数据，它们的关系如下图：
想要更多的了解关于LinkedCharts的情况，可以看以下这篇文章介绍(http://kb.fusioncharts.com/questions/459/What+is+a+Drill-down+chart?),这篇文章的要点归纳如下：
1 钻取报表用父图表默认的设置去显示数据；
2 每一层的钻取层都是可以进行额外的设置的，当然你可以去改变每一个钻取层的设置和图表类型；
3 可以在新的窗口中打开链接图表，其中支持象jQuery 对话框，lightbox，extJS窗口和更多；
4 支持使用Javascript去扩展事件。
我们要做什么
我们要经常去监视我们的网站应用有多少来访客人，看下其是否增长了，在本文中，我们就来做一个小应用，可以显示一段时间来我们网站有多少注册的用户。
预备：支持php的web服务器，这里我们用apache,mysql数据库，下载FusionCharts。
步骤1 初始设置
创建一个空的数据库fctutorial，创建一个fcdemo的子目录用来存放php文件。
步骤2 初始化数据库数据
这里我们创建一个users表，这里只是简单有两个字段，一个是ID，一个是用户注册时间：
CREATE TABLE `users`( `ID` int(10) unsigned NOT NULL AUTO_INCREMENT, `Time` timestamp NOT NULL DEFAULT '0000-00-00 00:00:00', PRIMARY KEY (`ID`), KEY `Time` (`Time`))步骤3 连接数据库
接下来,我们用很简单的代码去连接数据库，代码如下：
<?php$db_host = 'localhost';$db_database = 'fctutorial';$db_username = 'root';$db_password = '';if ( ! mysql_connect($db_host, $db_username, $db_password)) die ("Could not connect to the database server.");if ( ! mysql_select_db($db_database)) die ("Could not select the database.");?>并把这个文件保存为connect-to-database.php，接下来，我们插入一些样例数据，当然我们的例子中只能是少量的数据而已，代码如下：
<?php//连接数据库require 'connect-to-database.php';//设置时间 $MinTime = strtotime('2010-01-01');$MaxTime = strtotime('2010-12-12');$RecordsToInsert = 10000;//插入10000条数据for($i = 0; $i < $RecordsToInsert; $i++){ $RandomTime = rand($MinTime, $MaxTime); mysql_query("INSERT INTO `users` (Time) VALUES (FROM_UNIXTIME({$RandomTime}))") or die(mysql_error());}echo "Inserted {$RecordsToInsert} records.";?>这里我们往用户表的时间字段,随机插入了2010年内的任意一个时间,最后把这个文件保存为generate-random-data.php。
步骤4 准备应用的HTML页框架
首先，我们使用HTML设计一个用于呈现报表的区域，代码如下：
<html> <head> <title>FusionCharts v3.2 - LinkedCharts with PHP Demo</title <script type="text/javascript" src="Charts/FusionCharts.js"></script> </head> <body> <div id="chartContainer">FusionCharts will load here</div> <script type="text/javascript"><!-- var myChart = new FusionCharts( "Charts/Column3D.swf", "myChartId", "800", "400"); myChart.setXMLUrl( "get-data.php?year=2010" ); myChart.render( "chartContainer" ); // --> </script> </body></html>
