构建可扩展的Java图表组件

2016-02-19 15:58 3 1 收藏

生活已是百般艰难,为何不努力一点。下面图老师就给大家分享构建可扩展的Java图表组件,希望可以让热爱学习的朋友们体会到设计的小小的乐趣。

【 tulaoshi.com - 编程语言 】


  前言
  
  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:
  
  

来源:http://www.tulaoshi.com/n/20160219/1610806.html

延伸阅读
标签: Web开发
XAP     XAP是一个开源基于XML的声明式Ajax框架。该框架的核心是一个可扩展的插件体系,它的目的是集成现有的Ajax项目如:Apache Kabuki,Dojo和其它Ajax开源果如:Eclipse openAjax。     http://www.nexaweb.com/open/xap/index.aspx?id=384
Ajax(即异步 JavaScript 和 XML)是一种 Web 应用程序开发的手段,它采用客户端脚本与 Web 服务器交换数据。所以,不必采用会中断交互的完整页面刷新,就可以动态地更新 Web 页面。使用 Ajax,可以创建更加丰富、更加动态的 Web 应用程序用户界面,其即时性与可用性甚至能够接近本机桌面应用程序。 Ajax 不是一项技术,而更像是一个 模式 —...
标签: Web开发
原文在这里 文章日期:2006-9-2 代码在这里 Q:unknown {content: ''}Q:unknown {content: ''}.ygrid-cell-text {PADDING-RIGHT: 5px; DISPLAY: block; PADDING-LEFT: 5px; PADDING-BOTTOM: 3px; FONT: 8pt arial; OVERFLOW: hidden; PADDING-TOP: 3px; WHITE-SPACE: nowrap}.ygrid-col {DISPLAY: block; OVERFLOW: hidden; BORDER-LEFT: #f...
标签: Web开发
在 Web 应用程序开发中,页面重载循环是最大的一个使用障碍,对于 Java? 开发人员来说也是一个严峻的挑战。在这个系列中,作者 Philip McCarthy 介绍了一种创建动态应用程序体验的开创性方式。 Ajax(异步 JavaScript 和 XML)是一种编程技术,它允许为基于 Java 的 Web 应用程序把 Java 技术、XML 和 JavaScript 组合起来,从而打破页面...
标签: Web开发
原文地址 文章日期:2006/9/26 新版的GIRD可以支持远程数据了。分页和远程排序的设置是通俗易懂的,另外一些常用的自定义的参数我会在这篇贴子中说明一下。新论坛的界面(在建设中)就是一个分页和远程排序的好例子,而本文的代码均来自那个例子。 新方法和属性 利用LoadableDatatModel对象(XMLDataModel和JSONDataModel的父类)实现分...

经验教程

285

收藏

19
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部