日韩欧美国产一区二区,精品国产欧美一,国产又黄又爽视频免费观

国产凹凸在线-国产拗女一区二区三区-国产白白视-国产白领-国产白拍-国产白丝jk被疯狂输-国产白丝喷-国产白丝在线

PHP和FusionCharts創建交互式鉆取報表

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

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

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

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

　　介紹鏈接式圖表

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

　　在本文中，我們將學習如何將圖表跟web應用結合起來。其中Mysql數據庫會包含所需要的數據，而PHP程序則會將數據從數據庫中取出，而FusionCharts則會負責處理和顯示數據，它們的關系如下圖：

PHP和FusionCharts創建交互式鉆取報表

　　想要更多的了解關于LinkedCharts的情況，可以看以下這篇文章介紹(//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">
    </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標簽指定了圖表的一些顯示屬性，指定了SWF文件是如何顯示數據的，這里我們指定了X軸和Y軸的文字說明，背景顏色和其他的一些屬性，如透明度和字體大小等。而用<set value>的標簽，分別指定了1-12月每個月的訪問人數，注意name屬性指定了月份，而value屬性的值指定了訪問人數。

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

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

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

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

// 設置圖表的標題和X軸標題
$ChartHeading = 'Monthly New Users for the Year: '.$Year;
$XaxisName = 'Months';

//連接數據庫
require 'connect-to-database.php';

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

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

//構造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>';

//向瀏覽器輸出XML
header('Content-type: text/xml');

//Send output
echo $Output;
?>

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

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

　　步驟6　使用LinedCharts轉換為鉆取報表

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

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

<?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;
}
//連接數據庫
require 'connect-to-database.php';

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

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

//生成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">';

//根據月、日和時間，生成XML的主體數據
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;
?>

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

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

　　接著，我們建立了一個$MonthNames數組，這是用來存放每個月的用戶訪問數據的，注意這里設置了第0個元素是null，因為第1個元素位置代表的是1月份。

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

　　接下來連接數據庫，執行查詢語句，把結果集存放到$ResultArray中，并且生成XML文件中的頭部。

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

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

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

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

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

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

使用LinedCharts轉換為鉆取報表