open flash chart

本文详细介绍了如何利用OpenFlashChart程序为Webdisk项目实现流量统计功能,包括数据处理方式、网页代码实现及数据文件格式。通过提供实例代码和数据文件,展示了OpenFlashChart的强大功能和灵活性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

最近一个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. }
{
 
    "title":{
 
        "text":  "上传下载统计报表",
 
        "style": "{font-size: 20px; color:#000000; font-family: Verdana; text-align: center;}"
 
    },
 
    "y_legend":{
 
        "text": "Upload And Download",
 
        "style": "{color: #736AFF; font-size: 12px;}"
 
    },

    "elements":[
    {
 
        "type":      "bar",
 
        "alpha":     0.6,
 
        "colour":    "#4BB2C5",
 
        "text":      "上传",
 
        "font-size": 10,
 
        "values" :   [9,6,7,9,5,7,6,9,7,10,13,15]
 
    },
    {
 
        "type":      "bar",
 
        "alpha":     0.6,
 
        "colour":    "#CC9933",
 
        "text":      "下载",
 
        "font-size": 10,
 
        "values" :   [6,7,9,5,7,6,9,7,3,13,12,16]
 
    }
 
    ],
 
    "x_axis":{

        "stroke":       2,
 
        "tick_height":  10,
 
        "colour":"#999999",
 
        "grid_colour":"#00ff00",
 
        "labels": {
            "labels": ["January","February","March","April","May","June","July","August","Spetember","October","November","December"]
        }

    },
 
    "y_axis":{
 
        "stroke":      2,
 
        "tick_length": 3,
 
        "colour":      "#999999",
 
        "grid_colour": "#00ff00",
 
        "offset":      0,
 
        "max":         20
 
    }
 
}

 

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

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值