<html>
<head>
<script
type=”text/javascript” src=”js/swfobject.js”></script>
<script
type=”text/javascript”>
swfobject.embedSWF(
“open-flash-chart.swf”, “my_chart”, “550″, “200″,
“9.0.0″,
“expressInstall.swf”,
{”data-file”:”data.txt”}
);
</script>
</head>
<body>
<p>Hello
World</p>
<div id=”my_chart”></div>
</body>
</html>
數據文件格式如下：
{
“y_legend”:{
“text”: “Time of
day”,
“style”: “{color: #736AFF;}”
},
“elements”:[
{
"type": "line",
"colour": "#736AFF",
"text": "Avg. wave height (cm)",
"font-size": 10,
"width": 2,
"dot-size": 4,
"halo-size": 0,
"values" :
[1.5,1.69,1.88,2.06,2.21,2.34,2.43,2.48,2.49,2.47,2.40,2.30,2.17,2.01,1.83,1.64,1.44,1.24,1.05,0.88,0.74,0.62,0.54,0.50,0.50,0.54,0.61,0.72,0.86,1.03,1.22,1.41,1.61,1.81,1.99,2.15,2.29,2.39,2.46,2.49,2.48,
{"value":2.44,"colour":"#FF0000","tip":"monkies"},2.35,2.23,2.08]
}
], “x_axis”:{
“labels”: {
“rotate”: “vertical”,
“labels”:["2:00am % ?,"2:10","2:20","2:30","2:40","2:50",
"3:00am","3:10","3:20","3:30","3:40","3:50",
"4:00am","4:10","4:20","4:30","4:40","4:50",
"5:00am","5:10","5:20","5:30","5:40","5:50",
"6:00am","6:10","6:20","6:30","6:40","6:50",
"7:00am","7:10","7:20","7:30","7:40","7:50",
"8:00am","8:10","8:20","8:30","8:40","8:50",
"9:00am","9:10","9:20"]
}
},
“y_axis”:{
“max”: 3
}}
數據放在data.txt裏，演示
上一節提到open-flash-chart2的數據是通過存儲在txt文件中，然後通過類似那個http://yoururl/chart.html?ofc=datafile.txt
這樣的形式來加載不同的數據，當然ofc後面的參數可以是php文件，php類庫的使用將在以後的教程中出現，本節將討論使用js加載數據的另一種方法，
代碼如下：是<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 = {
“elements”: [
{
"type": "bar",
"text": "u5317u4eac",
"values": [
9.9355,
18.2142,
12.1315,
11.9911,
10.2637,
4.152,
5.8293,
17.8541,
17.1762,
25.2105,
24.9323,
23.5468,
2.7642,
3.9232,
30.6192,
17.9746,
26.1273,
14.5226,
17.3219,
5.0837,
2.1281,
18.9674,
8.3799
]
}
],
“title”: {
“text”: “200812u9500u552eu7edfu8ba1u56feu8868″
},
“y_axis”: {
“min”: 0,
“max”: 31,
“steps”: 2
},
“x_axis”: {
“labels”: {
“labels”: [
"01",
"02",
"03",
"04",
"05",
"06",
"07",
"08",
"09",
"10",
"11",
"12",
"13",
"14",
"15",
"16",
"17",
"18",
"19",
"20",
"21",
"22",
"23"
]
}
},
“y_legend”: {
“text”: “chinaticket.com chart 1:10000″,
“style”: “color:#736AEF; font-size:14px;”
}
};</script>
這種方式更適合數據實時加載，比如php中帶查詢表單，open-flash-chart2的用法很靈活，如果你是新手可能現在還是一頭霧水，上面 的json的格式各個參數將在下一節裏做詳細的解釋。
前面倆節講了open flash chart的基本調用方法，下來開始我們來詳細的通過實例來分析OFC的參數設置。
首先今天要講的是json數據格式所代表的意義，做了下簡單的註釋，英文不好的同學可以找翻譯軟件翻譯一下官網的說明，這裏只挑重要的來講。
#title參數
{
“title”:{
“text”: “Chart Demo”,
“style”:
“{font-size: 20px; color:#0000ff; font-family: Verdana; text-align:
center;}”
}
}
title是非必選參數，title下有text和style倆個參數，相信不用多做解釋大家都能明
白是和什麼意思，需要注意的是FLASH裏的style所設置的CSS跟網頁裏不完全一樣，詳細的可以google搜索瞭解一下。
#y_legend參數
{
“y_legend”:{
“text”:”Chart Demo”,
“style”:”{…}”
}
}
y_legend也是可選參數，值y軸的說明
#x_axis參數 x軸的設置
{
“x_axis”:{
“stroke”:
1, // X軸線的寬度
“tick-height”: 10,//刻度線高度值
“colour”: “#d000d0″,//線的顏色
“grid-colour”: “#00ff00″,//表格線顏色
“labels”:
["January,"February","March","April","May","June","July","August","Spetember"]//
標籤
}
}
另外x_axis還有的參數:
3d: boolean, 設置3D
steps: 取決於tick-height屬性 間隔
#Y Axis 參數的屬性跟X軸的基本相同
#Elements 是一個數組對象；如line,bar,scatter等不同的圖表，可以在一個chart裏有多個elements對象
{
“elements”:[
{
"type": "bar",
"alpha": 0.5,
"colour": "#9933CC",
"text":
"Page views",
"font-size": 10,
"values" :
[9,6,7,9,5,7,6,9,7]
},
{
“type”: “bar”,
“alpha”: 0.5,
“colour”: “#CC9933″,
“text”: “Page views 2″,
“font-size”: 10,
“values”
: [9,6,7,9,5,7,6,9,7]
}
]
}
基本上就是這些了，還有一些別的屬性可以參見英文文檔，後面將這種來將php生成chart所需json數據的類庫的用法。
require_once('includes/open-flash-chart2/php-ofc-library/open-flash-chart.php');
$tmpx
= array();//x軸標籤的數組
$tmpy = array();//從數據庫查詢得到y軸數據的數組
$title =
new title( '年銷售統計圖表' );
$title->set_style("font-size:18px;");
$bar = new bar();
$bar->text= $city;
$bar->set_values( $tmpy );
$y = new y_axis();
$y->set_range(0,ceil(max($tmpy)),20);
$x = new x_axis();
$x->set_labels_from_array( $tmpx );
$yl = new y_legend();
$yl->y_legend( "chinaticket.com
chart 1:10000" );
$yl->set_style( "color:#736AEF;
font-size:12px;" );
$chart = new open_flash_chart();
$chart->set_title(
$title );
$chart->set_y_axis( $y );
$chart->set_x_axis( $x );
$chart->set_y_legend($yl);
$chart->add_element($bar);
$chart->toString();//生成json數據
$chart->toPrettyString();//生成適
合閱讀的數據格式
具體那一種圖表格式可以打開相對應的class文件查詢相關的參數、函數，
用法都比較簡單的。
|
元素 / 屬性 |
形狀或作用 |
參數 1 |
參數 2 |
參數 3 |
參數 4 |
參數 5 |
參數 6 |
|
title |
顯示圖表主題（最上方） |
主題名稱 |
樣式 style |
|
|
|
|
|
x_legend |
X 座標說明（最下方 , 與 X 軸平行） |
說明信息 |
字體大小 |
字體顏色 |
|
|
|
|
y_legend |
Y 座標說明（最左邊 , 與 Y 軸平行） |
說明信息 |
字體大小 |
字體顏色 |
|
|
|
|
x_labels |
設置 X 軸座標顯示 |
|
|
|
|
|
|
|
y_label_size |
|
|
|
|
|
|
|
|
x_label_style |
設置 X 軸樣式 |
字體大小 |
字體顏色 |
角度 (0:0 度 , 1:90 度 ,2:45 度 ) |
設置 X 軸線條間隔 |
X 軸間隔線條顏色 |
|
|
y_label_style |
設置 Y 軸樣式 |
字體大小 |
字體顏色 |
|
|
|
|
|
x_ticks |
控制 X 軸座標標記顯示 |
X 軸座標標記長度 |
|
|
|
|
|
|
y_ticks |
控制 Y 軸座標標記顯示 |
Y 軸座標標記最小長度 |
Y 軸座標標記最大長度 |
將 Y 軸分割成幾個段 |
|
|
|
|
X _min |
設置 X 軸 座標最小值 |
X 軸座標最小值 |
|
|
|
|
|
|
x _max |
設置 X 軸 座標最大值 |
X 軸座標最大值 |
|
|
|
|
|
|
y_min |
設置 Y 軸座標最小值 |
Y 軸座標最小值 |
|
|
|
|
|
|
y_max |
設置 Y 軸座標最大值 |
Y 軸座標最大值 |
|
|
|
|
|
|
bg_colour |
設置背景顏色 |
|
|
|
|
|
|
|
inner_background |
設置座標區域內部顏色 |
顏色 1 |
顏色 2( 從 顏色 1 漸變到顏色 2) |
漸變角度 |
|
|
|
|
bg_image |
設置背景圖片 |
圖片位置 |
|
|
|
|
|
|
bg_image_x |
設置圖片橫向位置 |
[left |center |right] |
|
|
|
|
|
|
bg_bg_image_y |
設置圖片縱向位置 |
[top |middle | bottom ] |
|
|
|
|
|
|
x_axis_colour |
設置 X 軸顏色 |
|
|
|
|
|
|
|
y_axis_colour |
設置 Y 軸顏色 |
|
|
|
|
|
|
|
x_axis_steps |
設置 X 軸線條間隔 |
|
|
|
|
|
|
|
x_axis_3d |
設置 X 軸 3d 效果的高 度 |
|
|
|
|
|
|
|
x_grid_colour |
設置 X 軸線條顏色 |
|
|
|
|
|
|
|
y_grid_colour |
設置 Y 軸線條顏色 |
|
|
|
|
|
|
|
show_y2 |
設置 Y 軸右邊也顯示座標 |
[true |false] |
|
|
|
|
|
|
y2_lines |
設置哪個圖是根據右邊 Y 座標的值來顯示 |
[ 可以有多個 ] |
|
|
|
|
|
|
y_format |
格式化 Y 軸顯示 ( 常與 #val# 等聯合使用 ) |
|
|
|
|
|
|
|
values |
設置值 |
|
|
|
|
|
|
|
num_decimals |
格式化小數位數 |
|
|
|
|
|
|
|
is_fixed_num_decimals_forced |
是否強制格式化小數 |
[true |false] |
|
|
|
|
|
|
is_decimal_separator_comma |
是否使用小數分隔符 |
[true : , |false : . ] ( 與千位分隔符相反 ) |
|
|
|
|
|
|
is_thousand_separator_disabled |
是否使用千位分隔符 |
[true |false] |
|
|
|
|
|
|
x_offset |
是否自動補償以適應圖 的顯示 |
[true |false] |
|
|
|
|
|
|
bar |
柱狀圖 |
透明度 |
顏色 |
名稱#key# |
名稱字體大小 |
|
|
|
bar_glass |
水晶柱狀圖 |
透明度 |
內部顏色 |
外框顏色 |
名稱#key# |
名稱字體大小 |
|
|
bar_fade |
漸變柱狀圖 |
透明度 |
顏色 |
名稱#key# |
名稱字體大小 |
|
|
|
bar_arrow |
帶有箭頭的柱狀圖 |
透明度 |
顏色 |
名稱#key# |
名稱字體大小 |
|
|
|
bar_3d |
3D 立體柱狀圖 |