open flash chart2使用詳解

1、準備

下載OFC2，解壓後會發現裏面有很多文件夾和文件，這裏面有多種語言的示例，我們也可以讀一下來了解OFC的基本使用方法。要使用OFC我們需要拷幾個文件到項目中：

open-flash-chart.swf

swfobject.js

3、準備JS代碼

嵌入SWF文件並指定加載數據的URL，可以指定SWF的屬性如窗口模式（wmode）等，同時也指定的SWF的寬高等：

swfobject.embedSWF(
  "open-flash-chart.swf", "my_chart",
  "600", "350", "9.0.0", "expressInstall.swf",
  {"data-file":"data.php","loading":"正在加載數據,請稍候..."});

參數分別是  swf 文件的路徑，圖表容器的id，長、寬，data-file爲提供數據的文件的路徑，；loading用於自定義等待圖表加載時的顯示文字

3、編寫提供數據的文件

include 'php-ofc-library/open-flash-chart.php';

$title = new title( "廣告點擊" );
$title->set_style( "{font-size: 20px; font-weight: bold; color: #172229; text-align: center;}" );

$vals = array();
$x_labels = array();

$x_labels[] = '海爾'; $vals[] = 500;
$x_labels[] = '360buy'; $vals[] = 350;
$x_labels[] = '卓越'; $vals[] = 400;
$x_labels[] = 'baidu'; $vals[] = 700;
$x_labels[] = 'google'; $vals[] = 200;

$d = new hollow_dot();
$d->size(4)->halo_size(0)->colour('#3D5C56');

$line = new line();
$line->set_default_dot_style($d);
$line->set_colour('#3D5C56');
$line->set_values( $vals );
$line->attach_to_right_y_axis();



$chart = new open_flash_chart();
$chart->set_title( $title );
$chart->add_element( $line );


$y_legend = new y_legend( '活動計劃' );
$y_legend->set_style( '{font-size: 22px; color: #778877}' );
$chart->set_y_legend( $y_legend );

$bar = new bar_filled( '#E2D66A', '#577261' );
$bar->set_values( array(200,500,800,450,650) );
$bar->attach_to_right_y_axis();
$chart->add_element( $bar );

$bar1 = new bar_filled( '#BF3B69', '#577261' );
$bar1->set_values( array(230,580,800,230,150) );
$bar1->attach_to_right_y_axis();
$chart->add_element( $bar1 );
// create a Y Axis object
//
$y = new y_axis_right();
// these number crash the chart :-(
//$y->set_range( 35000000, 52000000, 1000000 );
$y->set_range( 0, 2000, 1 );
$y->set_stroke( 3 );
$y->set_colour( '#3D5C56' );
$y->set_tick_length( 12 );
$y->set_steps( 200 );
//$y->set_labels( array('Zero','One','Two','Three','Four','Five','Six','Seven','Eight') );

//
// Add the Y Axis object to the chart:
//
$chart->set_y_axis_right( $y );
//

$x = new x_axis();
$x->set_labels_from_array($x_labels);
$chart->set_x_axis( $x );

echo $chart->toPrettyString();

放在服務器上運行，就可以生成圖表：

各種圖表的詳細使用請查看http://teethgrinder.co.uk/open-flash-chart-2/area-hollow.php

如果你不使用ofc提供的標準庫，可以自己生成json文件，json文件的格式如下：

{
  /* 圖表標題 */
  "title" : 
  {
    "text" : "Many data lines", 		/* 標題文本 */
    "style" : "{font-size: 30px;}"	/* CSS樣式 */
  },

   "is_decimal_separator_comma": 0,		/* (0/1)，是否用逗號替換小數點 */
   "is_fixed_num_decimals_forced": 1,	/* (0/1)，是否強制小數點後面的位數 */
   "num_decimals":3,		/* 精度，即小數點後面的位數，需要配合上面參數一起使用 */
   "is_thousand_separator_disabled": 0,		/* (0/1)，是否使用千位分隔符 */

  /* X軸標題（X軸下方） */
  "x_legend" : 
  {
    "text" : "x_legend",				/* 標題文本 */
    "style" : "{font-size: 12px; color:#736AFF;}"		/* CSS樣式 */
  },

  /* Y軸標題（Y軸左方） */
  "y_legend" : 
  {
    "text" : "y_legend",				/* 標題文本 */
    "style" : "{font-size: 12px; color:#2F55FF;}"		/* CSS樣式 */
  },

	/* 右Y軸標題（Y軸右方） */
   "y2_legend" : 
   {
    "text" : "右Y軸",				/* 標題文本 */
    "style" : "{font-size: 12px; color:#2F55FF;}"		/* CSS樣式 */
   },
	/* X軸 */ 
	"x_axis" : 
	{ 
	  "stroke" : 2, /* X軸的粗細 */
	  "tick-height" : 15, /* X軸刻度的長度 */
	  "colour" : "#df0fd0", /* 顏色 */ 
	  "grid-colour": "#00ff00",/* 網格線的顏色 */
	  "offset" : 1,/* (0/1), 是否根據數據圖形和標籤的寬度進行延展 */
	  "3d" : 0, /* 顯示3D */
	  "steps" : 0.5, /* 刻度間隔 */
	  "min":0,
	  "max":8, 
	  "labels": 
			{
				"rotate": "vertical", /* 垂直方向顯示標籤 */
				"size":13, /* 字體大小 */
				"steps": 2, /* 整數，標籤間隔 */
				"visible-steps": 3, /* 可見標籤間隔，會覆蓋上面參數 */
				"align":"center", /* 旋轉的標籤居中對齊，默認是較高的一端對其到刻度上 */ 
				"labels": 
						[ 
							"January", 
							{"text":"February", "visible":true, "colour":"ff0000", "rotate":-60}, 
							"March", 
							{"text":"April","colour":"#00D000"}, 
							"May","June","July","August","September"
						] 
			} 
	}, 
	/* Y軸 */ 
	"y_axis":{ 
		"stroke": 4, 
		"tick-length": 3, 
		"colour": "#d000d0",
		 "grid-colour": "#00ff00", 
		"offset": 0, 
		"max": 20
	 },
	 /* 右Y軸 */
	  "y_axis_right":
	  {
		"stroke":      4,
		"tick-length": 3,
		"colour":      "#d000d0",
		"grid-colour": "#00ff00",
		"offset":      0,
		"max":         20
	  },
	/* 數據元素 */ 
	"elements":
	[ 
		{ 
			"type": "bar", /* 關於柱圖類型參考“bar-all-onlick.json” （從官網下載ofc2完整包的話可以找到這個文件）*/ 
			"alpha": 0.5, 
			"colour": "#9933CC", 
			"text": "Page views", 
			"font-size": 10, 
			"on-show": { /* 展現樣式 */ 
							 "type": "pop", /* 彈出方式, 此外還有 drop 和 grow-up */ 
							 "cascade":1, /* 不通柱子之間的間隔時間爲 1 */ 
							 "delay":0.5 /* 延遲時間 */ 
						}, 
			"values" : [9,6,7,9,5,
						{"top":7,"bottom":2,"colour":"#A03030","tip":"#top#<br>hello/n#val#","on-click":"#"},
						6,null,7
						] 
		}, 
		{ 
			"type": "line", /* 展示類型 —— 折線圖 */ 
			"colour": "#9933CC", /* 線條顏色 */ 
			"width": 2, /* 線條粗細 */ 
			"text": "Page views", /* 數據標題（Y軸上方） */ 
			"font-size": 10, /* 數據標題字體大小 */ 
			"dot-size": 6, 
			"values" : [15,18,19,14,17,18,15,18,17] 
		}
	], 
	/* 鼠標提示信息 */ 
	"tooltip":
	{ 
		"shadow":true, /* 提示框影子 */ 
		"mouse":2, /* 1 - 滑動樣式，2 - 非滑動樣式，折線圖不支持*/ 
		"stroke":5, /* 邊框粗細 */ 
		"rounded": 12, /* 邊角圓滑程度 */ 
		"colour":"#00d000", /* 邊框顏色 */ 
		"background":"#d0d0ff", /* 背景顏色 */ 
		"title":"{font-size: 14px; color: #905050;}", /* 標題樣式 */ 
		"body":"{font-size: 10px; font-weight: bold; color: #9090ff;}" /* 本體樣式 */ 
	}
}

可以生成如下格式的數組，進而通過json_encode生成json

Array
(
    /* 圖表標題 */
	[title] => Array
        (
            [text] => Many data lines /* 標題文本 */
            [style] => {font-size: 30px;} /* CSS樣式 */  
        )

    [is_decimal_separator_comma] => 0  /* (0/1)，是否用逗號替換小數點 */ 
    [is_fixed_num_decimals_forced] => 1 /* (0/1)，是否強制小數點後面的位數 */ 
    [num_decimals] => 3 /* 精度，即小數點後面的位數，需要配合上面參數一起使用 */ 
    [is_thousand_separator_disabled] => 0 /* (0/1)，是否使用千位分隔符 */  
	
   /* X軸標題（X軸下方） */     
   [x_legend] => Array
        (
            [text] => x_legend   /* 標題文本 */
            [style] => {font-size: 12px; color:#736AFF;} /* CSS樣式 */ 
        )
	
	 /* Y軸標題（Y軸左方） */
    [y_legend] => Array
        (
            [text] => y_legend 
            [style] => {font-size: 12px; color:#2F55FF;}
        )
	/* 右Y軸標題（右Y軸右方） */
    [y2_legend] => Array
        (
            [text] => y_legend 
            [style] => {font-size: 12px; color:#2F55FF;}
        )
	/* X軸 */ 
    [x_axis] => Array
        (
            [stroke] => 2 /* X軸的粗細 */ 
            [tick-height] => 15 /* X軸刻度的長度 */
            [colour] => #df0fd0 /* 顏色 */
            [grid-colour] => #00ff00  /* 網格線的顏色 */
            [offset] => 1 /* (0/1), 是否根據數據圖形和標籤的寬度進行延展 */
            [3d] => 0 /* 顯示3D */ 
            [steps] => 0.5 /* 刻度間隔 */
            [min] => 0 
            [max] => 8 
            [labels] => Array
                (
                    [rotate] => vertical /* 垂直方向顯示標籤 */ 
                    [size] => 13  /* 字體大小 */ 
                    [steps] => 2   /* 整數，標籤間隔 */
                    [visible-steps] => 3  /* 可見標籤間隔，會覆蓋上面參數 */
                    [align] => center  /* 旋轉的標籤居中對齊，默認是較高的一端對其到刻度上 */ 
                    [labels] => Array
                        (
                            [0] => January
                            [1] => Array
                                (
                                    [text] => February
                                    [visible] => 1
                                    [colour] => ff0000
                                    [rotate] => -60
                                )

                            [2] => March
                            [3] => Array
                                (
                                    [text] => April
                                    [colour] => #00D000
                                )

                            [4] => May
                            [5] => June
                            [6] => July
                            [7] => August
                            [8] => September
                        )

                )

        )
	/* Y軸 */  
    [y_axis] => Array
        (
            [stroke] => 4
            [tick-length] => 3
            [colour] => #d000d0
            [grid-colour] => #00ff00
            [offset] => 0
            [max] => 20
        )
	/* 右Y軸 */  
    [y_axis_right] => Array
        (
            [stroke] => 4
            [tick-length] => 3
            [colour] => #d000d0
            [grid-colour] => #00ff00
            [offset] => 0
            [max] => 20
        )
	/* 數據元素 */ 
    [elements] => Array
        (
            [0] => Array
                (
                    [type] => bar  /* 關於柱圖類型參考“bar-all-onlick.json” （從官網下載ofc2完整包的話可以找到這個文件）*/
                    [alpha] => 0.5 //透明度
                    [colour] => #9933CC
                    [text] => Page views
                    [font-size] => 10
                    [on-show] => Array
                        (
                            [type] => pop  /* 展現樣式 */ 
                            [cascade] => 1 /* 彈出方式, 此外還有 drop 和 grow-up */
                            [delay] => 0.5 /* 延遲時間 */ 
                        )

                    [values] => Array
                        (
                            [0] => 9
                            [1] => 6
                            [2] => 7
                            [3] => 9
                            [4] => 5
                            [5] => Array
                                (
                                    [top] => 7
                                    [bottom] => 2
                                    [colour] => #A03030
                                    [tip] => #top#<br>hello/n#val#
                                    [on-click] => #
                                )

                            [6] => 6
                            [7] => 
                            [8] => 7
                        )

                )

            [1] => Array
                (
                    [type] => line  /* 展示類型 —— 折線圖 */
                    [colour] => #9933CC
                    [width] => 2
                    [text] => Page views  /* 數據標題（Y軸上方） */
                    [font-size] => 10  /* 數據標題字體大小 */
                    [dot-size] => 6
                    [values] => Array
                        (
                            [0] => 15
                            [1] => 18
                            [2] => 19
                            [3] => 14
                            [4] => 17
                            [5] => 18
                            [6] => 15
                            [7] => 18
                            [8] => 17
                        )

                )

        )
	/* 鼠標提示信息 */
    [tooltip] => Array
        (
            [shadow] => 1 /* 提示框影子 */
            [mouse] => 2  /* 1 - 滑動樣式，2 - 非滑動樣式，折線圖不支持*/
            [stroke] => 5 /* 邊框粗細 */ 
            [rounded] => 12 /* 邊角圓滑程度 */ 
            [colour] => #00d000 /* 邊框顏色 */
            [background] => #d0d0ff /* 背景顏色 */
            [title] => {font-size: 14px; color: #905050;} /* 標題樣式 */
            [body] => {font-size: 10px; font-weight: bold; color: #9090ff;} /* 本體樣式 */ 
        )

)

4、編寫js代碼

有了json數據，我們可以使用js將數據傳遞給swf文件來生成圖表。

<html>
<head>
<script type="text/javascript" src="../js/json/json2.js"></script>
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF("open-flash-chart.swf", "my_chart", "350", "200", "9.0.0");
</script>
<script type="text/javascript">

//當拿到數據後程序調用的方法
function ofc_ready()
{
    alert('ofc_ready');
}

//程序自動調用，方法名不能改變，獲取圖表數據
function open_flash_chart_data()
{
    alert( 'reading data' );
    return JSON.stringify(data);
}

function findSWF(movieName) {
  if (navigator.appName.indexOf("Microsoft")!= -1) {
    return window[movieName];
  } else {
    return document[movieName];
  }
}
    
var data = “我們準備的json數據”;

</script>
</head>
<body>
<p>Hello World</p>
<div id="my_chart"></div>
</body>
</html>

在頁面上多個圖表，根據用戶選擇，顯示相應圖表

<html>
<head>

<script type="text/javascript" src="js/json/json2.js"></script>
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF("open-flash-chart.swf", "my_chart", "350", "200", "9.0.0");
</script>

<script type="text/javascript">

function ofc_ready()
{
    alert('ofc_ready');
}

function open_flash_chart_data()
{
    alert( 'reading data' );
    return JSON.stringify(data_1);
}

function load_1()
{
  tmp = findSWF("my_chart");
  x = tmp.load( JSON.stringify(data_1) );
}

function load_2()
{
  alert("loading data_2");
  tmp = findSWF("my_chart");
  x = tmp.load( JSON.stringify(data_2) );
}

function findSWF(movieName) {
  if (navigator.appName.indexOf("Microsoft")!= -1) {
    return window[movieName];
  } else {
    return document[movieName];
  }
}
    
var data_1 = <?php echo $chart_1->toPrettyString(); ?>;
var data_2 = <?php echo $chart_2->toPrettyString(); ?>;

</script>


</head>
<body>

<p>Open Flash Chart</p>


<div id="my_chart"></div>
<br>
<a href="javascript:load_1()">display data_1</a> || <a href="javascript:load_2()">display data_2</a>
<p>
Don't forget to 'view source' to see how the Javascript JSON data is loaded.
</p>
</body>
</html>