您的位置：主页 > 编程专区 > Php > open-flash-chart2系列教程(1)-使用json数据文件

open-flash-chart2系列教程(1)-使用json数据文件

2010-01-30    文章来源：互联网    浏览次数：910

最近一个Webdisk项目需要统计流量数据，于是就找了几个开源免费的chart程序来研究，PHP/SWF Charts 和 FusionCharts Free，不过最终还是选择了Open Flash Char，官方提供了很多实例，而做Webdisk流量统计并不需要多么花哨的东西，OFC2的功能也已经足够强大了。
2.0的版本数据格式完全用json来处理，非常灵活，官方提供了各种接口程序，包括PHP/PHP5、Pear、Python、Java、Dotnet，调用很简单，网页代码（chart.html）如下

chart.html
  1. <html>
  2. <head>
  3. </head>
  4. <body>
  5. <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
  6. codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"
  7. width="800"
  8. height="450" id="graph-2" align="middle">
  9. <param name="allowScriptAccess" value="sameDomain" />
  10. <param name="movie" value="open-flash-chart.swf" />
  11. <param name="quality" value="high" />
  12. <embed src="open-flash-chart.swf" quality="high" bgcolor="#FFFFFF" width="500" height="450" name="open-flash-chart" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
  13. </object>
  14. </body>
  15. </html>

数据文件格式（data.json.txt）如下：

data.json.txt
  1. {
  2.  
  3.     "title":{
  4.  
  5.         "text":  "上传下载统计报表",
  6.  
  7.         "style": "{font-size: 20px; color:#000000; font-family: Verdana; text-align: center;}"
  8.  
  9.     },
  10.  
  11.     "y_legend":{
  12.  
  13.         "text": "Upload And Download",
  14.  
  15.         "style": "{color: #736AFF; font-size: 12px;}"
  16.  
  17.     },
  18.  
  19.     "elements":[
  20.     {
  21.  
  22.         "type":      "bar",
  23.  
  24.         "alpha":     0.6,
  25.  
  26.         "colour":    "#4BB2C5",
  27.  
  28.         "text":      "上传",
  29.  
  30.         "font-size": 10,
  31.  
  32.         "values" :   [9,6,7,9,5,7,6,9,7,10,13,15]
  33.  
  34.     },
  35.     {
  36.  
  37.         "type":      "bar",
  38.  
  39.         "alpha":     0.6,
  40.  
  41.         "colour":    "#CC9933",
  42.  
  43.         "text":      "下载",
  44.  
  45.         "font-size": 10,
  46.  
  47.         "values" :   [6,7,9,5,7,6,9,7,3,13,12,16]
  48.  
  49.     }
  50.  
  51.     ],
  52.  
  53.     "x_axis":{
  54.  
  55.         "stroke":       2,
  56.  
  57.         "tick_height":  10,
  58.  
  59.         "colour":"#999999",
  60.  
  61.         "grid_colour":"#00ff00",
  62.  
  63.         "labels": {
  64.             "labels": ["January","February","March","April","May","June","July","August","Spetember","October","November","December"]
  65.         }
  66.  
  67.     },
  68.  
  69.     "y_axis":{
  70.  
  71.         "stroke":      2,
  72.  
  73.         "tick_length": 3,
  74.  
  75.         "colour":      "#999999",
  76.  
  77.         "grid_colour": "#00ff00",
  78.  
  79.         "offset":      0,
  80.  
  81.         "max":         20
  82.  
  83.     }
  84.  
  85. }

地址栏输入：http://localhost/open-flash-chart/chart.html?ofc=data.json.txt即可

  • 上一篇：javascript js 判断页面是否加载完成
  • 下一篇：没有了

    • 文章评论(查看全部)

    验证码: 中评 好评 差评