当前位置:  开发笔记 > 编程语言 > 正文

PHP和FusionCharts创建交互式钻取报表

在分析数据时,使用图表的方式是很直接形象的,而假如图表是可以有交互能力的,那么其效果会更加好。在本文中,将探讨如何使用php搭配开源报表库FusionCharts(项目地址:www.fusioncharts.com/),去创建交互式的钻取报表。所谓的钻取报表,指的是可以当用户">

 在分析数据时,使用图表的方式是很直接形象的,而假如图表是可以有交互能力的,那么其效果会更加好。在本文中,将探讨如何使用php搭配开源报表库FusionCharts(项目地址:www.fusioncharts.com/),去创建交互式的钻取报表。所谓的钻取报表,指的是可以当用户点取报表中的数据轴的时候,可以再新打开一个新的报表,这样方便在不同的报表之间导航,十分方便。

  介绍链接式图表

  一般而言,普通图表的数据都是独立的,如何才能将这些数据聚合在一起,并且让我们可以在这些数据图之间来回地导航查看呢?这正是LinkedCharts能实现的。它是在FusionCharts 3.2中新增加的钻取新特性,它允许只需要一个数据源就可以创建无限制级的钻取图表,所有的的链接都是来自父图表和其数据。

  在本文中,我们将学习如何将图表跟web应用结合起来。其中Mysql数据库会包含所需要的数据,而PHP程序则会将数据从数据库中取出,而FusionCharts则会负责处理和显示数据,它们的关系如下图:

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 Demotitle
\    
<script type="text/Javascript" src="Charts/FusionCharts.js">script>
\  
head>
\  
<body>
\    
<div id="chartContainer">FusionCharts will load herediv>
\    
<script type="text/Javascript">
\
    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" bgRatio="50,100" bgAngle var cpro_id = "u6885494";
推荐阅读
  • 构建顶级PHP博客系统:实践与洞见
    构建顶级PHP博客系统不仅需要扎实的技术基础,还需深入理解实际应用需求。本文以Zend Studio为开发环境,MySQL作为数据存储,Apache服务器为运行平台,结合jQuery脚本语言,详细阐述了从环境搭建到功能实现的全过程,分享了开发PHP博客管理系统的宝贵经验和实用技巧。 ... [详细]
  • NoSQL数据库,即非关系型数据库,有时也被称作Not Only SQL,是一种区别于传统关系型数据库的管理系统。这类数据库设计用于处理大规模、高并发的数据存储与查询需求,特别适用于需要快速读写大量非结构化或半结构化数据的应用场景。NoSQL数据库通过牺牲部分一致性来换取更高的可扩展性和性能,支持分布式部署,能够有效应对互联网时代的海量数据挑战。 ... [详细]
  • 手机上编写和运行PHP代码的最佳软件推荐 ... [详细]
  • 在Linux环境下,本文详细探讨了Apache服务器中CGI技术的应用与实现。首先,通过使用yum包管理器安装了必要的软件,如PHP。安装完成后,对Apache服务器进行了配置,确保CGI功能正常运行。此外,还介绍了如何编写和调试CGI脚本,以及如何在实际环境中部署这些脚本以提供动态网页内容。实验结果表明,通过合理的配置和优化,Apache服务器能够高效地支持CGI应用程序,为用户提供丰富的交互体验。 ... [详细]
  • 在《PHP应用性能优化实战指南:从理论到实践的全面解析》一文中,作者分享了一次实际的PHP应用优化经验。文章回顾了先前进行的一次优化项目,指出即使系统运行时间较长后出现的各种问题和性能瓶颈,通过采用一些通用的优化策略仍然能够有效解决。文中不仅详细阐述了优化的具体步骤和方法,还结合实例分析了优化前后的性能对比,为读者提供了宝贵的参考和借鉴。 ... [详细]
  • 本文详细解析了如何使用 jQuery 实现一个在浏览器地址栏运行的射击游戏。通过源代码分析,展示了关键的 JavaScript 技术和实现方法,并提供了在线演示链接供读者参考。此外,还介绍了如何在 Visual Studio Code 中进行开发和调试,为开发者提供了实用的技巧和建议。 ... [详细]
  • 如何使用Python高效绘制矩形图形
    本文详细介绍了如何利用Python的Turtle库高效绘制矩形图形,适合初学者快速上手。通过具体示例代码,帮助读者理解Turtle库的基本绘图方法和技巧,同时探讨了在不同应用场景中绘制矩形的实际操作,为后续复杂图形的绘制打下坚实基础。 ... [详细]
  • 如何将PHP文件上传至服务器及正确配置服务器地址 ... [详细]
  • 当前,众多初创企业对全栈工程师的需求日益增长,但市场中却存在大量所谓的“伪全栈工程师”,尤其是那些仅掌握了Node.js技能的前端开发人员。本文旨在深入探讨全栈工程师在现代技术生态中的真实角色与价值,澄清对这一角色的误解,并强调真正的全栈工程师应具备全面的技术栈和综合解决问题的能力。 ... [详细]
  • Java 零基础入门:SQL Server 学习笔记(第21篇)
    Java 零基础入门:SQL Server 学习笔记(第21篇) ... [详细]
  • MySQL性能优化与调参指南【数据库管理】
    本文详细探讨了MySQL数据库的性能优化与参数调整技巧,旨在帮助数据库管理员和开发人员提升系统的运行效率。内容涵盖索引优化、查询优化、配置参数调整等方面,结合实际案例进行深入分析,提供实用的操作建议。此外,还介绍了常见的性能监控工具和方法,助力读者全面掌握MySQL性能优化的核心技能。 ... [详细]
  • 如何利用Apache与Nginx高效实现动静态内容分离
    如何利用Apache与Nginx高效实现动静态内容分离 ... [详细]
  • ActiveMQ是由Apache开发的一款广受欢迎且功能强大的开源消息中间件。作为完全符合JMS 1.1和J2EE 1.4规范的JMS Provider实现,尽管JMS规范已问世多年,但ActiveMQ依然保持了其在消息队列领域的领先地位。本文将带你初步了解ActiveMQ的核心概念及其应用场景,帮助你快速入门这一重要的消息传递技术。 ... [详细]
  • Linux学习精华:程序管理、终端种类与命令帮助获取方法综述 ... [详细]
  • jQuery学习笔记:深入理解事件委派(2014年8月3日)
    在jQuery中,事件委托机制主要通过`closest()`方法实现。该方法用于查找与指定选择器匹配的最近祖先元素,从当前元素开始逐级向上遍历DOM树。这一技术不仅提高了代码的效率,还能有效处理动态生成的元素。参考资料:jQuery遍历方法详解。 ... [详细]
author-avatar
淡漠少_341
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有