本文来自http://blog.csdn.net/hellogv/
![](https://p-blog.csdn.net/images/p_blog_csdn_net/hellogv/EntryImages/20081215/%E9%A5%BC%E5%9B%BE.gif)
本文源代码下载地址: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直接画省好多功夫。
![](https://p-blog.csdn.net/images/p_blog_csdn_net/hellogv/EntryImages/20081215/%E9%A5%BC%E5%9B%BE.gif)
本文源代码下载地址: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加入以下代码:
- /**
- * lcdui的图像转换为lwuit的图像
- */
- static Image lcdui2lwuit(javax.microedition.lcdui.Image lcdui_img)
- {
- //新建RGB数组
- int[] bufferArray = new int[lcdui_img.getWidth() * lcdui_img.getHeight()];
- //把lcdui的Image保存为RGB数组
- lcdui_img.getRGB(bufferArray, 0, lcdui_img.getWidth(), 0, 0, lcdui_img.getWidth(), lcdui_img.getHeight());
- //********透明背景,可以省略*******************************************//
- for(int i=0;i<bufferArray.length;i++){
- if((bufferArray[i] & 0x00FFFFFF) == 0x00FFFFFF)//如果是背景
- bufferArray[i]=bufferArray[i]&0x00FFFFFF;
- }
- //********透明背景,可以省略*******************************************//
- //新建lwuit的Image,并读取RGB数组
- Image result = Image.createImage(bufferArray, lcdui_img.getWidth(), lcdui_img.getHeight());
- return result;
- }
- /**
- * RGB颜色转换为int
- */
- static int RGBtoInt(int r,int g,int b)
- {
- String result=Integer.toHexString(r)+Integer.toHexString(g)+Integer.toHexString(b);
- return Integer.parseInt(result,16);
- }
- 其次,编写PieChartDemo的代码,代码有详细的注释,非常好理解:
- /*
- * LWUIT + ChartComponent,实现多种图表
- * 作者:张国威(咪当俺系噜噜)
- * 本例实现的是“饼图”
- */
- package com.sun.lwuit.uidemo;
- import com.sun.lwuit.Button;
- import com.sun.lwuit.Command;
- import com.sun.lwuit.Font;
- import com.sun.lwuit.Form;
- import com.sun.lwuit.Image;
- import com.sun.lwuit.Label;
- import com.sun.lwuit.events.ActionEvent;
- import com.sun.lwuit.events.ActionListener;
- import com.sun.lwuit.layouts.FlowLayout;
- import org.beanizer.j2me.charts.ChartItem;
- import org.beanizer.j2me.charts.PieChart;
- public class PieChartDemo implements ActionListener {
- public Form form = new Form("VBarChartDemo");
- private Command backCommand = new Command("Back", 1);
- final PieChart pieChart= new PieChart("");
- PieChartDemo()
- {
- //饼图说明
- String chart_str[]={"█ A:你好吗","█ B:早上好","█ C:中午好","█ D:晚上好","█ E:吃宵夜","█ F:睡懒觉"};
- //饼图颜色
- int [][]color={{0,0,200},{0,200,0},{50,15,30},{100,0,200},{0,200,100},{200,100,200}};
- //饼图范围
- int []percent={15,10,5,20,34,16};
- //绘制柱体的说明
- initChartInfo(chart_str,color);
- int width=form.getWidth();
- int height=form.getHeight()-60;
- Image img_hbarChart=drawPieChart(pieChart,width,height,"",color,percent);//绘制柱体图
- Button button = new Button(img_hbarChart);
- button.getStyle().setBgTransparency(1);//透明背景,会非常消耗资源,速度减慢,注意使用
- button.setBorderPainted(false);
- form.addComponent(button);
- form.addCommand(backCommand);
- form.setCommandListener(this);
- form.setLayout(new FlowLayout());//必须使用这种排列,FlowLayout最适合
- }
- private void initChartInfo(String []chart_str,int [][]color)
- {
- for(int i=0;i<chart_str.length;i++)//循环
- {
- Label chart_info = new Label(chart_str[i]);
- chart_info.getStyle().setFgColor(UIDemoMIDlet.RGBtoInt(color[i][0],color[i][1],color[i][2]));
- form.addComponent(chart_info);
- }
- }
- private Image drawPieChart(ChartItem item,
- int width,
- int height,
- String imagefile,
- int [][]color,//柱体颜色
- int []percent)//柱体长度(百分比)
- {
- item.setFont(Font.FACE_PROPORTIONAL,Font.STYLE_PLAIN,Font.SIZE_SMALL);
- item.setDrawAxis(true);
- item.setPreferredSize(width-80,width-80);//设置chart控件的大小,饼图必须width=height
- if(imagefile.length()>0)//需要使用背景时
- {
- try{
- javax.microedition.lcdui.Image img=javax.microedition.lcdui.Image.createImage(imagefile);//读取背景图
- item.setBackgroundImage(img);//设置背景图
- } catch(Exception ex){ex.printStackTrace();}
- }
- item.showShadow(true);//使用阴影特效
- item.setShadowColor(20,20,20);//设置阴影颜色
- item.setColor(40, 40, 200);
- item.resetData();
- for(int i=0;i<color.length;i++)//循环绘画柱体
- {
- item.addElement(String.valueOf((char)('a'+i)),percent[i],color[i][0],color[i][1],color[i][2]);
- }
- item.setMaxValue(100);//柱体代表数值的显示范围,100%
- //这个是lcdui的Image
- javax.microedition.lcdui.Image lcdui_img=
- javax.microedition.lcdui.Image.createImage(width,height);//饼图大小,图像>控件
- //这个是lcdui的Graphics
- javax.microedition.lcdui.Graphics lcdui_g= lcdui_img.getGraphics();
- pieChart.drawPie(lcdui_g,
- 40,//x
- 40,//y
- width-100,//宽
- width-100);//长,这里设置的大小必须比width,height小,才能完全显示
- return UIDemoMIDlet.lcdui2lwuit(lcdui_img);
- }
- public void actionPerformed(ActionEvent arg0) {
- if(arg0.getCommand()==backCommand)
- {
- UIDemoMIDlet.backToMainMenu();
- }
- }
- }