玖玖视频在线,精品综合,福利姬网站在线观看

PHP和FusionCharts創(chuàng)建交互式鉆取報(bào)表

轉(zhuǎn)帖|其它|編輯：郝浩|2011-06-10 14:00:57.000|閱讀 807 次

概述：在分析數(shù)據(jù)時，使用圖表的方式是很直接形象的，而假如圖表是可以有交互能力的，那么其效果會更加好。在本文中，將探討如何使用php搭配開源報(bào)表庫 FusionCharts，去創(chuàng)建交互式的鉆取報(bào)表。所謂的鉆取報(bào)表，指的是可以當(dāng)用戶點(diǎn)取報(bào) 表中的數(shù)據(jù)軸的時候，可以再新打開一個新的報(bào)表，這樣方便在不同的報(bào)表之間導(dǎo)航，十分方便。

# 界面/圖表報(bào)表/文檔/IDE等千款熱門軟控件火熱銷售中 >>

　　在分析數(shù)據(jù)時，使用圖表的方式是很直接形象的，而假如圖表是可以有交互能力的，那么其效果會更加好。在本文中，將探討如何使用php搭配開源報(bào)表庫 FusionCharts，去創(chuàng)建交互式的鉆取報(bào)表。所謂的鉆取報(bào)表，指的是可以當(dāng)用戶點(diǎn)取報(bào) 表中的數(shù)據(jù)軸的時候，可以再新打開一個新的報(bào)表，這樣方便在不同的報(bào)表之間導(dǎo)航，十分方便。

　　介紹鏈接式圖表

　　一般而言，普通圖表的數(shù)據(jù)都是獨(dú)立的，如何才能將這些數(shù)據(jù)聚合在一起，并且讓我們可以在這些數(shù)據(jù)圖之間來回地導(dǎo)航查看呢？這正是 LinkedCharts能實(shí)現(xiàn)的。它是在FusionCharts 3.2中新增加的鉆取新特性，它允許只需要一個數(shù)據(jù)源就可以創(chuàng)建無限制級的鉆取圖表，所有的的鏈接都是來自父圖表和其數(shù)據(jù)。

　　在本文中，我們將學(xué)習(xí)如何將圖表跟web應(yīng)用結(jié)合起來。其中Mysql數(shù)據(jù)庫會包含所需要的數(shù)據(jù)，而PHP程序則會將數(shù)據(jù)從數(shù)據(jù)庫中取出，而FusionCharts則會負(fù)責(zé)處理和顯示數(shù)據(jù)，它們的關(guān)系如下圖：

PHP和FusionCharts創(chuàng)建交互式鉆取報(bào)表

　　想要更多的了解關(guān)于LinkedCharts的情況，可以看以下這篇文章介紹(//kb.fusioncharts.com/questions/459/What+is+a+Drill-down+chart?),這篇文章的要點(diǎn)歸納如下：

　　1 鉆取報(bào)表用父圖表默認(rèn)的設(shè)置去顯示數(shù)據(jù)；

　　2 每一層的鉆取層都是可以進(jìn)行額外的設(shè)置的，當(dāng)然你可以去改變每一個鉆取層的設(shè)置和圖表類型；

　　3 可以在新的窗口中打開鏈接圖表，其中支持象jQuery 對話框，lightbox，extJS窗口和更多；

　　4 支持使用Javascript去擴(kuò)展事件。

　　我們要做什么

　　我們要經(jīng)常去監(jiān)視我們的網(wǎng)站應(yīng)用有多少來訪客人，看下其是否增長了，在本文中，我們就來做一個小應(yīng)用，可以顯示一段時間來我們網(wǎng)站有多少注冊的用戶。

　　預(yù)備：支持php的web服務(wù)器，這里我們用apache,mysql數(shù)據(jù)庫，下載FusionCharts。

　　步驟1　初始設(shè)置

　　創(chuàng)建一個空的數(shù)據(jù)庫fctutorial，創(chuàng)建一個fcdemo的子目錄用來存放php文件。

　　步驟2　初始化數(shù)據(jù)庫數(shù)據(jù)

　　這里我們創(chuàng)建一個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　連接數(shù)據(jù)庫

　　接下來,我們用很簡單的代碼去連接數(shù)據(jù)庫，代碼如下：

<?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，接下來，我們插入一些樣例數(shù)據(jù)，當(dāng)然我們的例子中只能是少量的數(shù)據(jù)而已，代碼如下：

<?php
//連接數(shù)據(jù)庫
require 'connect-to-database.php';

//設(shè)置時間
$MinTime = strtotime('2010-01-01');
$MaxTime = strtotime('2010-12-12');
$RecordsToInsert = 10000;

//插入10000條數(shù)據(jù)
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.";
?>

　　這里我們往用戶表的時間字段,隨機(jī)插入了2010年內(nèi)的任意一個時間,最后把這個文件保存為generate-random-data.php。

　　步驟4　準(zhǔn)備應(yīng)用的HTML頁框架

　　首先，我們使用HTML設(shè)計(jì)一個用于呈現(xiàn)報(bào)表的區(qū)域，代碼如下：

<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">
    </script>
  </body>
</html>

　　把這個文件保存為demo.html,下面解析下這個文件：

　　首先，在head部分，要引入FusionCharts.js庫，在body部分，在中將會是圖表放置的地方。接下來是一段很短的javascript，其中： 

　　a) Charts/Column3D.swf，指出了這里使用的是Column3D這個Flash類型的圖表；

　　b) myChartId指定了圖表的id,這是很有用的，特別是當(dāng)有多個圖表時，圖表之間互相引用；

　　c) 而800和400則是指定了圖片的寬度和高度；

　　而myChart.setXMLUrl("get-data.php?year=2010" )則指定了數(shù)據(jù)來源，這里我們告訴圖表的數(shù)據(jù)將會以XML的形式加載，而get-data.php?year=2010這個腳本則會負(fù)責(zé)讀取后端的數(shù)據(jù)。

　　步驟5　編寫后端程序

　　FusionCharts需要XML或者JSON格式的數(shù)據(jù)源，本文使用XML。而我們編寫后端程序的目的是能夠從數(shù)據(jù)庫中讀取數(shù)據(jù)，并且產(chǎn)生XML格式的文件，生成的數(shù)據(jù)格式應(yīng)該是如下樣子的：

　　我們解析上這個文件。首先，使用了chart標(biāo)簽指定了圖表的一些顯示屬性，指定了SWF文件是如何顯示數(shù)據(jù)的，這里我們指定了X軸和Y軸的文字說明，背景顏色和其他的一些屬性，如透明度和字體大小等。而用<set value>的標(biāo)簽，分別指定了1-12月每個月的訪問人數(shù)，注意name屬性指定了月份，而value屬性的值指定了訪問人數(shù)。

　　接下來我們編寫get_data.php程序，從數(shù)據(jù)庫中取出數(shù)據(jù)并將其解析成XML格式，程序如下：

<?php
//獲得年份
$Year     = intval($_GET['year']);

//獲得指定月份的用戶訪客數(shù)
$Query = "SELECT MONTH(Time) AS Value, COUNT(*) AS Total FROM `users` WHERE YEAR(Time)={$Year} GROUP BY Value";

// 初始化每個月份的數(shù)據(jù)為0
$ResultArray = array_fill(1, 12, 0);

// 設(shè)置圖表的標(biāo)題和X軸標(biāo)題
$ChartHeading = 'Monthly New Users for the Year: '.$Year;
$XaxisName = 'Months';

//連接數(shù)據(jù)庫
require 'connect-to-database.php';

//查詢數(shù)據(jù)庫
$QueryResult = mysql_query($Query);

while($Row = mysql_fetch_assoc($QueryResult))
    $ResultArray[$Row['Value']]=$Row['Total'];

//構(gòu)造XML輸出
$Output = '<chart caption="'.$ChartHeading.'" xAxisName="'.$XaxisName.'" yAxisName="Users" showNames="1" bgColor="E6E6E6,F0F0F0" bgAlpha="100,50" bgRatio="50,100" bgAngle="270" showBorder="1" borderColor="AAAAAA" baseFontSize="12">';

foreach($ResultArray as $key => $val)
    $Output .= '<set value="'.$val.'" name="'.$key.'"/>';

//完成XML輸出
$Output .= '</chart>';

//向?yàn)g覽器輸出XML
header('Content-type: text/xml');

//Send output
echo $Output;
?>

　　上文都有比較詳細(xì)的注釋了，這里稍微解析下：首先我們獲得要查看的年份，保存在year年份中，接著獲得指定月份的用戶訪客數(shù)，這里使用了函數(shù) year,只獲取當(dāng)年年份的數(shù)目，接著是連接數(shù)據(jù)庫進(jìn)行了查詢，并將查詢的每個月份的訪問數(shù)組合成XML，最后向?yàn)g覽器輸出XML。最后訪問//localhost/fcdemo/get-data.php?year=2010.就可以看到XML格式輸出的文件。

　　接下來我們測試下運(yùn)行的效果，輸入//localhost/fcdemo/demo.html，運(yùn)行后如下圖所示：

　　步驟6　使用LinedCharts轉(zhuǎn)換為鉆取報(bào)表

　　有兩個方法去將子圖表嵌入到父圖表中去。我們或者可以通過把新的數(shù)據(jù)字符串增加到父圖表的數(shù)據(jù)源，也可以僅僅把子圖表的數(shù)據(jù)鏈接地址加到父圖表中去。假如直接在父圖表中嵌入子圖表的數(shù)據(jù)，對于我們的例子不大合適，因?yàn)橛?2個月，每個月有30天，每天有24小時，這樣顯示起來的話會有點(diǎn)混亂。這里我們采用的是數(shù)據(jù)URL鏈接的方式，只需要在父圖表中要點(diǎn)擊的區(qū)域設(shè)置鏈接即可。

　　下面修改代碼，讓能夠產(chǎn)生三種不同類型的子圖表：月、日、時，代碼如下：

<?php
//處理輸入,分別獲得年、月，日
$Type  = $_GET['type'];
$Year  = intval($_GET['year']);
$Month = intval($_GET['month']);
$Day   = intval($_GET['day']);
//月份名稱
$MonthsNames = array(null, 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec');
switch($Type)
{
    default:
    case 'monthly':
        $Query = "SELECT MONTH(Time) AS Value, COUNT(*) AS Total FROM `users` WHERE YEAR(Time)={$Year} GROUP BY Value";
        $ResultArray = array_fill(1, 12, 0);
        $ChartHeading = 'Monthly New Users for the Year: '.$Year;
        $XaxisName = 'Months';
        break;

    case 'daily':
        $Query = "SELECT DAY(Time) AS Value, count(*) AS Total FROM `users` WHERE YEAR(Time)={$Year} AND MONTH(Time)={$Month} GROUP BY Value";
        $ResultArray = array_fill(1, 31, 0);
        $ChartHeading = 'Daily New Users for the Month: '.$MonthsNames[$Month].'/'.$Year;
        $XaxisName = 'Days';
        break;

    case 'hourly':
        $Query = "select HOUR(Time) AS Value, count(*) AS Total FROM `users` WHERE YEAR(Time)={$Year} AND MONTH(Time)={$Month} AND DAY(Time)={$Day} GROUP BY Value";
        $ResultArray = array_fill(0, 24, 0);
        $ChartHeading = 'Hourly New Users for the Date: '.$Day.'/'.$MonthsNames[$Month].'/'.$Year;
        $XaxisName = 'Hours';
        break;
}
//連接數(shù)據(jù)庫
require 'connect-to-database.php';

//查詢數(shù)據(jù)庫
$QueryResult = mysql_query($Query);

while($Row = mysql_fetch_assoc($QueryResult))
    $ResultArray[$Row['Value']]=$Row['Total'];

//生成XML數(shù)據(jù)
$Output = '<chart caption="'.$ChartHeading.'" xAxisName="'.$XaxisName.'" yAxisName="Users" showNames="1" bgColor="E6E6E6,F0F0F0" bgAlpha="100,50" bgRatio="50,100" bgAngle="270" showBorder="1" borderColor="AAAAAA" baseFontSize="12">';

//根據(jù)月、日和時間，生成XML的主體數(shù)據(jù)
switch($Type)
{
    default:
    case 'monthly':
        foreach($ResultArray as $MonthNumber => $value)  // MonthNumber is month number (1-12)
            $Output .= '<set value="'.$value.'" name="'.$MonthsNames[$MonthNumber].'" link="newchart-xmlurl-get-data.php?type=daily&year='.$Year.'&month='.$MonthNumber.'"/>';
        break;
    case 'daily':
        foreach($ResultArray as $DayNumber => $value)  // DayNumber is day (1-31)
            $Output .= '<set value="'.$value.'" name="'.$DayNumber.'" link="newchart-xmlurl-get-data.php?type=hourly&year='.$Year.'&month='.$Month.'&day='.$DayNumber.'"/>';
        break;
    case 'hourly':
        foreach($ResultArray as $HourNumber => $value)  // HourNumber is hour (0-23)
            $Output .= '<set value="'.$value.'" name="'.$HourNumber.'"/>';
        break;
}

$Output .= '</chart>';

header('Content-type: text/xml');

//輸出
echo $Output;
?>

　　下面我們簡單解析下上面修改了的部分。

　　首先，設(shè)置了type這個變量來存放圖表類型，這里可以是月，日或者是小時。

　　接著，我們建立了一個$MonthNames數(shù)組，這是用來存放每個月的用戶訪問數(shù)據(jù)的，注意這里設(shè)置了第0個元素是null，因?yàn)榈?個元素位置代表的是1月份。

　　根據(jù)圖表的類型，變量$Query, $ResultArray, $ChartHeading和$XAsixName都會設(shè)置為不同的值。如果$Type沒有值的話，則默認(rèn)選擇的是月份的圖表。

　　接下來連接數(shù)據(jù)庫，執(zhí)行查詢語句，把結(jié)果集存放到$ResultArray中，并且生成XML文件中的頭部。

　　XML文件的主體部分(即生成符合FusionCharts格式的XML)是根據(jù)圖表的類型而有一點(diǎn)不同，具體為：

　　月份：基本都是相同的，除了link屬性。Link中設(shè)定了如下的值：newchart-xmlurl-get-data.php。這里 newchart指明了這里是要創(chuàng)建新的一個圖表，xmlurl表明數(shù)據(jù)是通過url的形式去獲得的，比如獲得1月份的數(shù)據(jù)，則鏈接為newchart- xmlurl-get-data.php?type=hourly&Year=2010&Month=1。

　　日：跟月份也差不多，只不過鏈接中有day日期這個屬性而已。

　　小時：由于查看圖表的最小單位是小時，小時是最后一層的圖表了，所以這里對link不做任何的設(shè)置。

　　重新將該文件改名保存為get-data.php,然后運(yùn)行//localhost/fcdemo/get-data.php?year=2010，即可看到如下的XML文件：

　　最后，運(yùn)行//localhost/fcdemo/demo.html，即可看到如下效果圖：

使用LinedCharts轉(zhuǎn)換為鉆取報(bào)表