Open Flash Chart极简单入门教程英文翻译

来源：互联网发布：c 定义数组长度编辑：程序博客网时间：2024/06/04 00:30

如何让Open Flash Chart运作

在这一节里，我们将尝试将下面的图表实施在你的web站点上，如下图所示:

1、安装文件

在我们开始之前，你应该将Open Flash Chart的压缩包下载下来。

打开你所下载下来的压缩包，进入version-2文件加下，将open-flash-chart.swf文件复制到你的服务器根目录下。

你可以移动所有的文件到任何你想的移动到的地方，但是这个教程将尽可能保证所有东西都是整洁美观的。当你完成了这一节，并且手中有了一个可以正常运行的实例，你可以将这些文件移动到一个更好的位置。如果有什么东西停止运行了，你也会知道你移动了什么文件，并且很轻松的修复它的目录结构。

2、代码

现在，让我们开始编码吧。

首先新建一个显示“hello world”的HTML文档，复制如下代码到该文档中，并将其保存在你的网站根目录下，命名为“chart.html”。

Code:

<html>

<head>

</head>

<body>

<p>Hello World</p>

<objectclassid="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">

<paramname="allowScriptAccess"value="sameDomain"/>

<paramname="movie"value="open-flash-chart.swf"/>

<paramname="quality"value="high"/>

<embedsrc="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>

现在在浏览器中打开这个网页，你将看到这个网页。（这个网页将显示一条错误信息）。

Open Flash Chart已经在一些地方寻找过了图表数据，但是它找不到任何数据，所以显示了一条错误信息。这就是我们想看到的东西。

Object和embed标签告诉浏览器显示一个flash动画，flash动画的名字就在这两个标签中。所以浏览器需要下载这个动画，并且显示它。我们使用两个标签的原因是只有IE浏览器才支持一个标签而其他浏览器却不支持。

3、数据

下一步我们需要为它提供一些数据，Open Flash Chart读取json数据。如果你不了json的话，不要着急，json是一种格式化数据的名称，这里有一个简单的图表数据json实例：

{

"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": "Pageviews",

"font-size":10,

"values": [9,6,7,9,5,7,6,9,7]

{

"type": "bar",

"alpha": 0.5,

"colour": "#CC9933",

"text": "Page views2",

"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

}

Json数据不支持人类读取（一会我们将让你的服务器来做这个），但它还不至于很坏。

下面复制上面代码，在服务器根目录下新建一文件命名为data.json，并将以上代码保存到其中。

Open Flash Chart寻找数据有很多方式，Url就是其中一种。它看起来像是一个名叫ofc的变量，包含了数据文件的名称。你已经保存了你的数据文件到你的服务器根目录下，所以你的数据文件的名称就是“data.json”。

现在在浏览器中打开这个网页。你将看到一条错误信息，下面我们编辑url，在它的后面加上?ofc=data.json。（你的url看起来就像 http://example.com/chart.html?ofc=data.json）

你应该会看到一个类似下图的图表：

4、恭喜

这就我们想要的。

你可以尝试编辑json文件，复制并保存为2.json，并显示自己的数据。编辑"values" :[9,6,7,9,5,7,6,9,7]，这是一个极容易出现错误的数据格式，在教程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，这时需注意，而这可能会导致一些小问题，如果你打算做这个通过代码。

简要回顾：

浏览器请求chart.html文件

浏览器发现flash标签，要求打开flash播放器，并下文flash文件。

打开flash图表中的数据文件的url，并下载它。

打开json数据并读取它，显示图表。

以下是原英文文档：

yixiayi是英文原文

Tutorial 1: How it works.

In this tutorialwe are going to try and get the following chart onto your web site:

1: Install files

Before we canstart you should have downloaded the Open Flash Chart .zip file.

Open the .zip,look in version-2, copy the open-flash-chart.swf tothe root folder of your web server.

You can move allthe files to wherever you want on your webserver, but for this tutorial letskeep everything nice and simple. When you finish the tutorial and have aworking example, then move the files to a better location. If anything stopsworking, you know what file you moved and so should be able to fix the paths.

2. The Code

Now we can startcoding!

First create a newHTML file that will show a simple 'hello world!' page. Copy the following intoa new file, save it as 'chart.html' in the root of your website.

Code:

<html>

<head>

</head>

<body>

<p>Hello World</p>

<objectclassid="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">

<paramname="allowScriptAccess"value="sameDomain"/>

<paramname="movie"value="open-flash-chart.swf"/>

<paramname="quality"value="high"/>

<embedsrc="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>

Now browse to thisweb page, you should see example1 [this will display an errormessage!].

Open Flash Charthas looked for chart data in a number of places, but it can notfind any so displays an error message. This is exactly what we wanted to see!

The object and embed tagstell the browser to display a flash movie. The name of the Open Flash Chartmovie is in both, so the browser downloads, and displays it. (The reason we usetwo tags is because IE uses one and every other browser uses the other *sigh*)

3. The Data

Next we need toprovide it with some data. Open Flash Chart reads JSON data, if youhaven't heard of it don't worry. JSON is the name of the format that the datatakes, here is a simple chart in JSON:

Code:

{

"title":{

"text": "Manydata lines",

"style":"{font-size:20px; color:#0000ff; font-family: Verdana; text-align: center;}"

"y_legend":{

"text":"OpenFlash Chart",

"style":"{color:#736AFF; font-size: 12px;}"

"elements":[

{

"type": "bar",

"alpha": 0.5,

"colour": "#9933CC",

"text": "Pageviews",

"font-size":10,

"values": [9,6,7,9,5,7,6,9,7]

{

"type": "bar",

"alpha": 0.5,

"colour": "#CC9933",

"text": "Pageviews 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

}

JSON isn'tsupposed to be read and written by humans (we'll get your server to do thislater) but it isn't too bad.

Next copy theabove JSON data into a file and save this as "data.json" inthe root of your web server.

Open Flash Chartlooks in a number of places for data, one of them is the URL. It looks for avariable called 'ofc' that contains the name of the data file. You havesaved the data file to the root of your server so your data file name is 'data.json'.

Now browse to yourweb page. This should still show an error message. Next edit the URL and append ?ofc=data.json(yourURL will look like http://example.com/chart.html?ofc=data.json)

You should see achart like this example2.

4. Congratulations!

That's it!

For a giggle youcan try editing the .json file, copy it and save is as 'data-2.json', todisplay your own data edit the"values" : [9,6,7,9,5,7,6,9,7].It is extremely easy to make a mistake with the data format, in tutorial 3 wewill use the PHP library to write the JSON file.

5. Postamble

Note:

The ofc variable can be one of may variables, http://example.com/chart.html?x=1&ofc=data.json&y=2 will still work.
You can move the .json file anywhere and put the full path to it in the ofc variable, http://example.com/chart.html?ofc=../stuff/../data.json
The path and file name must be URL encoded. When typing the URL into the web browser, it takes care of this but this may cause you some minor problems if you plan on doing this via code.

A brief recap ofwhat is going on:

The bowser requests chart.html
It finds the flash tags and requests the open-flash-chart.swf flash application. Downloads it.
Open Flash Chart looks in the URL for the data file. It downloads it.
Open Flash Chart reads the JSON and displays the chart.

Open Flash Chart极简单入门教程 英文翻译

Open Flash Chart极简单入门教程英文翻译