淮南市市长王宏:Open Flash Chart 2.0开源flash图表2.0

Open Flash Chart 2.0开源flash图表2.0

PHP 2010-09-30 17:26:44 阅读19 评论0   字号：大中小 订阅

教程1:工作原理

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

在这个教程中，我们将试着将以下图表部署到你的web站点上：

1: Install files

1：配置相关文件

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

在我们开始以前，你需要下载Open Flash Chart 的 .zip文件

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

解压.zip文件，将version-2文件夹下的open-flash-chart.swf 文件复制到你的web服务的根目录下

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

你可以将所有的文件放在你web服务的任意目录下，但是，让我们不要随意放置文件以便我们的教程能顺利的进展下去。打不过不完整学习完教程也写出了一个可以工作的示例后，你可以将文件部署到你觉得更为适当的位置。假如示例运行出错，你可以知道哪个文件被你排除而现在必须放回到相应的路径中。

2. The Code

2.代码

Now we can start coding!

现在我们可以开始编程了

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

首先创建一个可以展示一个简单的’hello world!”程序的 HTML文件。将以下代码复制到你新建的HTML文件中，将它命名为 ‘chart.html’ ，并放到你的web站点根目录下。

Create the flash object

Hello World

Now browse to this web page, you should see example 1.

现在通过浏览器打开这个web页面，你可以看到效果如 example 1.

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

Open Flash Chart已经在很多地方寻找图表数据，但是假如它没有找到就会显示一个错误页面，这正是我们所希望看到的！

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

object和embed标签告诉浏览器这里将用来显示一个flash影片。因为Open Flash Chart 影片名在这两个标签里，所以浏览器下载并显示Open Flash Chart 影片。

3. The Data

3.数据

Next we need to provide it with some data. Open Flash Chart reads JSON data, if you haven’t heard of it don’t worry. JSON is the name of the format that the data takes, here is a simple chart in JSON:

接下来，我们需要提供它一些数据。Open Flash Chart 读取的是JSON格式的数据，假如你从来没有听说过它，不用担心，JSON是一种数据格式的名称，这里有一个简单的通过JSON实现图表的示例：

Create the flash object 创建一个flash对象

{
“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”: ["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’t supposed to be read and written by humans (we’ll get your server to do this later) but it isn’t too bad.

JSON并不通过人工方式来读取和创建（稍后，我们将让你的程序自己来处理它），但这样做也没什么问题。

Next copy the above JSON data into a file and save this as “data.json” in the root of your web server.

下一步，我们将以上JSON数据复制到名称为data.json的文件中，并放到你的web站点根目录下。

Open Flash Chart looks in a number of places for data, one of them is the URL. It looks for a variable called ‘ofc’ that contains the name of the data file. You have saved the data file to the root of your server so your data file name is ‘data.json’.

Open Flash Chart 可以通过不同途径来获得数据，其中一个方式就是通过URL。它会去找一个 ‘ofc’的变量，该变量包含了数据文件的名称。你可以将’data.json’数据文件保存到你站点的根目录下。

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

现在浏览你的web页面。它仍然会提示一个错误信息。下一步修改URL，在URL后面增加 ?ofc=data.json （你的URL应该大概像这样http://example.com/chart.html?ofc=data.json）

You should see a chart like this example 2.

你可以看到一个如example 2的图表。

4. Congratulations!

4.祝贺你！

That’s it!

这就是我们要的了！

For a giggle you can try editing the .json file, copy it and save is as ‘data-2.json’, to display 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 we will use the PHP library to write the JSON file.

你可以修改.json文件，将其另存为为’data-2.json’，将里面的数据改为你想要的，例如 “values” : [9,6,7,9,5,7,6,9,7].这个数据格式很容易输入错误，在教程3中我们会利用PHP类库来生成JSON格式的文件。

5. Postamble

5.后记

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.

URL所带参数可以不只是ofc变量， http://example.com/chart.html?x=1&ofc=data.json&y=2一样可以工作。

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

你可以将 .json 文件放置到容易目录下，然后在ofc变量中全路径指定它，例如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.

路径和文件名必须是URL编码（utf-8编码）【注1】，当你在web浏览器中输入URL地址时，浏览器一般会自己处理好编码问题，但是假如你计划通过代码来生成URL地址，它可能会导致一些小问题。

A brief recap of what 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.

浏览 chart.html 页面

通过flash标签和 open-flash-chart.swf 影片应用程序下载它

Open Flash Chart通过URL引用数据文件，并下载数据

Open Flash Chart读取JSON并将其转变为图表显示出来

【注1】：当你在IE的浏览器中输入URL地址的时候，IE会以UTF-8对其进行编码（除非在高级设置里面取消选项“总是以UTF-8发送URL”），由此来全面支持国际化语言。所以URL编码的意思就是utf-8的编码格式。