LWUIT + ChartComponent 之一實現餅圖(PieChart)

本文來自http://blog.csdn.net/hellogv/

    本文原始碼：http://download.csdn.net/source/872671
    本文所用的Chart組件為J2me ChartComponent - ver 1.5.2，該組件的下載頁面為http://www.beanizer.org/site/index.php/en/Software/J2me-ChartComponent-ver-1.5.html。按照官網所說，ChartComponent的二進位開發包可以用於個人開發以及商業項目，而原始碼則需要購買，為了支援作者開發，最好是購買一份啦。
ChartComponent，基於J2ME的LCDUI，而本文要示範的是，如何把ChartComponent運用到LWUIT之上，其他LCDUI的控制項也可以參照這個方法，從而運作在LWUIT上。
    在LWUIT上實現Chart功能，可以利用LWUIT固有的組件，混合使用，效果挺好的，例如加入chart的每個圖塊說明(說明與圖塊顏色對應)時，可以用FlowLayout相片順序+Label控制項，能夠自適應，比用UI直接畫省好多功夫。

• 首先，先在主檔案UIDemoMIDlet加入以下代碼：

1.     /**
2.      * lcdui的映像轉換為lwuit的映像
3.      */
4.     static Image lcdui2lwuit(javax.microedition.lcdui.Image lcdui_img)
5.     {
6.         //建立RGB數組
7.         int[] bufferArray = new int[lcdui_img.getWidth() * lcdui_img.getHeight()];
8.         //把lcdui的Image儲存為RGB數組
9.         lcdui_img.getRGB(bufferArray, 0, lcdui_img.getWidth(), 0, 0, lcdui_img.getWidth(), lcdui_img.getHeight());
10.         //********透明背景，可以省略*******************************************//
11.         for(int i=0;i<bufferArray.length;i++){
12.             if((bufferArray[i] & 0x00FFFFFF) == 0x00FFFFFF)//如果是背景
13.                 bufferArray[i]=bufferArray[i]&0x00FFFFFF;
14.         }
15.         //********透明背景，可以省略*******************************************//
16.         //建立lwuit的Image，並讀取RGB數組
17.         Image result = Image.createImage(bufferArray, lcdui_img.getWidth(), lcdui_img.getHeight());
18.         return result;
19.     }
20.     /**
21.      * RGB色彩轉換為int
22.     */
23.     static int RGBtoInt(int r,int g,int b)
24.     {
25.         String result=Integer.toHexString(r)+Integer.toHexString(g)+Integer.toHexString(b);
26.         return Integer.parseInt(result,16);
27.     }

• 其次，編寫PieChartDemo的代碼，代碼有詳細的注釋，非常好理解：

1. /*
2.  * LWUIT + ChartComponent，實現多種圖表
3.  * 作者：張國威(咪當俺系嚕嚕)
4.  * 本例實現的是“餅圖”
5.  */
6. package com.sun.lwuit.uidemo;
8. import com.sun.lwuit.Button;
9. import com.sun.lwuit.Command;
10. import com.sun.lwuit.Font;
11. import com.sun.lwuit.Form;
12. import com.sun.lwuit.Image;
13. import com.sun.lwuit.Label;
14. import com.sun.lwuit.events.ActionEvent;
15. import com.sun.lwuit.events.ActionListener;
16. import com.sun.lwuit.layouts.FlowLayout;
17. import org.beanizer.j2me.charts.ChartItem;
18. import org.beanizer.j2me.charts.PieChart;
21. public class PieChartDemo implements ActionListener {
22.     public Form form = new Form("VBarChartDemo");
23.     private  Command backCommand = new Command("Back", 1);
24.     final PieChart pieChart= new PieChart("");
25.     PieChartDemo()
26.     {
27.         //餅圖說明
28.         String chart_str[]={"█ A:你好嗎","█ B:早上好","█ C:中午好","█ D:晚上好","█ E:吃宵夜","█ F:睡懶覺"};
29.         //餅圖顏色
30.         int [][]color={{0,0,200},{0,200,0},{50,15,30},{100,0,200},{0,200,100},{200,100,200}};
31.         //餅圖範圍
32.         int []percent={15,10,5,20,34,16};
34.         //繪製柱體的說明
35.         initChartInfo(chart_str,color);
37.         int width=form.getWidth();
38.         int height=form.getHeight()-60;
39.         Image img_hbarChart=drawPieChart(pieChart,width,height,"",color,percent);//繪製柱體圖
41.         Button button = new Button(img_hbarChart);
42.         button.getStyle().setBgTransparency(1);//透明背景，會非常消耗資源，速度減慢，注意使用
43.         button.setBorderPainted(false);
44.         form.addComponent(button);
45.         form.addCommand(backCommand);
46.         form.setCommandListener(this);
47.         form.setLayout(new FlowLayout());//必須使用這種排列，FlowLayout最適合
48.     }
49.     private void initChartInfo(String []chart_str,int [][]color)
50.     {
51.         for(int i=0;i<chart_str.length;i++)//迴圈
52.         {
53.             Label chart_info = new Label(chart_str[i]);
54.             chart_info.getStyle().setFgColor(UIDemoMIDlet.RGBtoInt(color[i][0],color[i][1],color[i][2]));
55.             form.addComponent(chart_info);
56.         }
57.     }
58.     private Image drawPieChart(ChartItem item,
59.             int width,
60.             int height,
61.             String imagefile,
62.             int [][]color,//柱體顏色
63.             int []percent)//柱體長度(百分比)
64.     {
66.         item.setFont(Font.FACE_PROPORTIONAL,Font.STYLE_PLAIN,Font.SIZE_SMALL);
67.         item.setDrawAxis(true);
68.         item.setPreferredSize(width-80,width-80);//設定chart控制項的大小,餅圖必須width=height
69.        
70.         if(imagefile.length()>0)//需要使用背景時
71.         {
72.             try{
73.                 javax.microedition.lcdui.Image img=javax.microedition.lcdui.Image.createImage(imagefile);//讀取背景圖
74.                 item.setBackgroundImage(img);//設定背景圖
75.             } catch(Exception ex){ex.printStackTrace();}
76.         }
77.         item.showShadow(true);//使用陰影特效
78.         item.setShadowColor(20,20,20);//設定陰影顏色
79.         item.setColor(40, 40, 200);
80.         item.resetData();
81.         for(int i=0;i<color.length;i++)//迴圈繪畫柱體
82.         {
83.             item.addElement(String.valueOf((char)('a'+i)),percent[i],color[i][0],color[i][1],color[i][2]);
84.         }
85.     
86.         item.setMaxValue(100);//柱體代表數值的顯示範圍,100%
88.         //這個是lcdui的Image
89.         javax.microedition.lcdui.Image lcdui_img=
90.                 javax.microedition.lcdui.Image.createImage(width,height);//餅圖大小,映像>控制項
91.         //這個是lcdui的Graphics
92.         javax.microedition.lcdui.Graphics lcdui_g= lcdui_img.getGraphics();
94.         pieChart.drawPie(lcdui_g,
95.                 40,//x
96.                 40,//y
97.                 width-100,//寬
98.                 width-100);//長，這裡設定的大小必須比width，height小，才能完全顯示
100.         return UIDemoMIDlet.lcdui2lwuit(lcdui_img);
101.     }
102.     public void actionPerformed(ActionEvent arg0) {
103.         if(arg0.getCommand()==backCommand)
104.         {
105.             UIDemoMIDlet.backToMainMenu();
106.         }
107.     }
108. }