openflashchart2教程.doc

open flash chart 2 教程 2011-01-23 23:42 2082人阅读 评论(0) 收藏 举报 这个系列的文章是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文件，并把以下代码复制进去。 [xhtml] view plaincopyprint? html?? head?? /head?? body?? ??? pHello?World/p?? ??? ??? object?classid=clsid:d27cdb6e-ae6d-11cf-96b8-444553540000?? ????????codebase=/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=/go/getflashplayer?/?? /object?? ??? /body?? /html?? ? 现在你打开这个页面的时候，会看到这样的内容：例子1?它可能会包含一个错误。 因为这个时候我们只告诉它要显示一个ofc图表，但是还没有把要显示什么数据告诉它。 ? 3：数据 下面我们要给它提供一些数据。ofc读取的是json格式的数据，json大家应该都知道吧，没有也么关系，你只要把下面这段代码复制到一个新文件中去，并命名为data.json，同样保存到web根目录中。 [xhtml] view plaincopyprint? {?? ??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,?? ??????colou