Posted on 2010-10-09 18:14
TWaver 閱讀(2570)
評論(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。
代碼和可執行文件下載點擊這里