open flash chart 2 教程

最新推荐文章于 2024-07-22 14:06:42 发布

Aric

最新推荐文章于 2024-07-22 14:06:42 发布

阅读量3.6k

点赞数

文章标签： flash json url 浏览器 web object

这个系列的文章是open flash chart官网上面的教程。

因为我最近要做一个监控系统，所以用了open flash chart（以下简称ofc）这个flash画图工具来画一些图表。按照它官网上面的教程一步一步做下来以后，我发现这个东西很好用，所以把它的官网教程翻译过来，推荐给大家。

原文地址：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?
<html>
<head>
</head>
<body>

Hello World


<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
 codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"
 width="500"
 height="250" id="graph-2" align="middle">

 <param name="allowScriptAccess" value="sameDomain" />
 <param name="movie" value="open-flash-chart.swf" />
 <param name="quality" value="high" />
 <embed src="open-flash-chart.swf" mce_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" />
</object>

</body>
</html>
<html>
<head>
</head>
<body>

Hello World

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
 codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"
 width="500"
 height="250" id="graph-2" align="middle">

<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="open-flash-chart.swf" />
<param name="quality" value="high" />
<embed src="open-flash-chart.swf" mce_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" />
</object>

</body>
</html>

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

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

3：数据

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

view plaincopy to clipboardprint?
{
"title":{
    "text": "Many data lines",
    "style": "{font-size: 20px; color:#0000ff; font-family: Verdana; text-align: center;}"
},

"y_legend":{
    "text": "Open Flash Chart",
    "style": "{color: #736AFF; font-size: 12px;}"
},

"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" :   [6,7,9,5,7,6,9,7,3]
    }
],

"x_axis":{
    "stroke":1,
    "tick_height":10,
    "colour":"#d000d0",
    "grid_colour":"#00ff00",
    "labels": {
        "labels": ["January","February","March","April","May","June","July","August","Spetember"]
    }
   },

"y_axis":{
    "stroke":      4,
    "tick_length": 3,
    "colour":      "#d000d0",
    "grid_colour": "#00ff00",
    "offset":      0,
    "max":         20
}
}
{
"title":{
    "text": "Many data lines",
    "style": "{font-size: 20px; color:#0000ff; font-family: Verdana; text-align: center;}"
},

"y_legend":{
    "text": "Open Flash Chart",
    "style": "{color: #736AFF; font-size: 12px;}"
},

"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" :   [6,7,9,5,7,6,9,7,3]
    }
],

"x_axis":{
    "stroke":1,
    "tick_height":10,
    "colour":"#d000d0",
    "grid_colour":"#00ff00",
    "labels": {
        "labels": ["January","February","March","April","May","June","July","August","Spetember"]
    }
   },

"y_axis":{
    "stroke":      4,
    "tick_length": 3,
    "colour":      "#d000d0",
    "grid_colour": "#00ff00",
    "offset":      0,
    "max":         20
}
}

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）。
简单概括一下它做了哪些事情：

浏览器请求chart.html文件
它发现了falsh tag，然后去请求open-flash-chart.swf这flash文件。
ofc发现url里面指定的数据文件，并去读取数据。
ofc读取json格式的数据，并把数据显示出来。

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/huguohuan/archive/2011/01/23/6160306.aspx

Aric

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
open flash chart 2 教程

 这个系列的文章是open flash chart官网上面的教程。 因为我最近要做一个监控系统，所以用了open flash chart（以下简称ofc）这个flash画图工具来画一些图表。按照它官网上面的教程一步一步做下来以后，我发现这个东西很好用，所以把它的官网教程翻译过来，推荐给大家。 原文地址：http://teethgrinder.co.uk/open-flash-chart-2/tutorial.php 教程一：它是怎么工作的 在这个教程里面我们
复制链接

扫一扫