這個文章說一下open-flash-chart和PHP和jQuery的結合使用的例子
需求UI：
解釋下這個需求：
1 下方是一個flash的圖表
2 上方有復選框，日活躍和周活躍用戶
3 右方的一周和一月的span標簽選擇是顯示x坐標軸的時間范圍，有昨天起前一周和前一月兩個選擇
4 點擊左邊的復選框和右邊的span標簽都會更新flash統計表
實現步驟：
1 下載open-flash-chart 2.0
這里使用的版本是：
open-flash-chart-2-Lug-Wyrm-Charmer
2 將里面的js(json.js, swfobject.js)和php-ofc-libriary文件夾和open-flash-chart.swf
放到服務器目錄上
3 html的模板使用：
<div id="c" class="p010" style="height:280px;">
data-type ="platform_static"
data-stat-url ="ajax/aj_static_user_data.php"
data-stat-aid ="{{$appinfo.aid}}" >
< div class ="dataHd clearfix" >
< div class ="l" >
< input class ="slc reload_chart"
name ="dayuv"
type ="checkbox"
checked ="checked"
value ="1"
/>
< label class ="sl" >日活躍 </ label >
< input
class ="slc reload_chart"
name ="weekuv"
type ="checkbox"
checked ="checked"
value ="2"
/>
< label class ="cgr" >周活躍 </ label >
</ div >
< div class ="r" >
< input type ="hidden" name ="range" value ="week" >
< div class ="mr5" >
< span class ="week_month cp" name ="week" >一周 </ span >
< span class ="cd" >┊ </ span >
< span class ="week_month cp sl" name ="month" >一月 </ span >
</ div >
</ div >
</ div >
</ form >
< div id ="user_data" name ="flash_chart" ></ div >
</ div >
這個模板說明：
1 使用了form表單，這樣能增加js的可復用性，form表單作為查詢提交，from后面的同級目錄下的div作為flash展示的div，所以必須標注id值
這里將form的name和div的id設置的相同
2 form表單的屬性
data-type="platform_static" //說明只要有這個屬性的form，提交就是進行flash更新
data-stat-url="ajax/aj_static_user_data.php" //這個標注是為了標注上更新flash所提交的ajax的地址
4 javascript(jquery):
reloadLine的函數，這個函數的作用是提交表單，更新flash
{
var form_id = $j("form[name='" + id + "']");
var aj_url = form_id.attr('data-stat-url') + "?aid="+ form_id.attr('data-stat-aid') +"&"+ form_id.serialize();
aj_url = encodeURIComponent(aj_url);
swfobject.embedSWF(
"open-flash-chart.swf?r="+Math.random() * 100000, id,
"750", "250", "9.0.0", "expressInstall.swf",
{"data-file": aj_url}, {'wmode':"transparent"}
);
}
幾個說明：
1 使用id作為參數是表示值需要將id傳入，就可以將對應的flash進行更新
2 aj_url = encodeURIComponent(aj_url); //作為swf傳入的url必須進行urlencode
3 "open-flash-chart.swf?r="+Math.random() * 100000 //這個后面的隨機數必須加上，否則有的瀏覽器會由於緩存的問題而無法更新
4 {"data-file": aj_url} //說明取數據去aj_url中取，后面會說明這個ajax如何寫
5 {'wmode':"transparent"} // 這個是表示將flash置於最底層
6 頁面已經導入了json.js, swfobject.js. 並將jquery的$ 換為 $j
5 javascript綁定事件：
var target = event.currentTarget;
var form_id = $j(target).parents('form[data-type=platform_static]').attr('name');
reLoadLine(form_id);
});
$j('.week_month').click( function(event){
event.preventDefault();
var target = event.currentTarget;
if($j(target).hasClass('sl'))
{
// change the page show
$j(target).removeClass('sl');
$j(target).nextAll('.week_month').addClass('sl');
$j(target).prevAll('.week_month').addClass('sl');
// change hidden input
var rangeValue = $j(target).attr('name');
$j(target).parent().prevAll("input[name=range]").val(rangeValue);
var form_id = $j(target).parents('form[data-type=platform_static]').attr('name');
reLoadLine(form_id);
}
});
這個熟悉jquery的同學一看就明白了
就是有一點，再強調一下，這邊的$j相當於jquery中的$
6 aj_static_user_data.php
View Code
include 'ofc-library/open-flash-chart.php';
class ajax
{
// Get param
private $range = $_REQUEST['range'];
private $dayuv = $_REQUEST['dayuv'];
private $weekuv = $_REUEST['weekuv'];
function run()
{
switch( $this-> range)
{
case "week":
$this->endDate = date("Y-m-d", strtotime('-1 day'));
$this->startDate = date("Y-m-d", strtotime('-8 day'));
break;
case "month":
$this->endDate = date("Y-m-d", strtotime('-1 day'));
$this->startDate = date("Y-m-d", strtotime('-30 day'));
break;
}
$data = $this->aGetFadeData( $this->startDate, $this->endDate);
// 獲取line和max
foreach( $data as $key=> $value)
{
$dayuvs[] = $value['dayuv'];
$weekuvs[] = $value['weekuv'];
}
$max = 0;
$lines = array();
if( $this->dayuv)
{
$lines[] = array(
'values' => $dayuvs,
'color' => "#336699",
);
$max = max( $max, max( $dayuvs));
}
if( $this->weekuv)
{
$lines[] = array(
'values' => $weekuvs,
'color' => "#336699",
);
$max = max( $max, max( $weekuvs));
}
// 獲取lable
$lables = array_keys( $data);
echo $this->lines( $lines, $lables, $max);
exit;
}
/* *
* 創造直線圖
* @param arrLinesParams = array (
* 'linename' = array('values', 'colour'),
* ....
* ) : 此為一個圖表中所要展示的幾條線，其中鍵linename為此線的名稱，values:為線上各關鍵節點組成的數組
* colour:線條顏色，沒有默認值請填寫如：#008B8B
* @param $arrXLabels : X軸的坐標，按照所選日期取值
* @param $intYmax : 幾組直線節點數值中的最大值，確定Y軸所用
* @return JSON str
*/
public function lines( $arrLinesParams, $arrXLabels, $intYmax)
{
foreach ( $arrLinesParams as $linename=> $lineParam) {
$line = new line();
$line -> set_values( $lineParam['values']);
$line -> set_colour( $lineParam['color']);
$line -> set_width(2);
$dot = new solid_dot();
$dot -> size(3)
-> halo_size(1)
-> colour( $lineParam['colour'])
-> tooltip('#val#');
$line -> set_default_dot_style( $dot);
$this->arrLine[] = $line;
}
// x為時間
foreach( $arrXLabels as & $item)
{
$item = substr( $item, 6);
}
$jsonData = $this->getJsonData( $this->arrLine, $arrXLabels, $intYmax + 2);
$this->arrLine = array(); // 置空
return $jsonData;
}
/* *
* 利用open_flash_chart創造多條直線
* @return jsondata
*/
protected function getJsonData( $arrLine, $arrXLabels, $intYmax){
$chart = new open_flash_chart();
$t = $this->set_Tooltip();
$chart -> set_tooltip( $t);
$chart -> set_bg_colour('#FFFFFF');
$x_Axis = $this->setX_Axis( $arrXLabels);
$y_Axis = $this->setY_Axis( $intYmax);
$chart ->set_x_axis( $x_Axis);
$chart ->set_y_axis( $y_Axis);
foreach ( $arrLine as $key=> $value) {
$chart->add_element( $value);
}
$jsonData = $chart->toPrettyString();
return $jsonData;
}
/* *
* 設置x軸
* @return Object x
*/
protected function setX_Axis( $arrLabels) {
$x_labels = $this->setX_labels( $arrLabels);
$count = count( $arrLabels);
if( $count > 10)
{
$x_labels->visible_steps( intval( $count / 7));
}
$x = new x_axis();
$x ->colour('#C0C0C0')
->grid_colour('#E0E0E0')
->set_labels( $x_labels);
return $x;
}
/* *
* 設置y軸
* @return Object y
*/
protected function setY_Axis( $intYmax) {
$y_labels = new x_axis_labels();
$y_labels ->set_colour('#696969');
$intYStep = $intYmax / 5;
$y = new y_axis();
$y ->set_colour('#C0C0C0');
$y ->set_grid_colour('#E0E0E0');
$y ->set_range(0, $intYmax, $intYStep);
$y ->set_labels( $y_labels);
return $y;
}
/* *
* 設置x軸的坐標刻度
* @return Object $x
*/
protected function setX_labels( $arrLabels = array()) {
$x = new x_axis_labels();
$x ->set_colour('#696969');
$x ->set_steps(1);
$x ->set_labels( $arrLabels);
return $x;
}
/* *
* 設置x軸刻印文字
* @return Object x
*/
protected function setX_Legend() {
$x = new x_legend('');
$x ->set_style( '{font-size: 20px; color: #778877}' );
return $x;
}
/* *
* 設置y軸刻印文字
* @return Object x
*/
protected function setY_Legend() {
$y = new y_legend('');
$y ->set_style( '{font-size: 20px; color: #778877}' );
return $y;
}
/* *
* 設置tooltip，值框屬性
* @return Object t
*/
protected function set_Tooltip() {
$t = new tooltip();
$t ->set_shadow( false );
$t ->set_stroke( 1 );
$t ->set_colour( '#6E604F' );
$t ->set_background_colour( '#BDB396' );
$t ->set_title_style( "{font-size: 14px; color: #CC2A43;}" );
$t->set_body_style( "{font-size: 10px; font-weight: bold; color: #9932CC;}" );
return $t;
}
/* *
* 獲取虛假數據
*/
private function aGetFadeData( $startDate, $endDate)
{
$ret = array();
$dates = $this->aGetCdateKeys( $startDate, $endDate);
$model = array(
'dayuv' => 1,
'weekuv' => 2,
);
foreach( $dates as $date)
{
$ret[ $date] = $model;
}
return $ret;
}
/* *
* 獲取from到to之間的所有時間
*/
private function aGetCdateKeys( $from, $to)
{
$ret = array();
$endTime = strtotime( $to);
$startTime = strtotime( $from);
$time = $startTime;
while( $time <= $endTime)
{
// 入ret
$ret[] = date("Y-m-d", $time);
// 遞增
$time = strtotime("+1 day", $time);
}
return $ret;
}
}
$ajax = new ajax();
$ajax->run()
這個php有點長，是根據open-flash-chart 2.0的教程改寫的
注意點：
1 必須導入正確的ofc-library/open-flash-chart.php
2 最后的json使用toPrettyString生成
至此，完成open-flash-chart 和 jquery 和 php 的結合使用
碰到的問題
在寫的過程中，經常會碰到錯誤：
"Open Flash Chart IO ERROR Loading test data
或者
"can not find y-32.txt"等類型的錯誤
最可能的情況是：ajax返回的數據錯誤，這個可以用fidder調試出來，特別查看里面值為null的字段
另外抱怨一下：open-flash-chart的文檔真的錯誤很多，哎~畢竟是免費的
參考資料：
http://teethgrinder.co.uk/open-flash-chart-2/
http://pullmonkey.com/2008/7/23/open-flash-chart-ii-plugin-for-ruby-on-rails-ofc2/
作者：yjf512（軒脈刃）
出處：http://www.cnblogs.com/yjf512/
本文版權歸yjf512和cnBlog共有，歡迎轉載，但未經作者同意必須保留此段聲明