在分析数据时，使用图表的方式是很直接形象的，而假如图表是可以有交互能力的，那么其效果会更加好。在本文中，将探讨如何使用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。
首先，我们使用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>把这个文件保存为demo.html,下面解析下这个文件：
首先，在head部分，要引入FusionCharts.js库，在body部分，在中将会是图表放置的地方。接下来是一段很短的javascript，其中：
a) Charts/Column3D.swf，指出了这里使用的是Column3D这个Flash类型的图表；
b) myChartId指定了图表的id,这是很有用的，特别是当有多个图表时，图表之间互相引用；
c) 而800和400则是指定了图片的宽度和高度；
而myChart.setXMLUrl("get-data.php?year=2010" )则指定了数据来源，这里我们告诉图表的数据将会以XML的形式加载，而get-data.php?year=2010这个脚本则会负责读取后端的数据。
步骤5 编写后端程序
FusionCharts需要XML或者JSON格式的数据源，本文使用XML。而我们编写后端程序的目的是能够从数据库中读取数据，并且产生XML格式的文件，生成的数据格式应该是如下样子的：
<chart caption="Monthly New Users for the Year: 2010" xAxisName="Months" yAxisName="Users" showNames="1" bgColor="E6E6E6,F0F0F0" bgAlpha="100,50"
扫码添加微信