龙盟编程博客 | 无障碍搜索 | 云盘搜索神器
快速搜索
主页 > 软件开发 > JAVA开发 >

构建可扩展的Java图表组件[组图]

时间:2009-12-23 15:42来源:未知 作者:admin 点击:
分享到:
前言 Java语言所具有的面向对象特性,使许多复杂的问题可以分解成相对独立的对象来处理。本文用面向对象的方法,将一个图表组件从分解到如何组合,以及如何进行扩展作了具体的

  前言
  
  Java语言所具有的面向对象特性,使许多复杂的问题可以分解成相对独立的对象来处理。本文用面向对象的方法,将一个图表组件从分解到如何组合,以及如何进行扩展作了具体的讲解。从简单的折线图到稍复杂的多种外形组合的图表,读者可以学到构建一个可扩展的图表组件是多么的轻易。
  
  常见的图表类型
  
  图表具有很直观的视觉效果,可以方便的用来比较数据的差异、图案和趋势等。
  
  从外观上来看,常用到的图表主要有散点图、(折)曲线图、柱状图等。本文主要讨论这几种图形样式。其中这每种图又可以与其它的类型组合产生更多的形式。下面以图例来说明:
  
  先来看散点图:
  
  
  图1-1
  
  图1-1是一个典型的散点图,它是由一组X值和一组Y值在二维坐标中两两成对描绘而成。一般这种图形反映两组数据的相关性。例如,要考查钢的硬度与淬火温度的关系,假设上图的横轴表示淬火的温度,纵轴表示同时测出的钢的硬度,这时我们可从上图看出一个趋势,即淬火的温度越高,钢的硬度越大。
  
  再来看一个折线图:
  
  
  图1-2
  图1-3
  在图1-2的折线图中,假设横轴表示周一到周日,纵轴表示某商场的日销售额。我们可以看出其临近周末的销售额呈急剧上升趋势,到周日开始回落,而最惨淡的是周四。通常折线图也可以表示成柱状图的形式,如图1-3。
  
  复杂一点的图形
  
  
  图1-4
  图1-5
  图1-6
  上图三个图形的数据都是同样的,但它们所能够直观表达的意思又不尽相同。诸如此类的图表,形式多种多样,但它们都是由这几种基本图表组合而成的。
  
  接下来的一节,我们来看一下组成图表的基本元素有哪些。
  图表的主要元素
  
  图表的组成
  
  从前面的例子中我们可以看出,每种图表都是由横坐标轴,纵坐标轴,还有不同的绘图外形组成。为了更轻易理解,大家看一下下面的分解图:
  
  

  上图2-1 下图2-2
  
  是一个柱状图和折线图的组合图表,我们将它分解之后(图2-2),可以清楚的看到,它是由图表区、坐标轴、网格线、图表外形等组成:
  
  图表区(Chart):包含所有其它的图表元素。
  
  坐标轴(Axis):提供绘图外形的坐标参考。一个图表中通常有一个垂直和一个水平坐标轴。而网格线是以坐标轴的刻度为参考,贯穿整个绘图区。网格线同坐标轴一样也可分为水平和垂直网格线。
  
  图表外形(Plot):也是以坐标轴为参考,按一定的比例将数据按相应外形绘制出来。
  
  所以,从根本上来说,一个图表的是由三种基本的可视元素组成的:图表区,坐标轴,图表外形。 实现基本图表元素
  
  基本图表元素的特征
  
  我们已经知道了图表的主要组成元素,现在再来看看这些元素有哪些特征。
  
  还是来看一个图:
  
  

  图2-3
  
  从图上我们可以看出,一个位于屏幕坐标系中的图表具有宽度(Wc)和高度(Hc)以及坐标位置(x,y)。图表中的坐标轴也有高度Ha、宽度Wa及坐标位置(x,y)。同样,图表外形也有相应的高度Hp和宽度Wp和坐标位置。
  
  一个图表通常拥有一个横坐标轴和纵坐标轴。所有的绘图数据的坐标都要转化成适当的屏幕坐标,于是我们需要一个新的元素:比例尺。比例尺应负责完成实际坐标值到屏幕坐标值以及屏幕坐标值到实际坐标值的相互转化。而坐标轴是用来描绘刻度用的,它应与比例尺成对使用。
  
  一个图表还可以有多个图表外形(如图1-6和图2-1),并且我们可以往图表里面增加或移除外形。一个图表外形应可以表示至少一组以上的数据(如图1-5)。由于图表外形要在图表上描绘数据,它需要有一个东西来记录数据,我们将它称之为数据序列。 基本图表元素的设计实现
  
  我们的目标是用程序来实现一个图表。前面的讨论我们已经知道构成图表的基本的元素和它们的特性了。由此我们可以为这几个图表元素设计几个接口类。在设计之前,要首先说明一下,我们不打算实现类似于商业化图表组件的强大交互功能,我们所有的设计,只是为了能阐明问题。
  
  图表元素接口(ChartWidget)
  
  因为所有的图表可视元素都有一些共同的属性:位置,宽度和高度,它们还要负责绘制自己本身。所以我们设计一个ChartWidget接口,其它所有可视元素都要继续于这个接口。这个接口的类图如图2-4:
  
  

  
精彩图集

赞助商链接