计算 X 坐标和 Y 坐标
X 坐标：X 坐标是某一个点距离原点的水平距离。计算元素的数量，然后将 X 坐标轴的跨度分成 n 个区段，其中，n 是给定集合中的元素的数量，通过这种方式，可以计算某一集合中的所有点的横向坐标。用这种分割方法可以获得每个区段的长度。集合中的第一个点位于等于区段长度的第一段距离内。后续的每个点则位于区段长度加上原点到前一个点的距离的那一段距离内。
例如，给出一个集合 {10,20,30,40}，您立刻就可以知道要绘制 4 个点，因为集合中包含 4 个元素。所以，应该将 X 坐标轴的跨度分成 4 个相等的区段，每个区段的长度 = 跨度/4。因此，如果 X 坐标轴的跨度是 800，那么区段的长度将是 800/4，即 200。第一个元素（10）的 X 坐标将是 200，第二个元素（20）的 X 坐标将是 400，依此类推。
清单 2. 计算 X 坐标
private int[] getXCoordinates(ArrayList seriesData){
int xSpan = (int)GraFixConstants.xSpan;
int longestSeries = Utilities.getLongestSeries(seriesData);
int numSegments =
((double[])seriesData.get(longestSeries)).length;
int sectionWidth =
(int)xSpan / numSegments; //want to divide span of xAxis
int xPositions[] =
new int[numSegments]; // will contain X-coordinate of all dots.
for(int i=0; i＜numSegments; i++){
xPositions[i]=
(i+1)*sectionWidth;//dots spaced at distance of sectionWidth
}
return xPositions;
}
Y 坐标：Y 坐标是某一个点距离原点的纵向距离。计算 Y 坐标要将某一个值按比例从一个范围缩放到另一个范围。例如，给出相同的集合 {10,20,30,40}，您可以看出，数据的范围是 0 到 40，新的范围就是 Y 坐标轴的跨度（高度）。假设 Y 坐标轴的高度为 400，那么第一个元素（10）的高度将是100，第二个元素的高度将是 200，依此类推。
通过以下例子，您可以更好地理解如何按比例将一个值从一个范围缩放到另一个范围：假定一个范围的跨度是从 0 到 2048，而您打算将该范围内的任意值（比如说 1024）缩放到另一个从 0 到 100 的范围内，那么您立刻就可以知道，等刻度值是 50。该缩放所遵循的三值线算法是：
line 1---＞ 2048 / 1024 equals 2.
line 2---＞ 100 - 0 equals 100.
line 3---＞ 100 / 2 equals 50, which is the desired scaled value.
步骤 3：您想在哪儿进行绘图？
您还需要进行绘图的地方。可以通过扩展 Eclipse ViewPart 和使用 SWT Composite 来创建您自己的视图。此外，也可以使用从 main() 函数中调用的 SWT shell。
在扩展 Eclipse ViewPart 时，至少必须实现两个函数：createPartControl(Composite parent) 和 setFocus()。函数 createPartControl(Composite parent) 是在屏幕上绘制视图时自动调用的。您的兴趣只在所接收的 SWT Composite 上。因此，将它传递给某个类，然后通过对这个类进行编码来绘制图形。
清单 3. 使用 Eclipse ViewPart 绘图
public class MainGraFixView extends ViewPart{
public void createPartControl(Composite parent) {
//create or get data in an arraylist
ArrayList seriesData = dataGenerator();
//instantiate a plotter, and provide data to it.
DirectedGraphXYPlotter dgXYGraph = new DirectedGraphXYPlotter(parent);
dgXYGraph.setData(seriesData);
dgXYGraph.plot(); //ask it to plot
}
public void setFocus() {
}
}
步骤 4；您需要绘制哪种图形？
一旦拥有了数据以及想用来绘制图形的区域，就必须确定您需要哪种类型的可视化。在本文中，我演示了如何编写代码来创建 X-Y 坐标图和线形图。一旦知道了绘制 X-Y 坐标图的技术，就应该能够绘制出其他图形，比如条形图和饼图。要想更多地了解 X-Y 坐标图，请参阅我为本文编写的 DirectedGraphXYPlotter 类（参见所附源代码中的 \src\GraFix\Plotters\DirectedGraphXYPlotter.java）。
步骤 5：创建自己的 X-Y 坐标图
X-Y 坐标图应该能够绘制出 2-D 飞机上的任意数量的级数线。每个级数线都应该以图形形式显示出引用 X 和 Y 引用线的那些级数中的每个点的位置。每个点都应该通过一条线连接到级数中的下一个点上。通过使用表示一个点和一条线的 Draw2D 图形，您应该能够创建这样一个坐标图。例如，为了表示一个点，我通过扩展 Ellipse 图形创建了一个 Dot 图形，并使用 PolylineConnection 图形来表示连接线。
DirectedGraphXYPlotter 类只有两个公共函数：setData(ArrayList seriesData) 和 plot()。函数 setData(ArrayList seriesData) 接受您想要以图形形式形象化的数据（参见步骤 1），而 plot() 函数则开始绘图。
一旦调用了 plot() 函数，就必须依次采用以下步骤：
1. 采用一个 SWT Composite，并将 FigureCanvas 放在它之上。然后，将一个类似 Panel 的通用容器图放在画布上。
2. 计算将要绘制的级数的数量，然后填充创建 DirectedGraphs 所需数量的 NodeLists 和 EdgeLists。
3. 在 Panel 图上绘制 X 坐标轴和 Y 坐标轴。（参见所附源代码中 \src\GraFix\Figure 目录下的 XRulerBar.java 和 YRulerBar.java。）
4. 创建和级数一样多的 DirectedGraphs，以便进行绘图。
5. 在 Panel 图上绘制点和连接线，同时采用步骤 d 中创建的 DirectedGraphs 中的图形数据。
6. 最后，通过提供 Panel 图来设置画布的内容，其中包括到目前为止您已经准备好的所有的点和连接线。
在以下代码中：
* 第 6-11 行代码对应于上述的步骤 a。
* 第 14 行，即函数 populateNodesAndEdges()，对应于上述的步骤 b。
* 第 16 行，即函数 drawAxis()，对应于上述的步骤 c。
* 第 17 行、第 18 行和第 19 行对应于上述的步骤 d 和步骤 e。
* 第 20 行对应于上述的步骤 f。
清单 4. plot() 函数
1. public void plot(){
2. //if no place to plot, or no data to plot, return.
3. if(null==_parent || null==_seriesData)
4. return;
5.
6. Composite composite = new Composite(_parent, SWT.BORDER);
7. composite.setLayout(new FillLayout());
8. FigureCanvas canvas = new FigureCanvas(composite);
9.
10. Panel contents = new Panel();//A Panel is a general purpose container figure
11. contents.setLayoutManager(new XYLayout());
12. initializeSpan(contents.getClientArea());
13.
14. populateNodesAndEdges();
15.
16. drawAxis(contents);
17. for(int i=0; i＜_numSeries; i++){
18. drawDotsAndConnections(contents,getDirectedGraph(i)); //
draw points & connecting wires
19. }
20. canvas.setContents(contents);
21. }
plot() 调用了两个重要内部函数来帮助绘制图形中的点：populateNodesAndEdges() 和 drawDotsAndConnections()。在您发现这两个函数到底完成什么功能之前，让我们来看一下 DirectedGraph。
DirectedGraph 是什么？为了使用 Draw2D 进行绘图，事实上您必须先创建一个图形，定义将要绘制的点和线。一旦创建好这个图形，就可以使用它实际在画布上进行绘图。您可以将 DirectedGraph 形象化为拥有有限数量的 Node 的一个 2-D 图形，在该图形中，每个 Node 都位于一些 Point 上，相邻的 Node 是通过 Edges 连接在一起的。
您可以通过以下代码行来了解创建 DirectedGraph 的关键所在。首先，创建一个 Node 列表和一个 Edges 列表。然后，创建一个新的 DirectedGraph，并通过刚才创建的 NodeList 和 EdgeList 设置其成员（Nodes 和 Edges）。现在，使用 GraphVisitor 来访问这个 DirectedGraph。为了简便起见，包 org.eclipse.draw2d.internal.graph 中有许多 GraphVisitor 实现，这些 GraphVisitor 有一些用来访问图形的特定算法。
因此，创建 DirectedGraph 的示例代码类似于下面这样：
清单 5. 示例 DirectedGraph
//This is a sample, you will need to add actual Node(s) to this NodeList.
NodeList nodes = new NodeList(); //create a list of nodes.
//This is a sample, you will need to add actual Edge(s) to this EdgeList.
EdgeList edges = new EdgeList(); //create a list of edges.
DirectedGraph graph = new DirectedGraph();
graph.nodes = nodes;
graph.edges = edges;
new BreakCycles().visit(graph);//ask BreakCycles to visit the graph.
//now our "graph" is ready to be used.
