`
hybxiaodao
  • 浏览: 244751 次
  • 性别: Icon_minigender_1
  • 来自: 福州
社区版块
存档分类
最新评论

OFCGWT 入门实例

OFCGWT 
阅读更多

Web 开发中，主要使用下面两个文件，

  • open-flash-chart.swf: Flash 文件接口，通过该文件来生成 Flash 文件，备页面调用(在 web 目录下，与 WEB-INF 目录并级)。
  • swfobject.js: Flash 文件依赖的 JS 文件(在 web 目录下，与 WEB-INF 目录并级)。

首先在页面中编写 script 脚本,保存页面为 chart.html

<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>
 

编写 JSON 数据

其次，编写图表的 JSON 文本，将该文本保存为 data.json, 放在与 chart.html 同一个目录下。

 

{
  "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": ["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
  }
}
 

OFC图表展示

在浏览器地址栏输入URL，比如：http://localhost:8080/chart/chart.html?ofc=data.json , 就可以看到的图表效果。

 

 

分享到：
| HTTP 401.5 - 未经授权 ：ISAPI/CGI 应用 ...
评论
发表评论

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

相关推荐

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