《构建可扩展的Java图表组件.doc》由会员分享，可在线阅读，更多相关《构建可扩展的Java图表组件.doc（17页珍藏版）》请在金锄头文库上搜索。
1、构建可扩展的Java图表组件前言Java语言所具有的面向对象特性，使许多复杂的问题可以分解成相对独立的对象来处理。本文用面向对象的方法，将一个图表组件从分解到如何组合，以及如何进行扩展作了详细的讲解。从简单的折线图到稍复杂的多种形状组合的图表，读者可以学到构建一个可扩展的图表组件是多么的容易。常见的图表类型图表具有很直观的视觉效果，可以方便的用来比较数据的差异、图案和趋势等。从外观上来看，常用到的图表主要有散点图、（折）曲线图、柱状图等。本文主要讨论这几种图形样式。其中这每种图又可以与其它的类型组合产生更多的形式。下面以图例来说明：先来看散点图：图1-1图1-1是一个典型的散点图，它是由一组X
2、值和一组Y值在二维坐标中两两成对描绘而成。一般这种图形反映两组数据的相关性。例如，要考查钢的硬度与淬火温度的关系，假设上图的横轴表示淬火的温度，纵轴表示同时测出的钢的硬度，这时我们可从上图看出一个趋势，即淬火的温度越高，钢的硬度越大。 再来看一个折线图：图1-2图1-3在图1-2的折线图中，假设横轴表示周一到周日，纵轴表示某商场的日销售额。我们可以看出其临近周末的销售额呈急剧上升趋势，到周日开始回落，而最惨淡的是周四。通常折线图也可以表示成柱状图的形式，如图1-3。复杂一点的图形图1-4图1-5图1-6 上图三个图形的数据都是同样的,但它们所能够直观表达的意思又不尽相同。诸如此类的图表，形式多
3、种多样，但它们都是由这几种基本图表组合而成的。接下来的一节，我们来看一下组成图表的基本元素有哪些。图表的主要元素图表的组成从前面的例子中我们可以看出，每种图表都是由横坐标轴，纵坐标轴，还有不同的绘图形状组成。为了更容易理解，大家看一下下面的分解图： 上图2-1 下图2-2是一个柱状图和折线图的组合图表，我们将它分解之后（图2-2），可以清晰的看到，它是由图表区、坐标轴、网格线、图表形状等组成：图表区(Chart)：包含所有其它的图表元素。 坐标轴(Axis)：提供绘图形状的坐标参考。一个图表中通常有一个垂直和一个水平坐标轴。而网格线是以坐标轴的刻度为参考，贯穿整个绘图区。网格线同坐标轴一样也可
4、分为水平和垂直网格线。 图表形状(Plot)：也是以坐标轴为参考，按一定的比例将数据按相应形状绘制出来。所以，从根本上来说，一个图表的是由三种基本的可视元素组成的：图表区，坐标轴，图表形状。实现基本图表元素基本图表元素的特征我们已经知道了图表的主要组成元素，现在再来看看这些元素有哪些特征。还是来看一个图：图2-3从图上我们可以看出，一个位于屏幕坐标系中的图表具有宽度(Wc)和高度(Hc)以及坐标位置(x,y)。图表中的坐标轴也有高度Ha、宽度Wa及坐标位置(x,y)。同样，图表形状也有相应的高度Hp和宽度Wp和坐标位置。一个图表通常拥有一个横坐标轴和纵坐标轴。所有的绘图数据的坐标都要转化成适当
5、的屏幕坐标，于是我们需要一个新的元素：比例尺。比例尺应负责完成实际坐标值到屏幕坐标值以及屏幕坐标值到实际坐标值的相互转化。而坐标轴是用来描绘刻度用的，它应与比例尺成对使用。一个图表还可以有多个图表形状（如图1-6和图2-1），并且我们可以往图表里面增加或移除形状。一个图表形状应可以表示至少一组以上的数据(如图1-5)。由于图表形状要在图表上描绘数据，它需要有一个东西来记录数据，我们将它称之为数据序列。 基本图表元素的设计实现 我们的目标是用程序来实现一个图表。前面的讨论我们已经知道构成图表的基本的元素和它们的特性了。由此我们可以为这几个图表元素设计几个接口类。在设计之前，要首先说明一下，我们不
6、打算实现类似于商业化图表组件的强大交互功能，我们所有的设计，只是为了能阐明问题。图表元素接口(ChartWidget)因为所有的图表可视元素都有一些共同的属性：位置，宽度和高度，它们还要负责绘制自己本身。所以我们设计一个ChartWidget接口，其它所有可视元素都要继承于这个接口。这个接口的类图如图2-4：图2-4由这个类图，我们可以很容易的写出它的代码：public interface ChartWidget public int getX(); public int getY(); public int getWidth(); public int getHeight(); public
7、 void draw(Graphics g); 坐标轴(Axis) 接下来的一个类是坐标轴Axis。坐标轴主要任务是绘制轴及其刻度(Tick)和刻度值，因为它绘制时是按一定的比例绘制的，所以它需要有一个比例尺将实际坐标值转换值成屏幕坐标值。这就引出了Scale这个类。Scale类主要完成实际坐标值到屏幕坐标值以及屏幕坐标值到实际坐标值的相互转化。由此，Axis与Scale是一对相互依赖的类。从设计模式的角度来看，Axis是视图(View)，负责界面绘制，Scale就是它的模型(Model)，负责提供相应的数据。它们的类图见图2-5： 图2-5下面来分别看看Axis类与Scale类的代码： pu
8、blic abstract class Axis implements ChartWidget protected Scale scale; protected int x; protected int y; protected int width; protected int height; protected Axis peerAxis; protected boolean drawGrid; protected Color gridColor; protected Color axisColor; protected int tickLength; protected int tickC
9、ount; public Axis() gridColor = Color.LIGHT_GRAY; axisColor = Color.BLACK; tickLength = 5; drawGrid = false; public int getTickCount() return tickCount; public void setTickCount(int tickCount)this.tickCount=tickCount; public Scale getScale() return scale; public void setScale(Scale scale) this.scale
10、 = scale; public int getX() return x; public void setX(int x)this.x = x; public int getY() return y; public void setY(int y)this.y = y; public int getHeight() return height; public void setHeight(int height)this.height = height; public int getWidth() return width; public void setWidth(int width)this
11、.width = width; public boolean isDrawGrid()return drawGrid; public void setDrawGrid(boolean drawGrid)this.drawGrid=drawGrid; 软件开发网 public Color getAxisColor()return axisColor; public void setAxisColor(Color axisColor) this.axisColor=axisColor; public Color getGridColor()return gridColor; public voi
12、d setGridColor(Color gridColor)this.gridColor=gridColor; public int getTickLength()return tickLength; public void setTickLength(int tickLength)this.tickLength=tickLength; public Axis getPeerAxis()return peerAxis; public void setPeerAxis(Axis peerAxis)this.peerAxis = peerAxis;protected abstract int c
13、alculateTickLabelSize(Graphics g);public abstract class Scale protected double min; protected double max; protected int screenMin; protected int screenMax; public abstract int getScreenCoordinate(double value); public double getActualValue(int value) double vrange = max - min; if(min 0.0 & max 0.0)
14、vrange = (min - max) * -1.0; double i = screenMax - screenMin; i = (double)(value - screenMin) * vrange) / i; i = min; return i; public void setMax(double max)this.max = max; public void setMin(double min)this.min = min; public double getMax()return max; public double getMin()return min; public int getScreenMax()return screenMax; public int getScreenMin()return screenMin; public void setScreenMax(int screenMax)this.screenMax =screenMax; public void setScreenMin(int screenMin)this.screenMin = screenMin;在上面的Axis类代码中，我们在原有的ChartWidget接口的基础上，为Axis添加了几个其它的属性：轴线的颜色axisColor，网格线的颜色
