Posted on 2010-10-09 18:14
TWaver 阅读(2557)
评论(0) 编辑 收藏
十一长假，不知大家出去玩了没。反正上海的世博会依旧是水泄不通，用朋友的话说是“裤子都挤掉了”，不过不用担心，由于人太多，裤子想掉不下来也不容易，“6000万人次”可不是吹的。避开喧嚣，和朋友去了一趟阳澄湖吃大闸蟹，也发现是人满为患：一个小村庄几乎被蜂拥而至的食客洗劫一空，硝烟散尽，满地虾皮蟹骨，一片狼藉；看着数个足球场大的停车场和满眼的卡宴途锐和Q5，不得不感慨现在有钱人可真多，只是不知道开这些车的有多少是程序员呢？这个世界纷纷扰扰，日本扣了又放了咱的渔船船长，俄罗斯访华后直接登上了北方四岛，中国人终于获得了诺贝尔奖，微软似乎要收购Adobe，Oracle似乎要收购ARM，北京大堵车，海南发大水，Lady Gaga要出新专辑…不管咋说，咱程序员还要耐得住寂寞，踏踏实实的把程序先写好，才能距离开着卡宴、吃着大闸蟹、喝着茅台、洗着小桑拿、住着小别墅、听着Lady Gaga距离更进一步。当然，千万不要酒后驾车，撞到官员或城管肯定不太好吧，就算撞到煤老板或国足球员甚至裁判陆俊也是不大好嘛，我的意思是，你不心疼你开的桑塔纳啊？
最近ERP项目进入冲刺阶段，彻底改善一下“图表中心”模块的界面美观性已经成了当务之急，老大要求节前必须完成！先看看以前的图表中心界面：
这个图表界面的问题是不够美观，灰色调让人感觉很沉闷；数据的呈现也不够精细和直观，本来有很好的数据却不能用很吸引人的方式呈现出来，非常可惜。另外，这个界面方案使用了Layout布局，固定的行、列，当图表矩阵数量多了后，每个图表都被挤的很小，看上去非常难受。
再看看改进后的：
美观性改善自然不必多说，操作上也丰富了不少。以前的方案使用了Layout布局，固定的行、列，当图表多了后，每个图表都被挤的很小，看上去非常难受；而新的方案使用了固定行列大小以及翻页的方式，点击右下角的箭头可以动画翻页，这样就可以支持无限多的图表矩阵了。此外，鼠标双击每个图表的标题，也可以最大化/恢复每个图表单元格，以便观察图表细节。还可以鼠标直接在每个chart上面用滚轮滚动来进行任意矢量缩放。
主要操作罗列如下：
- 双击每个chart标题文字，可以最大化/恢复相应chart；
- 点击右下角箭头进行图表矩阵动画翻页；
- 鼠标滚轮滚动每个chart，可以矢量无级缩放，双击后复位；
- 鼠标拖拽每个chart内容，可以进行平移，双击后复位；
- 支持鼠标点击、移动等动作；
其中有几个复杂一点的图表需要说明一下。例如这个美国地图的图，其中的地图来自一个xml定义的shape格式文件，其中携带了每个州的数据。当鼠标在地图上滑过，可以动态的显示出每个州的数据大小，例如客户信息、销售额等，这对一个ERP管理软件来说，无疑是非常直观和具有实用价值的：
另外，这个饼图的渐变填充也使用了Swing的一些圆心渐变方法，增强了美观性：
实际的实现也很简单，用Java2D的渐变填充即可实现：
1
//fill pie.
2 float centerY = (float) drawBound.getCenterY();
3 Point2D from = new Point2D.Float(0, centerY - radius);
4 Point2D end = new Point2D.Float(0, centerY + radius * 1.5f);
5
float[] dist = 
{0.0f, 0.5f, 1.0f};
6 Color[] colors = {color.darker().darker(), color, Color.white};
7 LinearGradientPaint paint = new LinearGradientPaint(from, end, dist, colors);
8 g2d.setColor(color);
9 g2d.draw(shape);
10 g2d.setPaint(paint);
11 g2d.fill(shape);
12
好了，由于没什么高深莫测的技术和技巧，老规矩，有代码共享，直接为大家上代码和可执行文件。我花了十一假期一天时间把项目中的代码剥离了出来，去掉了所有业务部分，仅仅留下chart的组织和实现部分分享大家，仅供参考和相互交流之目的，请勿直接用于其他商业用途。解压附件，直接双击run.bat即可执行。别忘记使用JDK 6。
代码和可执行文件下载点击这里