一、下载
open-flash-chart
包,需要用的有根目录下:
open-flash-chart.swf
;
js
目录下:
swfobject.js
二、jofc2
针对
java
后台开发生成图形的包
三、Jsp
页面引用
var
url=
"testOFC.do?op=bar"
;
//
多参数合在一起了
.
将
&
换为
%26.
swfobject.embedSWF(
"open-flash-chart.swf"
,
"aaa"
,
"500"
,
"350"
,
"10.0.0"
,
"expressInstall.swf"
,
{
"data-file"
:url
}
,
{
wmode:
"transparent"
}
);
url
可以实现调用
action
,返回
json
数据,通过
response
返回
{
"data-file"
:url
}
数据正确后,自动加载图形
把此
javascript
的方法通过
onload=
加载出来
四、各种图形的生成
饼图:
PieChart
pie =
new
PieChart();
pie.setFontSize(15);//
设置字体
pie.addSlice(1000,
"
苹果
"
);//
分类
pie.addSlice(3000,
"
橙子
"
);
pie.addSlice(2000,
"
香蕉
"
);
pie.addSlice(500,
"
西瓜
"
);
pie.addSlice(1500,
"
蜜桃
"
);
pie.setStartAngle(100);//
设置角度
pie.setAnimate(
true
);
//
设置颜色
pie.setColours(
new
String[] {
"0x336699"
,
"0x88AACC"
,
"0x999933"
,
"0x666699"
,
"0xCC9933"
,
"0x006666"
,
"0x3399FF"
,
"0x993300"
,
"0xAAAA77"
,
"0x666666"
,
"0xFFCC66"
,
"0x6699CC"
,
"0x663366"
,
"0x9999CC"
,
"0xAAAAAA"
,
"0x669999"
,
"0xBBBB55"
,
"0xCC6600"
,
"0x9999FF"
,
"0x0066CC"
,
"0x99CCCC"
,
"0x999999"
,
"0xFFCC00"
,
"0x009999"
,
"0x99CC33"
,
"0xFF9900"
,
"0x999966"
,
"0x66CCCC"
,
"0x339966"
,
"0xCCCC33"
});
pie.setTooltip(
"#val# / #total#<br>
占百分之
#percen
t#");//
鼠标移动上去后提示内容
pie.setRadius(20);
Chart flashChart =
new
Chart(
"
库存量
"
,
"font-size:0px;color:#ff0000;"
);
//
整个图的标题
flashChart.addElements(pie);
//
把饼图加入到图表
json = flashChart.toString();//
转成
json
格式
response.setContentType(
"application/json-rpc;charset=utf-8"
);
response.setHeader(
"Cache-Control"
,
"no-cache"
);
response.setHeader(
"Expires"
,
"0"
);
response.setHeader(
"Pragma"
,
"No-cache"
);
response.getWriter().print(json);//
写到客户端
条状码
:
BarChart
chart =
new
BarChart(BarChart.Style.
GLASS
);
//
设置条状图样式
//FilledBarChart
chart = new FilledBarChart("red","blue");//
设置条状图样式
String sMax =
"10000"
;
long
max = 1000;
// //Y
轴最大值
Map<String,Long> map =
new
HashMap<String,Long>();
map.put(
"
一月份
"
,
new
Long(1000));
map.put(
"
二月份
"
,
new
Long(2000));
map.put(
"
三月份
"
,
new
Long(5000));
map.put(
"
四月份
"
,
new
Long(7000));
map.put(
"
五月份
"
,
new
Long(500));
XAxis x =
new
XAxis();
// X
轴
for
(String key:map.keySet()){
x.addLabels(key);
// x
轴的文字
Bar bar =
new
Bar(map.get(key),
"
吨
"
);
bar.setColour(
"0x336699"
);
//
颜色
bar.setTooltip(1000 +
"
吨
"
);
//
鼠标移动上去后的提示
chart.addBars(bar);
//
条标题,显示在
x
轴上
}
Chart flashChart =
new
Chart();
flashChart.addElements(chart); //
把柱图加入到图表
YAxis y =
new
YAxis();
//y
轴
y.setMax(max+10.0);
//y
轴最大值
y.setSteps(max/10*1.0);
//
步进
flashChart.setYAxis(y);
flashChart.setXAxis(x);
json = flashChart.toString();
常见问题:
按格式写好了,却一直提示
swfobject
未定义,是
swfobject.js
文件的问题,官方的
1.9.7
版本的
swf
才
64K
,且
js
也有问题,建议使用高版本的。本来自己公司另一个项目是可以用,我按一样的格式写过来,用自己下的包却一直出不来,后来把包换成了另外一个项目的
swf
和
js
就一切正常了,如果一直出不来,多数是
js
和
swf
文件的问题,请使用2.x的包,
jofc2
里的包一般没问题。
完全是本人遇到的问题,如果有写错的地方,欢迎指出!另外jofc2里的doc没注释,连英文注释都没,想查看其他图形的使用的时候,看文档晕了。。。。。
暂时只用了饼图和柱状图,多数都是看网上的资料自己试验的,其他图形还要研究,感觉如果有份详细的文档,对于自己写其他图形应该会快很多。
想看效果的,到open-flash-chart主页,比较起来比jfreechart效果好
http://teethgrinder.co.uk/open-flash-chart/
期间还看了一点fusionchart的,发现效果更牛B,可惜的是只有收费版的效果很眩,free版效果还不如open-flash-chart,但是相比较fusionchart的资料更多而且看起来也更简单。