Posted on 2010-10-09 18:14
TWaver 閱讀(2572)
評論(0) 編輯 收藏
十一長假，不知大家出去玩了沒。反正上海的世博會(huì)依舊是水泄不通，用朋友的話說是“褲子都擠掉了”，不過不用擔(dān)心，由于人太多，褲子想掉不下來也不容易，“6000萬人次”可不是吹的。避開喧囂，和朋友去了一趟陽澄湖吃大閘蟹，也發(fā)現(xiàn)是人滿為患：一個(gè)小村莊幾乎被蜂擁而至的食客洗劫一空，硝煙散盡，滿地蝦皮蟹骨，一片狼藉；看著數(shù)個(gè)足球場大的停車場和滿眼的卡宴途銳和Q5，不得不感慨現(xiàn)在有錢人可真多，只是不知道開這些車的有多少是程序員呢？這個(gè)世界紛紛擾擾，日本扣了又放了咱的漁船船長，俄羅斯訪華后直接登上了北方四島，中國人終于獲得了諾貝爾獎(jiǎng)，微軟似乎要收購Adobe，Oracle似乎要收購ARM，北京大堵車，海南發(fā)大水，Lady Gaga要出新專輯…不管咋說，咱程序員還要耐得住寂寞，踏踏實(shí)實(shí)的把程序先寫好，才能距離開著卡宴、吃著大閘蟹、喝著茅臺(tái)、洗著小桑拿、住著小別墅、聽著Lady Gaga距離更進(jìn)一步。當(dāng)然，千萬不要酒后駕車，撞到官員或城管肯定不太好吧，就算撞到煤老板或國足球員甚至裁判陸俊也是不大好嘛，我的意思是，你不心疼你開的桑塔納??？
最近ERP項(xiàng)目進(jìn)入沖刺階段，徹底改善一下“圖表中心”模塊的界面美觀性已經(jīng)成了當(dāng)務(wù)之急，老大要求節(jié)前必須完成！先看看以前的圖表中心界面：
這個(gè)圖表界面的問題是不夠美觀，灰色調(diào)讓人感覺很沉悶；數(shù)據(jù)的呈現(xiàn)也不夠精細(xì)和直觀，本來有很好的數(shù)據(jù)卻不能用很吸引人的方式呈現(xiàn)出來，非?？上?。另外，這個(gè)界面方案使用了Layout布局，固定的行、列，當(dāng)圖表矩陣數(shù)量多了后，每個(gè)圖表都被擠的很小，看上去非常難受。
再看看改進(jìn)后的：
美觀性改善自然不必多說，操作上也豐富了不少。以前的方案使用了Layout布局，固定的行、列，當(dāng)圖表多了后，每個(gè)圖表都被擠的很小，看上去非常難受；而新的方案使用了固定行列大小以及翻頁的方式，點(diǎn)擊右下角的箭頭可以動(dòng)畫翻頁，這樣就可以支持無限多的圖表矩陣了。此外，鼠標(biāo)雙擊每個(gè)圖表的標(biāo)題，也可以最大化/恢復(fù)每個(gè)圖表單元格，以便觀察圖表細(xì)節(jié)。還可以鼠標(biāo)直接在每個(gè)chart上面用滾輪滾動(dòng)來進(jìn)行任意矢量縮放。
主要操作羅列如下：
- 雙擊每個(gè)chart標(biāo)題文字，可以最大化/恢復(fù)相應(yīng)chart；
- 點(diǎn)擊右下角箭頭進(jìn)行圖表矩陣動(dòng)畫翻頁；
- 鼠標(biāo)滾輪滾動(dòng)每個(gè)chart，可以矢量無級縮放，雙擊后復(fù)位；
- 鼠標(biāo)拖拽每個(gè)chart內(nèi)容，可以進(jìn)行平移，雙擊后復(fù)位；
- 支持鼠標(biāo)點(diǎn)擊、移動(dòng)等動(dòng)作；
其中有幾個(gè)復(fù)雜一點(diǎn)的圖表需要說明一下。例如這個(gè)美國地圖的圖，其中的地圖來自一個(gè)xml定義的shape格式文件，其中攜帶了每個(gè)州的數(shù)據(jù)。當(dāng)鼠標(biāo)在地圖上滑過，可以動(dòng)態(tài)的顯示出每個(gè)州的數(shù)據(jù)大小，例如客戶信息、銷售額等，這對一個(gè)ERP管理軟件來說，無疑是非常直觀和具有實(shí)用價(jià)值的：
另外，這個(gè)餅圖的漸變填充也使用了Swing的一些圓心漸變方法，增強(qiáng)了美觀性：
實(shí)際的實(shí)現(xiàn)也很簡單，用Java2D的漸變填充即可實(shí)現(xiàn)：
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
好了，由于沒什么高深莫測的技術(shù)和技巧，老規(guī)矩，有代碼共享，直接為大家上代碼和可執(zhí)行文件。我花了十一假期一天時(shí)間把項(xiàng)目中的代碼剝離了出來，去掉了所有業(yè)務(wù)部分，僅僅留下chart的組織和實(shí)現(xiàn)部分分享大家，僅供參考和相互交流之目的，請勿直接用于其他商業(yè)用途。解壓附件，直接雙擊run.bat即可執(zhí)行。別忘記使用JDK 6。
代碼和可執(zhí)行文件下載點(diǎn)擊這里