B/S下曲线的画法 - 王朝网络

引言

图是一种直观、形象、易于理解的表示方法。人们看一些图的大概轮廓就可以了解事物的一般情况了。图的应用生活中可以说无处不在，比如交通图、股市图、地图等各种各样的图，给人一目了然的感觉。现在人们越来越多的使用互联网。人们学会了通过网络了解世界。信息化的发展使人们能够不出门而知天下事。比如其中的股市。现在人们只要通过网站就可以进行操作了。而实现这些的重要一步就是数据库的使用及其数据分析图形的画法。人们现在就可以通过浏览器轻松的查看当前的股市走势，其中就会碰到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．目录图：

二曲线图的实现步骤

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就会显示如下的图。

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

curvePic.jsp源代码

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

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

<html>

<body>

String xValue="";

String yValue="";

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

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

try

{

Connection conn= DriverManager.getConnection(url);

Statement stmt=conn.createStatement();

String query="select * from display_data where num=1";

ResultSet rs=stmt.executeQuery(query);

while(rs.next())

{

xValue=rs.getString("xdata");

yValue=rs.getString("ydata");

}

} catch (SQLException e)

{

} finally {

//释放对象内存空间

if (stmt != null)

{

stmt.close();

stmt = null;

}

String xStr="时间(T)";

</APPLET>

</body>

</html>在浏览器中输入http://localhost:8080/curve/Jsp/curvePic.jsp就可以显示图形。在上面的实现中在jsp文件中直接写了代码。可以使用bean等其他更好的方法实现。可以使用MVC模式分离代码。本文只是简单的演示。

综述，现在有些图形的开发可以通过别人的包来简化开发。比如免费的有功能强大JFreeChart包。它还提供了其他图形的画法比如甘特图，饼图等等。

我们在自己开发时也可以输出jpeg格式的图，或在图上画线等。在一般包无法满足需要时就可以通过上面的基本画法结合相关编程实现自己的需求。