BlogJava-咖啡妆 --专注java-随笔分类-charthttp://www.blogjava.net/freeman1984/category/43680.htmlhttp://shop59092284.taobao.com/zh-cnWed, 20 Jan 2010 01:20:12 GMTWed, 20 Jan 2010 01:20:12 GMT60openflashhttp://www.blogjava.net/freeman1984/archive/2010/01/20/310184.html咖啡妆咖啡妆Wed, 20 Jan 2010 01:14:00 GMThttp://www.blogjava.net/freeman1984/archive/2010/01/20/310184.htmlhttp://www.blogjava.net/freeman1984/comments/310184.htmlhttp://www.blogjava.net/freeman1984/archive/2010/01/20/310184.html#Feedback0http://www.blogjava.net/freeman1984/comments/commentRss/310184.htmlhttp://www.blogjava.net/freeman1984/services/trackbacks/310184.html1:配置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.   },    
  6.   
  7.   "y_legend":{    
  8.     "text": "Yedeer Chart",    
  9.     "style": "{color: #736AFF; font-size: 12px;}"    
  10.   },    
  11.   
  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.   ],    
  30.   
  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.    },    
  38.   
  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)

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



咖啡妆 2010-01-20 09:14 发表评论
]]>