open flash chart
无意中看到business preview这个应用的图标是用open flash chart做的,遂上网了解了下该开源图表工具。平时自己想搞个快速的数据报表出来还是蛮方便的。
http://teethgrinder.co.uk/open-flash-chart-2/
open flash chart现在是2的大版本号,之前1的版本的数据文件格式不太通用,2的版本之后支持json的数据格式,可以将显示的报表的数据(包含格式),以json的格式进行解析。
1,download 相应的zip包。
2,将压缩包解压缩后放到web server的对应的目录下。
3,简单的理解就是,解析数据的open-flash-chart.swf程序,然后数据可以是一个存在服务器上的文本文件
比如:localhost:8080/flashChart/indexChart.htm?ofc=data.json
data.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": "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 } }
indexChart.htm的内容为:
<html> <head> </head> <body> <p>Hello World</p> <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" 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>
也可以是程序(PHP,java等)及时产生的。这样请求的对象就是相应的page。
比如:localhost:8080/flashChart/indexChart.htm?ofc=data.jsp
data.jsp页面输出相关的数据字符串。
4,indexChart.htm页面的内容可以精简下,有人写了一些js做了精简工作,swfobject.js文件已经包含在下载的压缩包里了。所以indexChart.htm的内容可以精简为:
<html> <head> <script type="text/javascript" src="js/swfobject.js"></script> <script type="text/javascript"> swfobject.embedSWF("open-flash-chart.swf", "my_chart", "250", "200", "9.0.0"); </script> </head> <body> <p>Hello World</p> <div id="my_chart"></div> </body> </html>
发送的请求连接依然不变。
5,上面获取图形展示所需要的数据都是通过URL的方式,传了一个ofc的参数,这个还可以再精简。
<script type="text/javascript" src="js/swfobject.js"></script> <script type="text/javascript"> swfobject.embedSWF( "open-flash-chart.swf", "my_chart", "550", "200", "9.0.0", "expressInstall.swf", {"data-file":"chart-3.php"} ); </script>
对indexChart的一段js脚本做些改变,传入了data-file的文件,这里德chart-3.php就是产生数据的程序页面。
这样就可以去掉URL中的ofc参数.如果有多个数据文件,用URL的方式也是无法满足的。所以该方案用的比较多。
6,data-file的数据其实未必需要在另外一个页面来处理产生,就是在当前页就可以处理,然后传个那个函数即可。
The sequence of steps goes like this:
- Your browser requests js.php
- js.php is run on the server
- js.php creates a PHP open_flash_chart() object
- open_flash_chart writes the chart JSON data into the <script type="text/javascript"> section of the page
- The browser downloads the page
- The browser runs the Javascript (which creates the JSON object)
看到以下内容应该很容易就理解了。
<?php // // This is the MODEL section: // include '../php-ofc-library/open-flash-chart.php'; $title = new title( date("D M d Y") ); $bar = new bar(); $bar->set_values( array(9,8,7,6,5,4,3,2,1) ); $chart = new open_flash_chart(); $chart->set_title( $title ); $chart->add_element( $bar ); // // This is the VIEW section: // ?> <html> <head> <script type="text/javascript" src="../js/json/json2.js"></script> <script type="text/javascript" src="js/swfobject.js"></script> <script type="text/javascript"> swfobject.embedSWF("open-flash-chart.swf", "my_chart", "350", "200", "9.0.0"); </script> <script type="text/javascript"> function ofc_ready() { alert('ofc_ready'); } function open_flash_chart_data() { alert( 'reading data' ); return JSON.stringify(data); } function findSWF(movieName) { if (navigator.appName.indexOf("Microsoft")!= -1) { return window[movieName]; } else { return document[movieName]; } } var data = <?php echo $chart->toPrettyString(); ?>; </script> </head> <body> <p>Hello World</p> <div id="my_chart"></div> </body> </html>
7,具体数据的格式到底如何定义,以及调整样式的配置等,参考文档即可。当然了,json的产生也是有工具类库可以快速搞定的。图形的展示效果还是蛮不错的。
上一篇: 如何使用wpa_supplicant从命令行配置Linux无线
下一篇: shell学习笔记