SVG と XML による実務グラフ作成

SVG 技術を適用して XML データからみごとなビジネス・グラフを作成する

XML、PHP、そして SVG (Scalable Vector Graphics) 標準を使ってビジネス・グラフを作成する方法を学びましょう。SVG標準は、グラフィックスを、無限大のベクトル・スケーラビリティーとビジュアル・効果があり、さらにはスクリプトによる対話性まであるものにしてくれます。

Jack Herrington (jherr@pobox.com), Senior Software Engineer, Leverage Software

Jack D. Herringtonは、20 年以上の経験を持つシニア・ソフトウェア・エンジニアです。彼の著書には、『Code Generation in Action』、『Podcasting Hacks』、『PHP Hacks』の 3 冊があります。また、30 を超える記事も執筆しています。



2006年 7月 18日

素直に認めますが、私はグラフィックスに取りつかれています。子供の頃から、素晴らしいグラフィックスを持つコンピューターには目がありませんでした。そういうわけで、TRS-80コンピューターより Apple II コンピューターの方が好きでした。でも私だけでなく、誰だって質のいいグラフィックスが好きなはずです。Pixarの映画に感動しなかった人がいるでしょうか?「百聞は一見にしかず」という言葉には多くの真実があります。それは、一枚の絵は多くのデータを素早く簡単に伝えるからです。

ビジネス・データで最も重要なのは、グラフ化です。どう見てもこれまでの Webはグラフィックスに関して落ちこぼれであったため、SVG のような標準でグラフィックス・コードを最大限に活用することが重要になります。もちろん、Webでもイメージをページに配置することはできますが、イメージがうまく機能することは非常にまれです。Webのグラフィックスにはズームやパン、そして対話機能がなく、印刷や拡大縮小もうまくいきません。ところがWeb 2.0 では、そんな事情が変わるはずです。技術はもはや重点ではありません。目標となっているのは、グラフィックスを含めたユーザー・エクスペリエンスを提供することです。GoogleFinance のページ (図 1) を例にとりましょう。株価を表示すると、対話式グラフ・コントロールでデータをスクロールして、対象の範囲を見つけることができます。この操作がMacromedia Flash で行われるということは重要でしょうか?もちろん重要ではありません。重要なのは最終結果、つまりカスタマーのエクスペリエンスです。

図 1. Google Finance のページ
Google Finance のページ

この記事では、PHP プログラミング言語で SVG 形式を使って、見映えの良い対話式グラフィックスを作成する方法を実例で説明します。始めに、SVGの背景と、Web のグラフィックス技術との関連から説明していきましょう。

スケーラブル・ベクトル・グラフィックス

SVG 標準とは、ベクトル・グラフィックスを表示するための XML ベースのフォーマットです。基本となるのは線、矩形、形状、イメージ、そしてテキストなどのエレメントです。これらのエレメントはすべて、「ビュー座標」内に指定されます。ビュー座標はピクセルではなく任意の値の範囲で、アプリケーションが認識する方法であればどんな方法でもこの範囲を定義できます。このような方法で、XMLが指定するグラフィック・モデルをグラフィック空間にレンダリングし、サイズとは関係なく適切に拡大縮小することができます。ベクトル・イメージはプリンターの最大解像度で印刷されます。この際、ビットマップを印刷用に拡大するときによく見られるようなギザギザのピクセルが発生することもありません。

この形式では、オブジェクトやオブジェクトのグループにエフェクトを適用することもできます。エフェクトには、ドロップ・シャドウ、ベベル、エンボス、外側グロー、内側グローなどがあります。AdobePhotoShop や PhotoShop Elements を使い慣れていれば、このようなエフェクトがどのようなものかお分かりでしょう。また、回転やスキュー、シアー、クリップなどその他すべての機能も使用できます。

それだけではありません。SVG には、これらのプロパティーをアニメーション化して、グラフィックス・オブジェクトを進路に沿って動かしたり、フェードイン、フェードアウトさせるためのタグもあります。その上、SVGではモデル内に JavaScript コードを追加して、グラフィック・エレメント、エフェクト、そしてアニメーションに動作を伴わせることが可能です。

初めて SVG について読んだとき、私は感動して、すぐに夢中になりました。特に感動したのは、Webページに組み込み可能な 1 つのコントロールとして、Adobe が PhotoShop エンジンを無料で提供してくれるということでした。事実、それは今でも変わりありません。マイナスの面に気づいたのは、SVGはすべてのクライアントにインストールされているわけではなく、インストールするには特定のソフトウェアをダウンロードする必要があるということが分かったときです。カスタマーにはそこまで要求できません。そのため、しばらくはSVG を棚上げにしていましたが、最近知ったことに、Mozilla Firefox V1.5 にはSVG のサブセットがインストールされています。これで、SVG がもっと広まるはずです。

本題に入る前に、話を少し前に戻して Web グラフィックス内での SVG について説明します。


SVG とその世界

数年前までは、Web のグラフィックスを作成する場合の選択肢は限られていました。PHPイメージ・グラフィックスを作成して、.jpeg、.gif、あるいは .png ファイルをビルドするのは簡単です。ただし、こられのファイルはあまり見映えの良いものではありませんでした。PHPのイメージ・ライブラリーは基本的なもので、エフェクトをサポートしていないためです。さらに、グラフィックスの拡大縮小もうまくいきませんでした。

技術は多少進歩して、今ではオプションの数も増えています。もちろん、SVG がオプションとしてあります。一方、Flashもオプションの 1 つです。Flash はキャンバス・オブジェクトと JavaScriptコードを使ってグラフィックスを自由に描画できます。また、サーバーからデータをXML または JSON (JavaScript Serialized Object Notation) として直接読み込んでグラフ化することもできます。

Flash より優位に立つのは、比較的新しい 2 つのオプションです。1 つは AdobeFlex で、この XML マークアップ・ベースの言語は、Flash にレンダリングされてグラフィック・ライブラリーを組み込みます。そのFlex のライバルとなるのは、Laszlo です。Laszlo もタグに効果を発揮しますが、オープン・ソースとしての利点があります。

一方、ブラウザーで <canvas> タグを使うこともできます。この新しいタグはグラフィックス・キャンバスで、このキャンバス上で線や矩形を描画したり、イメージの配置、回転などを行うことができます。絶好の選択肢のように聞こえますが、今のところ、Microsoft®Internet Explorer ではサポートされていません。幸いなことに、Google にはInternet Explorer 内でこれと同じ機能を提供する InternetCanvas というオープン・ソース・プロジェクトがあります。

もう 1 つ、オプションとして見込まれているMicrosoft の WPF (Windows PresentationFoundation) も忘れてはなりません。これはブラウザーに組み込むことができるWindows ユーザー・インターフェースを作成するための XML マークアップを提供します。MicrosoftWindows® 専用かと言うとそのとおりですが、一方で Mac と Windows 両方を対象とした主流ブラウザーすべてにWPF 機能のサブセットを提供する WPF/E も公表が予定されています。

このように、多数のオプションがあるのは確かですが、この記事では SVG を取り上げて、PHPとの組み合わせで株価グラフを作成してみます。


SVG の Hello World

Firefox V1.5 ブラウザーが SVG に対して正しく機能すること、またはご使用のブラウザーにSVG プラグインがインストールされていることを確認するため、皆さんが使える単純な「HelloWorld」スタイルの例を組み立てます。まず、リスト 1 に示す start.html というファイルを作成します。このファイルは.svg ファイルを参照する Web ページです。

リスト 1. Start.html
<html>
<body>
<embed src="start.svg" height="300" width="300" type="image/svg+xml"
 pluginspage="http://www.adobe.com/svg/viewer/install/" 
 style="border: 1px solid black; padding:5px;"/>
</body>
</html>

次に必要なのは、リスト 2 に示す start.svg というファイルです。上記のリストで、.html ファイルの<embed> タグが .svg ファイルを参照していることが分かります。

リスト 2. Start.svg
<?xml version="1.0" standalone="no"?>
<!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">
   <path fill-rule="nonzero"
     style="fill:#000000;stroke:#FF0000;"
     d="M0 0 L100 100 Z"/>
   <path fill-rule="nonzero"
     style="fill:#000000;stroke:#00FF00;"
     d="M50 0 L50 100 Z"/>
   <path fill-rule="nonzero"
     style="fill:#000000;stroke:#FF0000;"
     d="M0 100 L100 0 Z"/>
   <path fill-rule="nonzero"
     style="fill:#000000;stroke:#00FF00;"
     d="M0 50 L100 50 Z"/>
</svg>

上記のファイルをブラウザーで開くと、図 2 のような表示になります。

図 2. テスト .svg ファイル
テスト .svg ファイル

ファイルをもう一度見てみると、4 つのパスを定義していることが分かります。そのうちの2 つは対角を結ぶパスで、緑色の残りの 2 つは中心を通って上端と下端を結ぶパスです。このグラフィックを見ると、ブラウザーは少なくともSVG の小さなサブセットを正しくレンダリングしています。


データを取得する

グラフ化はデータから始まります。この例では、2 つの会社の 31 日間の株価データを使用します。株価の値が含まれるXML の部分をリスト 3 に示します。

リスト 3. data.xml からの抜粋
<stocks>
<stock>
<day high="35.13" low="32" close="33.75" />
<day high="32.25" low="28.75" close="31.75" />
<day high="29" low="28.5" close="28.87" />
<day high="29.25" low="28.75" close="28.75" />
<day high="29.5" low="28.5" close="29.25" />
<day high="30.25" low="29" close="29.25" />
...
</stock>
</stocks>

フォーマットは極めて単純です。<stocks> というルート・タグには、一連の<stock> タグが含まれます。それぞれの <stock> タグには day タグがあり、そのそれぞれがhigh、low、close の属性を持ちます。

次のステップで、このファイルをメモリーに読み込むコードを作成し、SVG を生成するときに使えるようにします。コードの作成には、リスト 4 に示す 3 つの PHP クラスのセットを使用します。

リスト 4. Data.php
<?php
class Day
{
  var $low;
  var $high;
  var $close;

  public function __construct( $low, $high, $close )
  {
    $this->low = $low;
    $this->high = $high;
    $this->close = $close;
  }
}

class Trace
{
  var $days = array();
  var $high = 0.0;
  var $low = 100000.0;

  public function addDay( $low, $high, $close )
  {
    $this->days []= new Day( $low, $high, $close );
    if ( $low < $this->low ) $this->low = $low;
    if ( $high > $this->high ) $this->high = $high;
  }

  public function hiloPath( $trans )
  {
    $p = new Path();
    $d = 0;
    foreach( $this->days as $day )
    {
      $x = $trans->xscale( $d );
      $y = $trans->yscale( $day->low );
      $p->add( $x, $y );
      $d += 1;
    }
    for( $d = (count( $this->days ) - 1); $d >= 0; $d -= 1 )
    {
      $x = $trans->xscale( $d );
      $y = $trans->yscale( $this->days[$d]->high );
      $p->add( $x, $y );
    }
    return $p;
  }

  public function closePath( $trans )
  {
    $p = new Path();
    $d = 0;
    foreach( $this->days as $day )
    {
      $x = $trans->xscale( $d );
      $y = $trans->yscale( $day->close );
      $p->add( $x, $y );
      $d += 1;
    }
    return $p;
  }
}

class Data
{
  var $traces = array();
  var $high = 0;
  var $low = 100000;

  function parseXML( $file )
  {
    $data_dom = new DomDocument();
    $data_dom->load( $file );

    $elStocks = $data_dom->getElementsByTagName( 'stock' );
    foreach( $elStocks as $stock )
    {
      $trace = new Trace();

      $days = $stock->getElementsByTagName( 'day' );
      foreach( $days as $day )
      {
        $trace->addDay( (float)$day->getAttribute('low'),
          (float)$day->getAttribute('high'),
          (float)$day->getAttribute('close') );
      }
    
      $this->traces []= $trace;

      if ( $trace->high > $this->high ) $this->high = $trace->high;
      if ( $trace->low < $this->low ) $this->low = $trace->low;
    }
  }
}
?>

Data クラスには、ファイル内のすべてのデータのセットが含まれます。それぞれの株価は、Traceオブジェクトとして格納されます。Trace オブジェクト内には、当日の安値、高値、終値を定義するDay オブジェクトのセットがあります。さらに、Trace オブジェクトは、グラフの高値と安値の部分または終値の部分のいずれかのPath オブジェクトの作成方法を指定します。

Path オブジェクトは PHP クラスで、SVG パスを作成しやすくする目的で作成したものです。ヘルパー・クラスは、リスト 5 に示す svg.php ファイルに定義されています。

リスト 5. Svg.php
<?php
interface ITransform
{
  function xscale( $x );
  function yscale( $x );
}

class Transform implements ITransform
{
  protected $ox;
  protected $oy;
  protected $xscale;
  protected $yscale;
  protected $xoffset = 0;
  protected $yoffset = 0;

  public function xscale( $x ) {
    return $this->ox + ( ( $x - $this->xoffset ) * $this->xscale );
  }

  public function yscale( $y ) {
    return $this->oy - ( ( $y - $this->yoffset ) * $this->yscale );
  }
}

class Point
{
  var $x;
  var $y;
  public function __construct( $x, $y )
  {
    $this->x = $x;
    $this->y = $y;
  }
}

class Path
{
  private $points = array();

  public function add( $x, $y )
  {
    $this->points []= new Point( $x, $y );
  }

  public function toSVG()
  {
    $svg = ";
    $svg .= "M ".$this->points[0]->x." ".$this->points[0]->y." ";
    foreach( $this->points as $pt ) {
      $svg .= "L ".$pt->x." ".$pt->y." ";
    }
    return $svg;
  }
}
?>

ここでは、極めて分かりやすい 2 つのクラス、Point と Path を定義しました。Pointクラスは X-Y ペアを表します。Path クラスは Points のセットです。さらに注目に値するのは、ITransformインターフェースと Transform 基本クラスです。株価グラフを描画するには、ドルの目盛りと当日の値をSVG ビュー座標に変換する必要があります。これは、ITransform インターフェースで実行できます。さらに、もう少し作業があります。


グラフを描画する

それでは、完全なグラフを作成する手順を段階を追って説明していきましょう。

バージョン 1: 終値のパスを描画する

最初のバージョンでは、終値のパスだけを描画して、data.xml ファイルの 2 つの株価が31 日間でどのように推移するかを見てみます。リスト 6 に、この最初のバージョンのコードを示します。

リスト 6. graph.php の第 1 バージョン
<?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>

ファイルの先頭に、Y 軸のドルの値と X 軸の日の値を SVG ポイントに変換するITransform インターフェースのバージョンを作成します。次に、ファイルの終わりでforeach イテレーターを使って、データ内のトレースのリストをウォークスルーします。それぞれのトレースから、終値のSVG Path ($closeSVG) を取得し、その値を toSVG() メソッドを使って SVG 描画コマンドに変換します。そこから、SVG<path> タグを作成し、PHP の echo コマンドを使って描画コマンドと塗りつぶしの値と色の値を書き込みます。

このグラフを参照する .html ファイルをブラウズすると、図 3 のような結果になります。

図 3. グラフの第 1 バージョン
グラフの第 1 バージョン

見映えはよくありませんが、この正確なグラフが開始点となります。

バージョン 2: 終値の線をブラケットで囲む

次のステップは、当日の高値と安値のパスを示す多少明るくした形状で終値の線を囲みます。これによって、カスタマーは株価の変動をある程度見てとることができます。

これを行うには、グラフ作成 PHP ファイルにリスト 7 に示すような変更を加えます。

リスト 7. graph.php の第 2 バージョン
<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クラスで別のパスを作成します。各種グラフィック・オブジェクトに適用されるCSS (Cascading Style Sheet) クラスの概念を SVG がどのように使うかに注目してください。クラス・レベルとローカル・レベルのどちらかで斜線、不透明度、塗りつぶしやその他のグラフィックス・スタイルを設定したり、必要に応じてスクリプトでそれらの設定を簡単に変更することもできます。

図 4 に、更新されたバージョンのグラフを示します。

図 4. 高値/安値の形状を使って更新されたグラフ
高値/安値の形状を使って更新されたグラフ

これで、株価の変動が分かるようになりました。2 つの形状が重なっているグラフの始まりをよく見てみると、高値と安値の形状が不透明でも、赤色のトレースが透けて青色のトレースが見えることが分かります。

バージョン 3: 境界線とテキストを追加する

次のバージョンのグラフでは、境界線とドルの値を示すテキストを追加します。この変更をリスト 8 に示します。

リスト 8. graph.php の第 3 バージョン
<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; }
.range { text-anchor: end; font-size: 5pt; }
</style>
...
  <line x1="18" y1="10" x2="20" y2="10"
   stroke="black" stroke-width="0.2" />
  <line x1="20" y1="10" x2="20" y2="92"
   stroke="black" stroke-width="0.2" />
  <line x1="18" y1="90" x2="100" y2="90"
   stroke="black" stroke-width="0.2" />
  <line x1="100" y1="90" x2="100" y2="92"
   stroke="black" stroke-width="0.2" />
  <text x="18" y="12" class="range"><?php echo($yend); ?>
  </text>
  <text x="18" y="92" class="range"><?php echo($ystart); ?>
  </text>
</svg>

グラフをレンダリングする PHP コードは変更されていません。ここでは単純に、数本の線とY 軸上のテキストを描画しているだけです。変更されたバージョンを図 5 に示します。

図 5. 境界線と Y 軸の値が追加されたグラフ
境界線と Y 軸の値が追加されたグラフ

バージョン 4: 背景を追加する

最後の仕上げとして、背景にグラデーションの塗りを追加してデータを強調します。リスト 9 を見ると、このような塗りを追加するのがいかに簡単かが分かります。

リスト 9. グラデーションの塗りの追加
<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">

<defs>
<linearGradient id="BackGradient"
 gradientUnits="objectBoundingBox"
 gradientTransform="rotate(90)">
  <stop offset="0%" stop-color="#ccc"/>
  <stop offset="50%" stop-color="white"/>
  <stop offset="100%" stop-color="#ccc"/>
</linearGradient>
</defs> 

<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; }
.range { text-anchor: end; font-size: 5pt; }
.background { stroke-width: 0; fill:url(#BackGradient); }
</style>

  <rect x="20" y="10" width="80" height="80" class="background" />
...

上記のコードでは、新しい background クラスが BackGradient リソースを使用していることが分かります。linearGradientの塗りには、薄いグレーと白の間に 3 つの stop があり、それからグレーに戻っています。結果は、図 6 のとおりです。

図 6. 完成したグラフ
完成したグラフ

それではここで、SVG でのスケーラビリティーを実演するために、このページを少し書き直して、<embed>タグの幅と高さを少し増やしてみます。その結果は図 7 のようになります。

図 7. グラフのズームイン・バージョン
グラフのズームイン・バージョン

ピクセルがギザギザになることなく、すべてが完全に拡大されています。これがどんなに素晴らしいことか分かりますか?私が代わってお答えしましょう。これは大変素晴らしいことです。私が特に気に入っているのは、SVGではピクセル単位で直接操作するのではなく、プログラマーが操作しやすいような単位で機能することです。


SVG を作成するその他の方法

もちろん、PHP だけが .svg ファイルを作成するための方法ではありません。SVGテキスト・ファイルは、C#、C、Java™ 言語、Perl などのあらゆるプログラミング言語で作成できます。Perlの CPAN (Comprehensive Perl Archive Network) ライブラリーには SVG モジュールが組み込まれています。PHPには SVG 用の PEAR モジュールがあるので、Java コードの作成者は Apache Foundarionの Batik SVG Toolkit をよく調査する必要があります。

代わりに使用できる他の言語として、XML データ・ファイルを .svg ファイルに変換するのに理想的なXSLT (Extensible Stylesheet Language Transformation) もあります。グラフ作成用のオープン・ソース・プロジェクトであるChartSVG は、XSLT で書き込まれた SVG を使用します。

フロントエンド・ツールに関しては、Adobe Illustrator と GoLive で .svg ファイルを作成できます。GIMP(GNU Image Manipulation Program) も SVG へのパスのエクスポートをサポートします。私のお気に入りの描画プログラム、OmniGraffleV4.0 も同じく、SVG へのエクスポートをサポートします。科学アプリケーションの場合は、Mathematicaに SVG をエクスポートする拡張機能があります。


まとめ

追加できる形式は限られているとしても、SVG を Firefox V1.5 に追加すると、Web設計者にさまざまな可能性の道が開けます。Firefox が Internet Explorer のように普及していないのは事実ですが、Firefoxは日々成長するテクニカル・コミュニティーならではの理想を分かち合っています。その理想は、他のメーカーが自社製ブラウザーにより充実したSVG サポートを組み込もうという強い動機になり、カスタマーのための一層機能性に優れたグラフィック・エクスペリエンスを作成する扉を開くことになるはずです。


ダウンロード

内容ファイル名サイズ
Contains start.html and start.svgx-graphxmlsvg/start.zip1KB
The data.xml filex-graphxmlsvg/data.zip1KB
The graph.php filex-graphxmlsvg/graph.zip2KB

参考文献

学ぶために

  • PHP ホーム・ページ: PHP ホーム・ページには、スクリプト言語に関して役立つ多数の資料が記載されています。
  • W3C XML ページ: この W3C (World Wide Web Consortium) XML ページは、XML と関連標準の詳細について学ぶには絶好の場所です。
  • SVG 標準: W3C には SVG 標準も収録されています。
  • Adobe の SVG サイト: Adobe の SVG サイトは、SVG 詳細に関する優れた情報源です。
  • Mozilla SVG プロジェクト: Mozilla SVG プロジェクトは、Firefox のサポート内容について説明しています。
  • SVG.org: SVG ホーム・ページには、SVG に関するニュースと情報が記載されています。
  • SVG Essentials: David Eisenberg 著「SVG Essentials」(O'Reilly、2002年) は、優れた SVG入門書です。
  • 「Add interactivity to your SVG」(developerWorks、2003年8月): SVG 文書にユーザー入力に応答する対話型エレメントを追加してみましょう。
  • 「XML Matters:Program with SVG」(developerWorks、2005年4月): SVG でのスクリプト記述とアニメーション、そしてDOM やその他の汎用 XML ツールとライブラリーを使用して SVG を操作する方法について読んでください。
  • 「Interactive, dynamic Scalable Vector Graphics」(developerWorks、2003年6月): XSLT やその他の技法を使って、例えば XML 対応リレーショナル・データベース・システムなどのXMLデータから動的に SVG イメージを作成します。このチュートリアルの例では、ユーザーがSVG でレンダリングされた見取り図のコンテンツと外観を動的に制御することを可能にするJavaScript を使用しています。
  • 「Introduction to Scalable Vector Graphics」(developerWorks、2004年3 月): データベース情報から簡単にグラフィックス(グラフとチャートなど) を生成し、アニメーションと対話性を組み込む方法について学びます。このチュートリアルでは、基本形状、パス、テキスト、モデルの色付け、そしてアニメーションとスクリプト作成をはじめ、SVG文書を作成するために必要となるコンセプトを実例を用いて説明します。
  • IBM XML 1.1 certification: XML 1.1 や関連技術の IBM 認定開発者になる方法について調べてください。
  • XML: 広範な技術記事とヒント、チュートリアル、標準、そして IBM レッドブックについては、developerWorksXML ゾーンを参照してください。

製品や技術を入手するために

  • WPF および XAML: WPF および XAML ( Extensible Application Markup Language ) は、Microsoftの SVG に対する答えです。
  • SVG CPAN モジュール: このマニュアルは、Perl プログラミングの優れた情報源です。
  • Batik: Apache XML プロジェクトの Batik は、Java 言語用 SVG ツールキットです。
  • ChartSVG: ハードコーディングされたソフトウェアの ChartSVG は、SVG グラフを作成するためのXSLT 変換システムです。
  • OmniGraffle: Omni Group の OmniGraffle は、ビジネスおよびテクニカル設計用の Macintoshアプリケーションです。
  • Mathematica: Wolfram Research の Mathematica は科学ツールキットで、SVG 用エクスポート・オプションが含まれています。

コメント

developerWorks: サイン・イン

必須フィールドは(*)で示されます。


IBM ID が必要ですか?
IBM IDをお忘れですか?


パスワードをお忘れですか?
パスワードの変更

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


お客様が developerWorks に初めてサインインすると、お客様のプロフィールが作成されます。会社名を非表示とする選択を行わない限り、プロフィール内の情報(名前、国/地域や会社名)は公開され、投稿するコンテンツと一緒に表示されますが、いつでもこれらの情報を更新できます。

送信されたすべての情報は安全です。

ディスプレイ・ネームを選択してください



developerWorks に初めてサインインするとプロフィールが作成されますので、その際にディスプレイ・ネームを選択する必要があります。ディスプレイ・ネームは、お客様が developerWorks に投稿するコンテンツと一緒に表示されます。

ディスプレイ・ネームは、3文字から31文字の範囲で指定し、かつ developerWorks コミュニティーでユニークである必要があります。また、プライバシー上の理由でお客様の電子メール・アドレスは使用しないでください。

必須フィールドは(*)で示されます。

3文字から31文字の範囲で指定し

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


送信されたすべての情報は安全です。


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=XML, Open source, Web development
ArticleID=239856
ArticleTitle=SVG と XML による実務グラフ作成
publish-date=07182006