`
splinter_2
  • 浏览: 57704 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

open flash chart 2 教程

阅读更多

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

 

教程一：它是怎么工作的

在这个教程里面我们要告诉大家如何在你的网页上面显示这样的一张图表。

这里我截了一张图片示意一下，真正的图表是鼠标移上去有交互的。

 

1：安装ofc

在我们开始之前，你应该先下载ofc的压缩包。

下载地址在这里：http://teethgrinder.co.uk/open-flash-chart-2/downloads.php，下载里面的zip压缩包。

解压.zip文件，进入version-2目录，把open-flash-chart.swf这个文件复制到你的web目录的根目录下（其实任何目录都是可以的，只要你在使用的时候写对路径，但是这里我们为了方便，就放到根目录好了）。

 

2：开始编码

在你的web根目录下新建一个chart.html文件，并把以下代码复制进去。

 

view plaincopy to clipboardprint?
  1. <html>  
  2. <head>  
  3. </head>  
  4. <body>  
  5.    
  6. <p>Hello World</p>  
  7.    
  8.    
  9. <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"  
  10.         codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"  
  11.         width="500"  
  12.         height="250" id="graph-2" align="middle">  
  13.    
  14.     <param name="allowScriptAccess" value="sameDomain" />  
  15.     <param name="movie" value="open-flash-chart.swf" />  
  16.     <param name="quality" value="high" />  
  17.     <embed src="open-flash-chart.swf" mce_src="open-flash-chart.swf"  
  18.            quality="high"  
  19.            bgcolor="#FFFFFF"  
  20.            width="500"  
  21.            height="250"  
  22.            name="open-flash-chart"  
  23.            align="middle"  
  24.            allowScriptAccess="sameDomain"  
  25.            type="application/x-shockwave-flash"  
  26.            pluginspage="http://www.macromedia.com/go/getflashplayer" />  
  27. </object>  
  28.    
  29. </body>  
  30. </html>  

 

 

现在你打开这个页面的时候，会看到这样的内容：例子1 它可能会包含一个错误。

因为这个时候我们只告诉它要显示一个ofc图表，但是还没有把要显示什么数据告诉它。

 

3：数据

下面我们要给它提供一些数据。ofc读取的是json格式的数据，json大家应该都知道吧，没有也么关系，你只要把下面这段代码复制到一个新文件中去，并命名为data.json，同样保存到web根目录中。

 

view plaincopy to clipboardprint?
  1. {  
  2.   "title":{  
  3.     "text":  "Many data lines",  
  4.     "style": "{font-size: 20px; color:#0000ff; font-family: Verdana; text-align: center;}"  
  5.   },  
  6.    
  7.   "y_legend":{  
  8.     "text": "Open Flash Chart",  
  9.     "style": "{color: #736AFF; font-size: 12px;}"  
  10.   },  
  11.    
  12.   "elements":[  
  13.     {  
  14.       "type":      "bar",  
  15.       "alpha":     0.5,  
  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",  
  23.       "alpha":     0.5,  
  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": {  
  37.         "labels": ["January","February","March","April","May","June","July","August","Spetember"]  
  38.     }  
  39.    },  
  40.    
  41.   "y_axis":{  
  42.     "stroke":      4,  
  43.     "tick_length": 3,  
  44.     "colour":      "#d000d0",  
  45.     "grid_colour": "#00ff00",  
  46.     "offset":      0,  
  47.     "max":         20  
  48.   }  
  49. }  

 

 

ofc可以有好多方法去获取数据，其中一种方式是url，就是通过链接告诉它去那里取数据。

现在通过浏览器打开刚才的chart.html，给它加上一个参数，“?ofc=data.json”，这个时候你的链接应该看起来像这样：http://example.com/chart.html?ofc=data.json

你应该能看到类似这样的一个图表：例子2

 

4：恭喜你，你已经成功了。

看，就是这么简单。这样就搞定了一个最简单的图表显示了。

你可以尝试编辑data.json文件来显示你自己的数据，编辑 "values" : [9,6,7,9,5,7,6,9,7] 这部分就可以了。

你会发现手动编辑这样的数据格式及其容易出错，所以在教程3里面我们会用php的api来写json格式的数据。

 

5：一些需要注意的地方

  • url里面的ofc参数并不是唯一的，它可以和该页面的其他参数一起和谐共处。比如这样也行：http://example.com/chart.html?x=1&ofc=data.json&y=2
  • 你可以把data.json文件放到web目录的其他地方，然后在url里面指定路径即可。比如这样：http://example.com/chart.html?ofc=../stuff/../data.json
  • 作为参数的路径和文件名都要经过url编码（url encode）。

 

简单概括一下它做了哪些事情：

 

 

  1. 浏览器请求chart.html文件
  2. 它发现了falsh tag，然后去请求open-flash-chart.swf这flash文件。
  3. ofc发现url里面指定的数据文件，并去读取数据。
  4. ofc读取json格式的数据，并把数据显示出来
分享到：
| Open Flash Chart 2 for java 笔记
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics