昨天用了 Google Chart API 來作 stickeraction 的圖表, 然後 tka 大大在 twitter 上跟我提了 Open Flash Chart 這個東西, 所以就來玩了一下。 其實之前就看過 Open flash chart 這個東西, 只是當時沒時間看, 也看不太懂 XD 昨天玩了 Google Chart API 之後, 大概了解了 Chart 使用的方式之後, 後來在用 Open Flash Chart 時就順手多了。
Open Flash Chart 弄出來的圖表真的是滿不賴的 :p 就跟 clicky 還有 Google Analytics 的圖表一樣, 像是這樣:
有興趣可以看看這個圖表在 stickeraction 實際的樣子。
Open Flash Chart 在使用上還滿簡單的, 大致上分為前端的 flash 跟後端的資料。 以下這裡是前端的部份:
<html>
<head>
<script type="text/javascript" src="/js/swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF(
"/assets/open-flash-chart.swf", "stats",
"600", "300", "9.0.0", "expressInstall.swf",
{"data-file":"/stats/data"} );
</script>
</head>
<body>
<div id='stats'>
</div>
</body>
</html>
前端應該不會有太大問題, 就只是把相關檔案放好, 指定一下 data-file 的位置就可以了。
( 說明一下, 資料可以直接寫成 javascript 的變數, 不一定要存放在另外的 data-file )
這裡是後端產生給 Open Flash Chart 2 用的資料, 用的是 JSON 的格式, 如下:
/stats/data
{ "title": { "text": "Wed Dec 10 2008" }, "elements": [ { "type": "bar_3d",
"values": [ 2, 3, 9, 5, 9, 7, 9, 7, 9, 9 ], "colour": "#D54C78" } ],
"x_axis": { "3d": 5, "colour": "#909090", "labels": [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ] } }
後端的資料看起來很複雜! XD 不過其實 Open Flash Chart 有提供 PHP、Ruby、Python … 等 library 可供產生出這個 JSON 格式的資料, 以下為 PHP5 的範例程式:
srand((double)microtime()*1000000);
$data = array();
// add random height bars:
for( $i=0; $i<10; $i++ )
$data[] = rand(2,9);
require_once('OFC/OFC_Chart.php');
$title = new OFC_Elements_Title( date("D M d Y") );
$bar = new OFC_Charts_Bar_3d();
$bar->set_values( $data );
$bar->colour = '#D54C78';
$x_axis = new OFC_Elements_Axis_X();
$x_axis->set_3d( 5 );
$x_axis->colour = '#909090';
$x_axis->set_labels( array(1,2,3,4,5,6,7,8,9,10) );
$chart = new OFC_Chart();
$chart->set_title( $title );
$chart->add_element( $bar );
$chart->set_x_axis( $x_axis );
echo $chart->toPrettyString();
這樣看起來清楚多了吧(?) XD anyway 這段程式的結果, 可以看看這個 [ 3D bar chart ], 其實我把 PHP5 library 裡所提供的 examples, 都放到這裡了 http://tzangms.com/code/ofc/, 方便看看各個不同樣式的 Flash Chart, 以及跟範例程式對照, 畢竟目前沒有提供 library 的相關說明, 得自己去看 code。
另外, 也做了 stickeraction 的圖表, 可以到這裡看看 http://stickeraction.com/stats
之後應該會應用在 stickeraction 每個串連貼紙的統計上吧 :p
註: PHP5 library 得用 set_include_path 的方式來載入。
请问应该怎样把json数据放在var data中呢？我试了很多遍都没成功，谢谢
應該直接這樣?
var data = <?=$json_data?>;其實我沒試過 var data, 只有試過 data-file 的方式說 :p
谢谢，我是觉得把data单独放在一个文件里，一是文件冗余，二是有两次request server,我试试你的办法先。
@Joe
是這樣沒錯。 不過也許可以這樣想, 如果當資料量大, 或是處理時間會比較長的時候。 把資料放在另外一頁, 透過 flash 去讀取, 那麼瀏覽當前的頁面時, 載入會比較快? :p
找了一下, 你可以參考這一篇
http://teethgrinder.co.uk/open-flash-chart-2/tutorial-5.php
除了 var data 之外, 似乎還要 include json2.js 這個檔案。
谢谢你推荐的这篇文章，终于试成功了。但是有一点小修改，OFC V2下应该用swfobject.embedSWF（），另外.net library目前已支持使用httpHandler配置节，可将data-file输出与chart绘制放在同一文件下，但是否存在两次request，我还没试过。
关于data-file 后面的url地址为什么只能带一个参数，我带多个参数的话，就自动被截掉了。
请问如何用JavaScript来修改Chart的title，或者其他属性？
我用的是open-flash-chart 2.
在OFC的官网看到有例子可以实现（http://teethgrinder.co.uk/open-flash-chart/gallery-js-2.php），不过好像是OFC1，官网的例子用的是set_title();但是在OFC2下去找不到此方法。
直接存取程式端也會這樣嗎?
這個我就沒試過了說
参数问题解决了，在传参时把 & 替换成%26就可以了，但是，在flash图显示时$pie->set_tooltip( ‘#val# of #total# #percent# of 100%’ ); tooltip中#total#值把数据值并排列了，并没有相加。这个怎么回事？
我沒試過 tooltip 勒~ 直接去問開發者會比較快 :p
解决了，因为源码设置的问题。