SVG中国

3 散点图

　　最后介绍的是散点图。这种图形适用于在 X 维和 Y 维上都相差很大的数据。我们采用与前面相同的方法，但是这一次要绘制的数据同时提供 X 和 Y 坐标值。

　　该例中，数据以 (X-value),(Y-value) 的形式传入，比如： [1,1]、[3,5]、[50,2] 和 [10,34]。

　　我同样提供了一个 Java 实例程序以供下载（请参阅 参考资料），请分析下面这些代码。

　　第 31-57 行确定 X 和 Y 的最大值。

　　第 60-61 行计算 X 轴和 Y 轴的比例因子。

　　第 67-119 行绘制坐标轴，这里画了 4 条辅助虚线，并相应地做了标记。

　　第 124-157 行绘制数据：

代码6 计算和绘制散点图

122. // The axis and the guide lines are ready; now draw the data.
123. SVGout.write("\n    <g style=\"fill:none; 
124. stroke:red; stroke-width:3\">");
125.
126. for(i=0;i<dataToPlot.length;i++){
127.                 
128.    // Get the value out of the array.
129.	String value = dataToPlot[i];
130.                
131.	// The data is in the form (X-Value),(Y-Value), so find
132.	// the comma and get the values on either side of it.
133.	index = value.indexOf (',');
134.	String X_Pos = value.substring(0,index);
135.	String Y_Pos = value.substring(index+1);
136.
137.	// Change them to numbers
138.	XValue = Integer.parseInt(X_Pos);
139.	YValue = Integer.parseInt(Y_Pos);
140.
141.	// Calculate the point's position by using the scaling 
142.	// factor calculated earlier
143.	XValue = XValue*XAxisScalingFactor;     
144.	YValue = YValue*YAxisScalingFactor;
145.	YValue = 1000-YValue;
146.
147.	// You now have your point. As it's a scatter plot, it 
148.	// would look nice with an X, so use the point to draw 
149	// a line from the top left to the bottom right, and from
150.	// the top right to the bottom left.
151. 
152.	SVGout.write("\n  <line x1=\""+ (int)(XValue-5) + 
153		"\" y1=\""+(int)(YValue+5)+ "\" x2=\""+(int)(XValue+5)+
154.	"\" y2=\""+(int)(YValue-5)+"\" />"); 
155.	SVGout.write("\n  <line x1=\""+ (int)(XValue+5) + 
156.	"\" y1=\""+(int)(YValue+5)+ "\" x2=\""+(int)(XValue-5)+
157.	"\" y2=\""+(int)(YValue-5)+"\" />");    
158.}

　　首先要定义这一组的样式（第 123 行）。

　　然后开始处理数据，第 129 行获得了数据。

　　根据逗号分隔 X 和 Y 值（第 133-135 行），并将这些值转化成数值（第 138-139 行）。

　　计算点的位置（第 143 - 145 行）。

　　现在可以画点了，但是这一次不是简单地画一个点，而是要用 X 来标记。也就是说要画两条线，一条从左上角到右下角，一条从右上角到左下角，偏移量都是 5 个像素，从而得到以计算点为中心的 X。

下载并运行这个例子。

4 进一步改进

　　为了简化和保持代码的可读性，我在上述例子中使用了最少的 Java 代码生成 SVG。当然，您还可以改进这些例子，增加新的颜色、效果和信息。例子中包含两个柱状图生成器，一个像前面所述的那样绘制简单的矩形（参见 图 3）。另一个稍微复杂一点，使用斜线和点填充图形，但计算条形的方法不变，如图 6 所示。

　　图 7 是一个线图，显示了测试的数据库中的一些信息，添加了一个徽标、阴影效果和测试的统计表。


 
　　图 8 是一个散点图，测试过程中我希望比较从数据库中删除一条记录所用的时间，一组数据使用 JDBC 执行这项操作，另一组则使用准备好的语句执行该操作。两组数据都提供了徽标、阴影效果和状态表。


 
　　这些图的完整SVG版本包含在示例文件中，http://download.boulder.ibm.com/ibmdl/pub/software/dw/library/x-svggrph_examples.zip

5 结束语

　　本文通过例子说明了如何根据数据缩放 SVG 图形。通过这些技术和提供的示例代码，您可以呈现自己的图形，并根据需要定制图形。

(THE END)