LWUIT + ChartComponent实现折线表

 

 

本例原作者:张国威(咪当俺系噜噜)(LWUIT + ChartComponent,实现多种图表)
 

原作者实例讲解了如何使用ChartCopinent,很经典的源码。在实际应用中发现需要做些修改。

主要修改实现如下几点功能:

1.x轴与y轴数据动态传入

2.y轴的起点和终点动态传入,目的是保证图表在显示时可以根据传入的数据不同进行自适应的改变,防止出现由于传入的数据差距较小,就直接变成直线,导致看不出变化

3由于纵轴的范围是根据数据最大值和最小值确定的,这样就保证了数据在该范围内显示变化

4.原代码事例中由于使用for(int i=0;i<color.length;i++)画的图,导致折线图数据个数显示固定,

5测试代码可以直接在medlet中生成一个实例,调用show方法(代码继承了form)

image该效果的背景是通过resource文件产生的

package com.grain.uti;

import java.util.Vector;

import javax.microedition.lcdui.Ticker;

import com.grain.pagelwuit.MareketDetailForm;
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.LineChart;


public class LineChartForm extends Form implements ActionListener {
//public Form form = new Form("LineChartDemo");
private Command backCommand = new Command("返回", 1);
final LineChart lineChart = new LineChart("");
private Form parent;
/**
*
* @param chart_str 柱体说明
* @param color 柱体颜色
* @param percent 柱体长度
* @param xData 横坐标数据
*/


public LineChartForm(String title,String chart_str[], Vector yData, Vector xData,int yMax,int yMin,Form parent)
{ this.parent=parent;
this.setTitle(title);
int yDa[]=new int[yData.size()];
for(int i=0;i<yData.size();i++){
yDa[i]=Integer.parseInt(yData.elementAt(i).toString());
}
String xDa[]=new String [xData.size()];
xData.copyInto(xDa);
//绘制柱体的说明
int [][]color2={{0,0,200},{0,200,0},{200,0,0},{200,0,200},{0,200,200},{200,100,200},{200,0,200},{0,200,200}};
initChartInfo(chart_str,color2);

lineChart.setFill(true);//填充区域

int width=getWidth()-20;
int height=getHeight()*2/3;
Image img_hbarChart=drawLineChart(lineChart,width,height,"",yDa,xDa, yMax, yMin);//绘制线性图

Button button = new Button(img_hbarChart);
//Label l=new Label(img_hbarChart);
// addComponent(l);
//button.getStyle().setBgTransparency(1);//透明背景,会非常消耗资源,速度减慢,注意使用
// button.setBorderPainted(false);
addComponent(button);
addCommand(backCommand);
addCommandListener(this);
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().setBgTransparency(100);
chart_info.getStyle().setFgColor(ChartUti.RGBtoInt(color[i][0],color[i][1],color[i][2]));
addComponent(chart_info);
}
}
/**
* @param color 柱体颜色
* @param range 纵坐标范围
* @param yMax 纵坐标最大值
* @param yMin 纵坐标最小值
* @param xData 横坐标数据
*/
private Image drawLineChart(ChartItem item, int width,int height,String imagefile, int []percent,String xData[],int yMax,int yMin)//柱体长度(百分比)

{
lineChart.setMaxValue(yMax+5);
lineChart.setMinValue(yMin-5);
int range=yMax-yMin+10;
item.setFont(Font.FACE_PROPORTIONAL,Font.STYLE_PLAIN,Font.SIZE_SMALL);
item.setDrawAxis(true);
item.setPreferredSize(width-50,height);//设置chart控件的大小
item.setMargins(15,5,15,5);
for(int i=0;i<xData.length;i++)//循环绘画柱体
{//String.valueOf((char)('a'+1+i))
int a=i%6;
if(a==0){///////////if else 是为了使得相邻的折线柱形区域颜色不同
item.addElement(xData[i],percent[i],0,200,0);
}else if(a==1){
item.addElement(xData[i],percent[i],0,0,200);
}
else if(a==2){
item.addElement(xData[i],percent[i],100,200,0);
}else if(a==3){
item.addElement(xData[i],percent[i],200,200,0);
}else if(a==4){
item.addElement(xData[i],percent[i],0,100,200);
}else if(a==5){
item.addElement(xData[i],percent[i],200,0,200);
}
}

item.setMaxValue(range);//柱体代表数值的显示范围,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();
lineChart.setMargins(0, 25, 0, 25);
lineChart.drawChart(lcdui_g,width-10,height-20);//这里设置的大小必须比width,height小,才能完全显示

return ChartUti.lcdui2lwuit(lcdui_img);

}
public void actionPerformed(ActionEvent ae) {
if(ae.getCommand()==backCommand)
{
//UIDemoMIDlet.backToMainMenu();
parent.show();
}

}
}

(学习交流)

你可能感兴趣的:(职场,+,休闲,LWUIT)