SVG 与 XML 商业图表实务（3）

look_w

绘制图像我将分阶段逐步完成整个图像。
版本 1：绘制收盘价路径第一个版本中仅仅绘制收盘价路径，这样可以看出 data.xml 文件中的两支股票在 31 天中的走势。 显示了第一个版本的代码。
清单 6. graph.php 的第一个版本

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57

<?php require_once( 'svg.php' ); require_once( 'data.php' ); class GraphTransform extends Transform {   public function __construct( $ox, $oy, $width,     $height, $low, $high, $days )   {     $this->ox = $ox;     $this->oy = $oy;     $this->xscale = $width / ( $days - 1 );     $this->yscale = $height / ( $high - $low );     $this->yoffset = $low;   } } $d = new Data(); $d->parseXML( 'data.xml' ); $ystart = (int)$d->low - 2; $yend = (int)$d->high + 2; $gt = new GraphTransform( 20, 90, 80, 80,   $ystart, $yend, count( $d->traces[0]->days ) ); header( "Content-type: text/xml" ); echo( "<?xml version=\"1.0\" standalone=\"no\"?>\n" ); ?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/SVG/DTD/svg10.dtd"> <svg style="shape-rendering:geometricPrecision;"   viewBox="0 0 100 100" xml:space="preserve"   xmlns:xlink="http://www.w3.org/1999/xlink"   xmlns="http://www.w3.org/2000/svg"   preserveAspectRatio="xMidYMid meet"> <style type="text/css"> .close { fill-opacity: 0; stroke-opacity:0.8; stroke-width: 0.4; } </style> <?php foreach( $d->traces as $trace ) {   $closePath = $trace->closePath( $gt );   $closeSVG = $closePath->toSVG();   $color = "#ff0000"; ?>    <path fill-rule="nonzero"    d="<?php echo( $closeSVG ); ?>" class="close"    fill="<?php echo( $color ); ?>"    stroke="<?php echo( $color ); ?>"    /> <?php } ?> </svg>

文件的一开始创建了 ITransform 接口的一个版本，它把美元值沿着 Y 轴、当日价格沿着 X 轴转化成 SVG 的点。然后在文件的后面，使用 foreach 迭代器遍历数据中的轨迹列表。对于每个轨迹，使用 SVG Path ($closeSVG) 获得收盘价，并将该值使用 toSVG() 方法转化成 SVG 绘图命令。然后创建一个 SVG <path> 标记，并使用 PHP echo 命令写入绘图命令以及 fill 和 color 值。
浏览引用该图像的 .html 文件时得到了如  所示的结果。
图 3. 第一个版本看起来不怎么样，但它是正确的，这仅仅是开始。
版本 2：撑起收盘线下一步要用稍微亮一点的图形撑起收盘线，它表示当日的最高价和最低价。这样可以让客户了解股票价格的变化。
为此修改了 PHP 绘图文件，如  所示。
清单 7. graph.php 的第二个版本

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

<style type="text/css"> .close { fill-opacity: 0; stroke-opacity:0.8; stroke-width: 0.4; } .hilo { fill-opacity: 0.2; stroke-opacity:0.8; stroke-width: 0.1; } </style> <?php $colors = array( '#ff0000','#0000ff','#00ff00' ); $c = 0; foreach( $d->traces as $trace ) {   $closePath = $trace->closePath( $gt );   $closeSVG = $closePath->toSVG();   $hiloPath = $trace->hiloPath( $gt );   $hiloSVG = $hiloPath->toSVG();   $color = $colors[$c];   $c += 1; ?>    <path fill-rule="nonzero"    d="<?php echo( $hiloSVG ); ?>" class="hilo"    fill="<?php echo( $color ); ?>"    stroke="<?php echo( $color ); ?>"    />    <path fill-rule="nonzero"    d="<?php echo( $closeSVG ); ?>" class="close"    fill="<?php echo( $color ); ?>"    stroke="<?php echo( $color ); ?>"    /> <?php } ?>

与原来的收盘线基本类似，只不过使用了 hiloPath。然后我使用 close 类创建了另一条路径。要注意 SVG 如何运用了将级联样式表（CSS）类应用于不同图形对象的思想。可以在类级别或者实例级别设置笔触、透明度、填充以及其他任何图形样式，如果需要甚至可以使用脚本随时改变。
显示了修改后的版本。
图 4. 显示了最低价和最高价的图像现在可以看到股价的变动了。如果仔细观察图像的开始部分，会看到最低价和最高价图形的交叠，就是说透过红色的踪迹仍然能看到蓝色的踪迹。