Web 开发中,主要使用下面两个文件,
首先在页面中编写 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 , 就可以看到的图表效果。