B/S下曲线的画法-中间件-zhiding-软件频道-至顶网

扫一扫
分享文章到微信
扫一扫
关注官方公众号
至顶头条

图是一种直观、形象、易于理解的表示方法。人们看一些图的大概轮廓就可以了解事物的一般情况了。本文结合流行的Java编程语言，使用Tomcat容器作为servlet服务器。

来源：CSDN 2008年02月26日

引言

图是一种直观、形象、易于理解的表示方法。人们看一些图的大概轮廓就可以了解事物的一般情况了。图的应用生活中可以说无处不在，比如交通图、股市图、地图等各种各样的图，给人一目了然的感觉。现在人们越来越多的使用互联网。人们学会了通过网络了解世界。信息化的发展使人们能够不出门而知天下事。比如其中的股市。现在人们只要通过网站就可以进行操作了。而实现这些的重要一步就是数据库的使用及其数据分析图形的画法。人们现在就可以通过浏览器轻松的查看当前的股市走势，其中就会碰到B/S下曲线图画法的问题。而现在有关与股市图B/S下画法的确不是太多。现在网上想搜索一个关于B/S下曲线的画法的文章实在是难找。经常看见人询问关于这方面的内容，而没有下文的。本文基于以前的经验和前人在网上的一些文章（有的现在找不到了），写一篇关于B/S下曲线画法的详细文档。希望对大家有用。

本文按照开发步骤来一步步的进行演示。本文叙述的开发环境为Windows 2000 Advanced Server, Jdk1.5.0,Tomcat4.1.18, MySQL4.1.12及其驱动。

一开发环境配置

1．Java开发环境

安装Jdk软件后（提供Sun的下载地址）后配置C:\AUTOEXEC.BAT文件:

添加（假设安装目录为D:\jdk1.5.0）

set PATH=%PATH%

set PATH=D:\jdk1.5.0\bin;

set JAVA_HOME=D:\jdk1.5.0

set CLASSPATH=D:\jdk1.5.0\bin;D:\jdk1.5.0\lib\dt.jar;D:\jdk1.5.0\lib\tools.jar

保存后重启计算机

运行”开始”->“运行”->”cmd”->输入”javac” 出现相关信息则表明成功.

2．Tomcat配置

安装Tomcat（提供下载地址）成功后同时设置C:\AUTOEXEC.BAT文件

添加(假如安装目录为D:\Tomcat):

set TOMCAT_HOME=D:\Tomcat

保存后重启计算机

打开Tomcat目录->打开bin目录->运行startup.bat文件后看Tomcat是否正常启动?如果正常打开浏览器输入”http://localhost:8080/”.看是否出现相关网页.出现表明成功

在建立一个文件夹存放源文件D:\curve,并新建一个测试HMTL文件名称为index.html，供底下测试使用。

打开D:\Tomcat\conf目录下打开server.xml

保存后

打开Tomcat目录->打开bin目录->运行startup.bat文件后看Tomcat是否正常启动?

同时可以打开“http://localhost:8080/curve/index.html”看是否可以显示网页.可以则表明配置成功.

3．MySQL的JDBC连接配置（数据库驱动程序）

实际企业应用时可采用连接池配置，配置麻烦点，本文为了方便实现使用JDBC驱动。

测试源代码(comjdbc.jsp)：

<%@ page contentType="text/html;charset=gb2312"%>

<%@ page import="java.sql.*"%>

<html>

<body>

//MySQL的连接驱动装载

Class.forName("com.mysql.jdbc.Driver").newInstance();

//提供网络数据库的位置和端口号，后面跟可选的参数。

String url ="jdbc:mysql://localhost/curveshow?user=root&password=123456&useUnicode=true&characterEncoding=GB2312";

//Connection接口通过指定数据库位置，登录名和密码连接数据库。

Connection conn= DriverManager.getConnection(url);

/* Statement具有各种方法（API），如executeQuery，execute等可以返回查询的结果集。结果集是一个ResultSet对象。 */

Statement stmt=conn.createStatement();

//SQL查询语句。

String query="select * from display_data";

//结果集是一个ResultSet对象。

ResultSet rs=stmt.executeQuery(query);

while(rs.next())

{

String s=rs.getString("xdata");

out.print(s+"<br>");

}

</body>

</html>

4．目录图：

B/S下曲线的画法

二曲线图的实现步骤

1．建立Html文件

curvePic.html源代码：

<html>

</APPLET>

</html>

2．Html中Applet调用的源代码

curvePic.java源代码：

import java.awt.*;

import java.applet.*;

import java.awt.event.*;

import java.util.*;

import java.lang.*;

public class curvePic extends Applet {

static int LEN;

static int Xo,Yo;

static int X2,Y2;

final int X1=50,Y1=30;

int Yunit,Xunit;

float Unit;

String Xstr,Ystr;

String Xstring;

int[] Xval;

int[] Yval;

float[] Y=new float[5];

int[] X=new int[8];

float[] temp=new float[1];

int Xmax,Xmin;

float Ymax,Ymin;

int[] Yvalue;

int[] Xvalue;

int xpar=0;

public void init() {

}

public void start() {

int width=this.getBounds().width;

int height=this.getBounds().height;

setSize(width,height);

Xstr=getParameter("xValue");

Ystr=getParameter("yValue");

Xstring=getParameter("xStr");

Xval=Substr(Xstr);

Yval=Substr(Ystr);

LEN=Xval.length;

Yvalue=new int[LEN];

Xvalue=new int[LEN];

Xo=50;

Yo=height-30;

X2=width-30;

Y2=Yo;

Yunit=(height-100)/4;

Ymax=getMaxVal(Yval);

Ymin=0;

Xmax=getMaxVal(Xval);

Xmin=0;

if(Ymax==Ymin){

Ymin=0;

}

if(Xmax==Xmin){

Xmin=0;

}

float tempy=((float)Ymax-(float)Ymin)/4;

Y[0]=0;

Y[1]=(Ymin+tempy)/100;

Y[2]=(Ymin+tempy*2)/100;

Y[3]=(Ymin+tempy*3)/100;

Y[4]=(Ymax)/100;

xpar=(int)(Xmax/100)+1;

Xunit=(width-100)/xpar;

float Xtempy=0;

X[0]=0;

int xi;

for(xi=1;xi<=xpar;xi++){

X[xi]=xi;

if(xi==xpar){

Xtempy=100;

}

Yvalue=getY(Yunit,tempy,Ymin,Yval);

Xvalue=getX(Xunit,Xtempy,Xmin,Xval,width,xpar);

}

public static int[] getY(int unit,float diff,float ymin,int[] value){

int I=0;

int[] result=new int[LEN];

for(I=0;I<LEN;I++)

result[I]=(int)(Yo-((4*unit)/(diff*4))*(value[I]-ymin));

return result;

}

public static int[] getX(int unit,float diff,float xmin,int[] value,int wideth,int xaxis){

int I=0;

int[] result=new int[LEN];

for(I=0;I<LEN;I++)

result[I]=(int)(X2-((unit)/(diff))*(value[I]));

return result;

}

public void paint(Graphics g){

java.text.DecimalFormat df1 = new java.text.DecimalFormat("##0");

g.setColor(Color.red);

g.drawLine(Xo,Yo,X1,Y1);

int I;

for(I=0;I<5;I++){

g.drawLine(Xo-5,Yo-Yunit*I,Xo,Yo-Yunit*I);

g.drawString( df1.format(Y[I]),Xo-38,Yo-Yunit*I);

}

g.drawLine(X1,Y1,X1-5,Y1+5);

g.drawLine(X1,Y1,X1+5,Y1+5);

g.drawLine(Xo,Yo,X2,Y2);

for(I=0;I<=xpar;I++){

g.drawLine(Xo+Xunit*I,Yo,Xo+Xunit*I,Yo+5);

g.drawString(Integer.toString(X[I]),Xo+Xunit*I-6,Yo+20);

}

g.drawLine(X2,Y2,X2-5,Y2-5);

g.drawLine(X2,Y2,X2-5,Y2+5);

g.setColor(Color.blue);

g.drawString("Öµ(value)",X1-50,Y1);

g.drawString(Xstring,X2-20,Y2+20);

for(I=0;I<LEN;I++){

if(Ymax==0){

g.drawLine(Xo,Yo,Xo+Xunit*xpar,Yo);

}

else if(I==LEN-1){

g.drawLine(X2+50-Xvalue[0],Yvalue[0],X2+50-Xvalue[I],Yvalue[I]);

}

else{

g.drawLine(X2+50-Xvalue[I],Yvalue[I],X2+50-Xvalue[I+1],Yvalue[I+1]);

}

public static int[] Substr(String str){

int I=0;

StringTokenizer st = new StringTokenizer(str,";");

int len=st.countTokens();

int[] val=new int[len];

while(st.hasMoreTokens()){

float midtemp=Float.parseFloat(st.nextToken())*100;

val[I]=Math.round(midtemp);

I++;

}

return val;

}

public static int getMaxVal(int[] Maxval){

int I,result;

result=Maxval[0];

for(I=0;I<Maxval.length;I++){

if(result<Maxval[I])

result=Maxval[I];

}

return result;

}

public static int getMinVal(int[] Minval){

int I,result;

result=Minval[0];

for(I=0;I<Minval.length;I++){

if(result>Minval[I])

result=Minval[I];

}

return result;

}

Applet解释：

方法	描述
void init()	系统装载时Applet调用，仅调用一次。然后才调用start() 和 paint() 方法。有构造器的意思，同时可以用于执行一些初始化的操作。
void start()	Applet在init()后调用此方法，使Applet页可见。.
void stop()	Applet 调用此方法停止其执行，Applet页不见时也调用此方法。
void destroy()	此方法通知释放资源，在此前先调用Stop() 方法。
Void paint(Graphics g)	Applets通常在这个方法下画图。

屏幕坐标系：

Java坐标系是一个二维网格，它可以标识屏幕上每一个点的坐标位置。坐标单位用象素来度量。一个象素是一台显示器的最小分辨单位。坐标系有一个x坐标（水平坐标）和一个y坐标（垂直坐标）组成。在缺省状态下原点为屏幕左上角坐标（0，0），因此，x坐标是从左向右移动的水平距离，y坐标是从上向下移动的垂直距离。

编译curve.java文件生成curve.class文件。

在浏览器输入http://localhost:8080/curve/Jsp/curveEx.jsp地址打开后启动Applet就会显示如下的图。

B/S下曲线的画法

在实际应用中，数据往往是从数据库读取的。大型的往往是Oracle数据库，我们使用MySQL作为示例比较容易实现，不同数据库实现的原理相同。下面我们看看在MySQL下的实现：首先要建立一个数据库（schema）名curveshow，然后建表（table）display_data，建两个字段（field）分别为xdata,ydata类型(type)为文本(text)。存入测试数据就可以用上文给的comjdbc.jsp进行连接测试了。下面给出一个完整的有数据库连接的源代码实例。为了实现需要添加数据库字段num类型为整型。