`
splinter_2
  • 浏览: 58952 次
  • 性别: 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 笔记
评论
发表评论

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

相关推荐

    open-flash-chart2系列教程

    《Open Flash Chart 2 系列教程：深入解析与应用》 Open Flash Chart 2（简称OFC2）是一款强大的开源图表生成库，专为创建交互式、动态的Flash图表而设计。它允许开发者通过JSON格式的数据来构建各种类型的图表，如...

    Open Flash Chart 教程

    这个教程可能是为了帮助用户理解如何利用Open Flash Chart来创建动态和定制化的图表，适合Web开发者或者数据分析人员学习。下面我们将深入探讨Open Flash Chart的相关知识点。 1. **Open Flash Chart的基本概念** ...

    open flash chart api

    Open Flash Chart API 是一款强大的开源图表库，它使用Flash技术来生成高质量、交互式的图表。在Web开发中，数据可视化是至关重要的，Open Flash Chart API 提供了丰富的功能，使得开发者能够轻松创建各种类型的图表...

    Open Flash Chart所需文件

    Open Flash Chart是一款强大的开源Flash图表库，用于在Web应用程序中创建高质量、互动的图表。它提供了丰富的自定义选项，能够生成各种类型的图表，包括柱状图、饼图、线点图等，使得数据可视化变得更加简单易行。在...

    open flash chart库

    **Open Flash Chart库详解** Open Flash Chart是一款强大的开源图表库，专为PHP开发者设计，用于创建各种美观且交互性强的数据可视化图表。它以其出色的视觉效果和丰富的自定义选项，在Web应用中广泛使用，尤其适用...

    Open Flash Chart2 相关资料

    由于最近公司项目中要用到图表，看到...4.Open Flash Chart2的基础入门教程。 (压缩包中的jofc版本可能有点旧，有些部分功能没有，请下载最新的jofc) 附最新jofc下载地址： http://download.csdn.net/source/3508602

    open flash chart2实例

    Open Flash Chart 2是一款强大的开源图表库，它允许开发者创建各种动态、美观的图表，包括饼图、曲线图和柱状图等。这个实例集合提供了一系列的示例代码，帮助我们理解和应用Open Flash Chart 2的功能。下面我们将...

    完整的open flash chart 。

    2. **开源**：作为开源项目，Open Flash Chart的源代码可供所有人查看和修改。这意味着开发者可以根据自己的需求进行定制，或者贡献新的功能和改进，从而构建适合特定应用的图表解决方案。 3. **图表类型**：Open ...

    open flash chart-2 简单教程 DEMO

    《Open Flash Chart-2 简单教程及DEMO解析》 Open Flash Chart-2 是一个开源的Flash图表库，它允许开发者通过简单的JavaScript API创建交互式的、视觉效果丰富的图表。这个库尤其适用于那些需要在网页上展示数据的...

    开源flash图表--open flash chart

    2. **丰富的图表类型**：Open Flash Chart支持多种图表类型，如折线图、柱状图、饼图、散点图、面积图、甘特图等，能满足各种数据分析和展示的需求。 3. **高度可定制**：开发者可以通过调整各种参数来改变图表的...

    open flash chart 2 使用

    **Open Flash Chart 2 使用详解** Open Flash Chart 2 是一款强大的开源图表库，它使用 Adobe Flash 技术来创建各种美观且交互性强的数据可视化图表。这个库特别适合那些需要在网页上展示复杂数据的开发者，它提供...

    Open Flash Chart例子、中文版PDF说明文档、参数表

    Open Flash Chart（简称OFC），是一个开源的flash报表组件。我们不仅可以免费使用，而且还可以修改源码，来达到我们想要的效果。客户端在得到数据以后，在Flash Player中渲染出报表图。 　附带PDF说明文档，是中文版...

    open flash chart 2 线性图 柱形图 饼状图

    Open Flash Chart 2 是一款强大的开源图表库，用于在网页中生成高质量的交互式图表。它使用Flash技术，提供丰富的视觉效果，同时保持了良好的浏览器兼容性和易用性。线性图、柱形图和饼状图是数据可视化中常见的图表...

    open-flash-chart-1[1].9.7.zip_flash chart tr_open flash chart

    4. **perl-ofc-library**、**perl-2-ofc-library**：这是Perl语言的Open Flash Chart接口库，允许Perl开发者通过简单的API调用来生成和定制图表。 5. **java-ofc-library**：Java版本的Open Flash Chart库，为Java...

    Open Flash Chart的应用(java)，就是很炫的报表了

    这里面有两个java代码工程和 Open Flash Chart API。工程都是调试过的直接导入可用，代码都有详细的注释，如果你真是想用到报表之类的东西，肯定很不错了。 工程所需的jar 包 js文件都有，基本上很全。 第一步：...

    open flash chart 实例2

    总结来说，"open flash chart 实例2"展示了如何利用Open Flash Chart结合HTML和PHP实现数据可视化的过程。通过"chart-2.html"展示图表，"data.php"提供动态数据，两者协同工作，为用户提供了一种灵活、高效且美观的...

    Open Flash Chart 报表插件相关

    Open Flash Chart是一款强大的开源图表生成插件，常用于创建交互式、美观的图表，尤其适合在Web应用程序中显示数据。这个插件支持多种编程语言，包括ASP.NET，使得开发者能够轻松地将动态数据转化为视觉上吸引人的...

    最新版Open Flash Chart

    Open Flash Chart是一款强大的开源Flash图表组件，用于创建各种复杂且美观的数据可视化效果。这款软件的最新版本2.0带来了更多的功能和改进，旨在为开发者提供更便捷、灵活的方式来展示数据。下面将详细介绍Open ...

    open-flash-chart

    博客链接指向的是ITEYE博主 Moyuan 的一篇关于Open Flash Chart的文章，虽然具体内容没有提供，但通常这样的博客会包含如何使用Open Flash Chart的教程、示例代码和一些实用技巧。 标签“源码”表明我们可以获取到...

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