LWUIT + ChartComponent 之一实现饼图(PieChart)

本文来自http://blog.youkuaiyun.com/hellogv/


    本文源代码下载地址：http://download.youkuaiyun.com/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. }