自拍第89页,国产a天天免费观看,黄片一级在线观看

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

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

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

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

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

　　介紹鏈接式圖表

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

　　在本文中，我們將學(xué)習(xí)如何將圖表跟web應(yīng)用結(jié)合起來(lái)。其中Mysql數(shù)據(jù)庫(kù)會(huì)包含所需要的數(shù)據(jù)，而PHP程序則會(huì)將數(shù)據(jù)從數(shù)據(jù)庫(kù)中取出，而FusionCharts則會(huì)負(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)然你可以去改變每一個(gè)鉆取層的設(shè)置和圖表類(lèi)型；

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

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

　　我們要做什么

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

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

　　步驟1　初始設(shè)置

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

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

　　這里我們創(chuàng)建一個(gè)users表，這里只是簡(jiǎn)單有兩個(gè)字段，一個(gè)是ID，一個(gè)是用戶(hù)注冊(cè)時(shí)間：

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ù)庫(kù)

　　接下來(lái),我們用很簡(jiǎn)單的代碼去連接數(shù)據(jù)庫(kù)，代碼如下：

<?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.");
?>

　　并把這個(gè)文件保存為connect-to-database.php，接下來(lái)，我們插入一些樣例數(shù)據(jù)，當(dāng)然我們的例子中只能是少量的數(shù)據(jù)而已，代碼如下：

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

//設(shè)置時(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.";
?>

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

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

　　首先，我們使用HTML設(shè)計(jì)一個(gè)用于呈現(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>

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

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

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

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

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

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

　　步驟5　編寫(xiě)后端程序

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

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

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

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

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

// 初始化每個(gè)月份的數(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ù)庫(kù)
require 'connect-to-database.php';

//查詢(xún)數(shù)據(jù)庫(kù)
$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年份中，接著獲得指定月份的用戶(hù)訪客數(shù)，這里使用了函數(shù) year,只獲取當(dāng)年年份的數(shù)目，接著是連接數(shù)據(jù)庫(kù)進(jìn)行了查詢(xún)，并將查詢(xún)的每個(gè)月份的訪問(wèn)數(shù)組合成XML，最后向?yàn)g覽器輸出XML。最后訪問(wèn)//localhost/fcdemo/get-data.php?year=2010.就可以看到XML格式輸出的文件。

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

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

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

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

<?php
//處理輸入,分別獲得年、月，日
$Type  = $_GET['type'];
$Year  = intval($_GET['year']);
$Month = intval($_GET['month']);
$Day   = intval($_GET['day']);
//月份名稱(chēng)
$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ù)庫(kù)
require 'connect-to-database.php';

//查詢(xún)數(shù)據(jù)庫(kù)
$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ù)月、日和時(shí)間，生成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;
?>

　　下面我們簡(jiǎn)單解析下上面修改了的部分。

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

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

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

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

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

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

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

　　小時(shí)：由于查看圖表的最小單位是小時(shí)，小時(shí)是最后一層的圖表了，所以這里對(duì)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)表