haohtml's blog » ofc http://blog.haohtml.com haohtml's life and works Tue, 22 May 2012 04:57:52 +0000 en hourly 1 http://wordpress.org/?v=3.3.2 open flash chart 教程翻译（2）——数据文件 http://blog.haohtml.com/archives/1281 http://blog.haohtml.com/archives/1281#comments Thu, 23 Apr 2009 02:33:36 +0000 admin http://blog.haohtml.com/?p=1281 您可能也喜欢：
Open Flash Chart:免费的Flash统计图表库
Open Flash Chart 图表教程之一
open flash chart 教程翻译（3）——生成数据文件(PHP篇)
Flash AS3与后台通讯 PHP版 无觅 ]]> 1 数据文件放在哪

除了在URL里添加数据的地址,ofc也有一个名为"data-file"的变量,可以在HTML里的JavaScript里设置:

<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":"chart-3.php"}
  );
</script>

<p>Hello World</p>
<div id="my_chart"></div>

要实现上例的效果,必须要有swfobject,获取更多关于swfobject的信息,请参考swfobject documentation.

注意

  • URL里面不需要再写"ofc=".
  • 当你要在一个页面里显示多个chart时,这种方法尤为有用.

这一篇就这么多,下一篇讲如何利用现有的库生成所需的数据文件.

原文地址:http://teethgrinder.co.uk/open-flash-chart-2/tutorial-3.php

<div id="my_chart"></div>
您可能也喜欢：

Open Flash Chart:免费的Flash统计图表库
Open Flash Chart 图表教程之一
open flash chart 教程翻译（3）——生成数据文件(PHP篇)
Flash AS3与后台通讯 PHP版
无觅
]]> http://blog.haohtml.com/archives/1281/feed 0 open flash chart 教程翻译（3）——生成数据文件(PHP篇) http://blog.haohtml.com/archives/1279 http://blog.haohtml.com/archives/1279#comments Thu, 23 Apr 2009 02:32:14 +0000 admin http://blog.haohtml.com/?p=1279 您可能也喜欢：
Open Flash Chart:免费的Flash统计图表库
open flash chart 教程翻译（2）——数据文件
Open Flash Chart 图表教程之一
50个非常有用的PHP工具 无觅 ]]> 1 生成JSON文件

如何使用PHP库生成JSON文件:

<?php

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

// generate some random data
srand((double)microtime()*1000000);

$max = 20;
$tmp = array();
for( $i=0; $i<9; $i++ )
{
  $tmp[] = rand(0,$max);
}

$title = new title( date("D M d Y") );

$bar = new bar();
$bar->set_values( array(1,2,3,4,5,6,7,8,9) );

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

echo $chart->toString();

?>
您可能也喜欢：

Open Flash Chart:免费的Flash统计图表库
open flash chart 教程翻译（2）——数据文件
Open Flash Chart 图表教程之一
50个非常有用的PHP工具
无觅
]]> http://blog.haohtml.com/archives/1279/feed 0 Open Flash Chart 图表教程之一 http://blog.haohtml.com/archives/1274 http://blog.haohtml.com/archives/1274#comments Thu, 23 Apr 2009 02:14:00 +0000 admin http://blog.haohtml.com/?p=1274 您可能也喜欢：
open flash chart 教程翻译（3）——生成数据文件(PHP篇)
Open Flash Chart:免费的Flash统计图表库
open flash chart 教程翻译（2）——数据文件
Flash AS3与后台通讯 PHP版 无觅 ]]> 今天在群里有位朋友发来一个开源的flash图表程序,自己研究了一下感觉不错,特自己翻译官方教程帮助一些想用该图表的朋友. very very easy Let’s go!!
它的工作原理:
在这个教程里,我们将在你的站点里尝试并且得到以下的类似图表

1:配置Open-Flash-Chart
开始之前,我们必须先下载一个Open Flash Chart 压缩文件. Click Down

解压.zip文件,在version-2文件夹里的把open-flash-chart.swf复制到你的站点根目录

你可以把所有文件移到你的站点上任何目录下,但为了保持本教程的完整和简单,现在不必移动全部文件到站点里.当你学完这个教程并且例子代码都能运行时,可 以把文件移到到你指定的目录下.如果例子运行出错,你应该清楚知道你移动过的文件并且修改相关的文件路径引用

2:代码:
 现在让我们开始编写代码!
新建一个HTML文件,我们将运行一个”Hello World”例子.复制下面的代码到文件里,并保存文件名为”chart.html”在站点根目录:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>Open Flash Chart</title>
  5. </head>
  6. <body>
  7. <p>Hello World</p>
  8. <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
  9. codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"
  10. width="500" height="250" id="graph-2" align="middle">
  11. <param name="allowScriptAccess" value="sameDomain" />
  12. <param name="movie" value="open-flash-chart.swf" />
  13. <param name="quality" value="high" />
  14. <embed src="open-flash-chart.swf" quality="high" bgcolor="#FFFFFF" width="500" height="250" name="open-flash-chart" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
  15. </object>
  16. </body>
  17. </html>

现在打开浏览这个页面
Open Flash Chart会查找图表数据源,但是我们没有创建数据文件,所以它不能找到数据源并且给出一个错误信息.正如你所看到的:

<object>和<embed>标签来告诉浏览器来显示一个Flash影片.只要Open Flash Chart 影片名在这两个标签里,浏览器就能下载并且显示它.
(声明:之所以我们使用这两个标签是因为只适用于IE浏览器而其他浏览器使用其他标签)
3:数据源
下一步我们需要提供一些数据.Open Flash Chart读取的是JSON数据,如果你从未听过JSON,不必担心它很简单易学.JSON是一种数据格式的命名,这里有一个简单的JSON图表数据:

  1. {
  2. "title":{
  3. "text": "Yedeer sale lines",
  4. "style": "{font-size: 20px; color:#0000ff; font-family: Verdana; text-align: center;}"
  5. },
  7. "y_legend":{
  8. "text": "Yedeer Chart",
  9. "style": "{color: #736AFF; font-size: 12px;}"
  10. },
  12. "elements":[
  13. {
  14. "type": "bar_glass",
  15. "alpha": 0.8,
  16. "colour": "#9933CC",
  17. "text": "Page views",
  18. "font-size": 10,
  19. "values" :   [9,6,7,9,5,7,6,9,7]
  20. },
  21. {
  22. "type": "bar_glass",
  23. "alpha": 0.8,
  24. "colour": "#CC9933",
  25. "text": "Page views 2",
  26. "font-size": 10,
  27. "values" :   [6,7,9,5,7,6,9,7,3]
  28. }
  29. ],
  31. "x_axis":{
  32. "stroke":1,
  33. "tick_height":10,
  34. "colour":"#d000d0",
  35. "grid_colour":"#00ff00",
  36. "labels": ["January","February","March","April","May","June","July","August","Spetember"]
  37. },
  39. "y_axis":{
  40. "stroke": 4,
  41. "tick_length": 3,
  42. "colour": "#d000d0",
  43. "grid_colour": "#00ff00",
  44. "offset": 0,
  45. "max": 15
  46. }
  47. }

JSON数据不应该手工输入(稍后我们让后台程序来完成JSON数据生成),这很容易输错.
下一步,我们将上面的JSON数据复制到文件里并保存到根目录命名为”data.json”
Open Flash Chart 能以URL的get形式获取数据源,它的变量是”ofc”值为JSON数据源的名字.现在你的数据文件保存在根目录名为data.json
在浏览你的网页,仍然会提示出错.你只要在网页后添加参数?ofc=data.json
你将看到:

4.祝贺
你成功了!
你编辑刚才data.json文件,另存为’data-2.json’,修改里面"values" : [9,6,7,9,5,7,6,9,7]内的数值来改变显示.里面数据改变后浏览一下(http://example.com/chart.html?ofc=data-2.json)注意ofc变量参数为data-2.json.手工更改JSON内容是很容易输错的方法,另一种方法是在教程3里我们将用PHP的类库来生成JSON格式文件
5.后记
注意:
*ofc变量不单只有它一个参数还可以有多个其他变量参数
如: http://example.com/chart.html?x=1&ofc=data.json&y=2 都能正常执行
*你可以把JSON文件保存到站点下任何目录并且要用完整路径指定ofc变量
如: http://example.com/chart.html?ofc=../stuff/../data.json
*路径和文件名必须是URL编码.当你输入URL时,没有按URL编码会出现问题
回顾一下刚才我们所做的:
1. 在站点根目录里创建一个chart.html文件
2. chart.html内的Flash两个标签和复制一个Open Flash Chart 的应用程序(open-flash-chart.swf)到根目录
3. 创建Open Flash Chart 所需的JSON数据文件
4. Open Flash Chart 读取JSON数据文件,显示相应的图表(?ofc=data.json)

你应该做出来了!觉得如何?好的话我就继续为剩余教程继续编译!

您可能也喜欢：

open flash chart 教程翻译（3）——生成数据文件(PHP篇)
Open Flash Chart:免费的Flash统计图表库
open flash chart 教程翻译（2）——数据文件
Flash AS3与后台通讯 PHP版
无觅
]]> http://blog.haohtml.com/archives/1274/feed 0 Open Flash Chart:免费的Flash统计图表库 http://blog.haohtml.com/archives/1271 http://blog.haohtml.com/archives/1271#comments Wed, 22 Apr 2009 07:47:45 +0000 admin http://blog.haohtml.com/?p=1271 您可能也喜欢：
open flash chart 教程翻译（2）——数据文件
open flash chart 教程翻译（3）——生成数据文件(PHP篇)
Open Flash Chart 图表教程之一
Flash AS3与后台通讯 PHP版 无觅 ]]> http://parandroid.com/open-flash-chart-free-flash-statistical-tables-for-the/

您可能也喜欢：

open flash chart 教程翻译（2）——数据文件
open flash chart 教程翻译（3）——生成数据文件(PHP篇)
Open Flash Chart 图表教程之一
Flash AS3与后台通讯 PHP版
无觅
]]> http://blog.haohtml.com/archives/1271/feed 0