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 文本,将该文本保存为 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 } }
在浏览器地址栏输入URL,比如:http://localhost:8080/chart/chart.html?ofc=data.json , 就可以看到的图表效果。