XML/SWF Charts XMLリファレンス｜仕様

<draw>

   <!-- 円 circle --/>
   <circle layer='string' transition='string' delay='float' duration='float' x='int' y='int'
           radius='int' fill_color='string' fill_alpha='int' line_color='string' line_alpha='int'
           line_thickness='int'
           />
           
   <!-- イメージ image (JPEG or SWF) --/>
   <image  layer='string' transition='string' delay='float' duration='float' url='string' 
           x='int' y='int' width='int' height='int' rotation='int' alpha='int' 
           />

   <!-- ライン line --/>
   <line   layer='string' transition='string' delay='float' duration='float'
           x1='int' y1='int' x2='int' y2='int' 
           line_color='string' line_alpha='int' line_thickness='int'
           />
           
   <!-- 矩形 rect --/>
   <rect   layer='string' transition='string' delay='float' duration='float'
           x='int' y='int' width='int' height='int' rotation='int' 
           fill_color='string' fill_alpha='int' line_color='string' line_alpha='int' line_thickness='int'
           />
           
   <!-- テキスト text --/>
   <text   layer='string' transition='string' delay='float' duration='float'
           x='int' y='int' width='int' height='int' h_align='string' v_align='string' 
           rotation='int' font='string' bold='boolean' size='int' color='string' alpha='int'
           >
    text to draw ここにテキストを置く
   </text>

</draw>

（説明）

drawは、描写するためのいろいろな要素があります。
描写する要素は、円、イメージ(JPEGかSWF)、線、矩形t、またはテキストがあります。
イメージの描写には、アニメーションがあるSWFフラッシュファイル、ロールオーバーボタン、音、スクリプトなどが含まれます。

円(Circle)

各円には、以下の属性があります。

layer：要素を描く層。
値は、background(それは、要素をグラフの背面に置きます)とforeground(それは、要素をグラフの前面に置きます)です。
デフォルトは、foreground（前面）です。
同じ層に置かれた要素は同次元で描かれて、配置されます。
transition：要素の移り変わりの現れ方。
値は、しだいに明るくなる（dissolve）、落下する（drop）、回転する（spin）、はがすように見えてくる（scale）、
ズームアウト（zoom）、点滅（blink）、左からスライドする（slide_right）、右からスライドする（slide_left）、
上にスライドする（slide_up）、下にスライドする（slide_down）、または、なし（none)です。
デフォルトは、なし（none）です。
dissolve, drop, spin, scale, zoom, blink, slide_right, slide_left, slide_up, slide_down, and none.
delay：transitionを始める前の遅れ（秒）。デフォルトは0（ゼロ）です。
duration：transitionの持続時間（秒）。デフォルトは1（秒）です。
x：X座標値(ピクセル）。キャンバスの左上隅(x,y=0,0)からの描く円の中心点の水平軸（X軸)の相対位置。
デフォルトは0です。
y：Y座標値(ピクセル）。キャンバスの左上隅(x,y=0,0)からの描く円の中心点の垂直軸（Y軸)の相対位置。
デフォルトは0です。
radius：描く円の半径の長さ(ピクセル）。デフォルトは100です。
fill_color：描く円の色。色は赤、緑、青のそれぞれの2桁の16進の値を持っているRRGGBB形式（#は省略）です。
デフォルトは000000（黒）です。
fill_alpha：描く円の不透明度。不透明度（0から100）。値は100（完全に不透明）から0（完全に透明）です。
デフォルトは、100（完全に不透明）です。
line_color：描く円の枠の色。色は赤、緑、青のそれぞれの2桁の16進の値を持っているRRGGBB形式（#は省略）です。
デフォルトは000000（黒）です。
line_alpha：描く円の枠の不透明度。不透明度（0から100）。値は100（完全に不透明）から0（完全に透明）です。
デフォルトは、100（完全に不透明）です。
line_thickness：描く円の枠の厚さ(ピクセル）。デフォルトは、0（枠線なし）です。

イメージ(Image)

各イメージには、以下の属性があります。

layer：要素を描く層。
値は、background(それは、要素をグラフの背面に置きます)とforeground(それは、要素をグラフの前面に置きます)です。
デフォルトは、foreground（前面）です。
同じ層に置かれた要素は同次元で描かれて、配置されます。
transition：要素の移り変わりの現れ方。
値は、しだいに明るくなる（dissolve）、落下する（drop）、回転する（spin）、はがすように見えてくる（scale）、
ズームアウト（zoom）、点滅（blink）、左からスライドする（slide_right）、右からスライドする（slide_left）、
上にスライドする（slide_up）、下にスライドする（slide_down）、または、なし（none)です。
デフォルトは、なし（none）です。
delay：transitionを始める前の遅れ（秒）。デフォルトは0（ゼロ）です。
duration：transitionの持続時間（秒）。デフォルトは1（秒）です。
url：JPEGイメージかSWFフラッシュアニメーションの相対または絶対のURL。
これは"charts.swf"ファイルと同じ「サブドメイン」に無ければなりません。（フラッシュセキュリティ）
x：X座標値(ピクセル）。キャンバスの左上隅(x,y=0,0)からのイメージの左上角の水平軸（X軸)の相対位置。
このパラメタはデフォルトで省略されます。
y：Y座標値(ピクセル）。キャンバスの左上隅(x,y=0,0)からのイメージの左上角の垂直軸（Y軸)の相対位置。
このパラメタはデフォルトで省略されます。
width：イメージの長さ(ピクセル）。このパラメタはデフォルトで省略されます。
height：イメージの高さ(ピクセル）。このパラメタはデフォルトで省略されます。
rotation：左上隅(x、y)を基にイメージの回転する角度。このパラメタはデフォルトで0です。
alpha：イメージの不透明度。不透明度（0から100）。値は100（完全に不透明）から0（完全に透明）です。
デフォルトは、100（完全に不透明）です。

別のグラフの中に1つのグラフ(charts.swf)を作成することによって、合成グラフを作ります。
下のように、charts.swfのURLのクウェリーに、ライブラリとソースのパスを作ります。

<chart>
   <!-- このグラフは１つの円グラフを描きます（第一グラフと言う） -->
   <chart_type>pie</chart_type>

   <!-- この円グラフの中に、もう１つのグラフを描きます（第二グラフと言う） -->
   <draw>
      <image url='charts.swf?library_path=libs/charts_library&xml_source=sample.xml' />
   </draw>

</chart>

1番目と同じ座標を2番目のグラフにに与えるには、ドロー機能（draw function）のx、y、幅、および高さのパラメタを省略してください。
ギャラリーの例を見てください。
2番目のグラフ（charts.swf）は、最初の図の後に少し遅れてローディングされ、レンダリングされます。
合成グラフを設計すると、この遅れは考慮に入れなければなりません。

ライン（線）（Line）

各線には、以下の属性があります

layer：要素を描く層。
値は、background(それは、要素をグラフの背面に置きます)とforeground(それは、要素をグラフの前面に置きます)です。
デフォルトは、foreground（前面）です。
同じ層に置かれた要素は同次元で描かれて、配置されます。
transition：要素の移り変わりの現れ方。
値は、しだいに明るくなる（dissolve）、落下する（drop）、回転する（spin）、はがすように見えてくる（scale）、
ズームアウト（zoom）、点滅（blink）、左からスライドする（slide_right）、右からスライドする（slide_left）、
上にスライドする（slide_up）、下にスライドする（slide_down）、または、なし（none)です。
デフォルトは、なし（none）です。
delay：transitionを始める前の遅れ（秒）。デフォルトは0（ゼロ）です。
duration：transitionの持続時間（秒）。デフォルトは1（秒）です。
x1：X座標値(ピクセル）。キャンバスの左上隅(x,y=0,0)からの描くラインの開始ポイントの水平軸（X軸)の相対位置。
デフォルトは、0です。
y1：Y座標値(ピクセル）。キャンバスの左上隅(x,y=0,0)からの描くラインの開始スタートポイントの垂直軸（Y軸)の相対位置。
デフォルトは、0です。
x2：X座標値(ピクセル）。キャンバスの左上隅(x,y=0,0)からの描くラインの終了ポイントの水平軸（X軸)の相対位置。
デフォルトは、100です。
y2：Y座標値(ピクセル）。キャンバスの左上隅(x,y=0,0)からの描くラインの終了ポイントの垂直軸（Y軸)の相対位置。
デフォルトは、100です。
line_color：描くラインの色。色は赤、緑、青のそれぞれの2桁の16進の値を持っているRRGGBB形式（#は省略）です。
line_alpha：描くラインの不透明度。不透明度（0から100）。値は100（完全に不透明）から0（完全に透明）です。
デフォルトは、100（完全に不透明）です。
line_thicknes：描くラインの太さ（ピクセル）。デフォルトは、1（ピクセル）です。

矩形（長方形）（Rectangle）

各矩形には、以下の属性があります

layer：要素を描く層。
値は、background(それは、要素をグラフの背面に置きます)とforeground(それは、要素をグラフの前面に置きます)です。
デフォルトは、foreground（前面）です。
同じ層に置かれた要素は同次元で描かれて、配置されます。
transition：要素の移り変わりの現れ方。
値は、しだいに明るくなる（dissolve）、落下する（drop）、回転する（spin）、はがすように見えてくる（scale）、
ズームアウト（zoom）、点滅（blink）、左からスライドする（slide_right）、右からスライドする（slide_left）、
上にスライドする（slide_up）、下にスライドする（slide_down）、または、なし（none)です。
デフォルトは、なし（none）です。
delay：transitionを始める前の遅れ（秒）。デフォルトは0（ゼロ）です。
duration：transitionの持続時間（秒）。デフォルトは1（秒）です。
x：X座標値(ピクセル）。キャンバスの左上隅(x,y=0,0)からの描く矩形の左上角の水平軸（X軸)の相対位置。
このパラメタはデフォルトで省略されます。
y：Y座標値(ピクセル）。キャンバスの左上隅(x,y=0,0)からの描く矩形の左上角の垂直軸（Y軸)の相対位置。
このパラメタはデフォルトで省略されます。
width：描く矩形のの長さ(ピクセル）。このパラメタは、100です。
height：描く矩形の高さ(ピクセル）。このパラメタは、100です。
rotation：描く矩形の左上隅(x、y)を基に矩形を回転する角度。このパラメタはデフォルトで0（回転なし）です。
alpha：イメージの不透明度。不透明度（0から100）。値は100（完全に不透明）から0（完全に透明）です。
デフォルトは、100（完全に不透明）です。
fill_color：描く矩形の色。色は赤、緑、青のそれぞれの2桁の16進の値を持っているRRGGBB形式（#は省略）です。
デフォルトは000000（黒）です。
fill_alpha：描く矩形の不透明度。不透明度（0から100）。値は100（完全に不透明）から0（完全に透明）です。
デフォルトは、100（完全に不透明）です。
line_color：描く矩形の枠の色。色は赤、緑、青のそれぞれの2桁の16進の値を持っているRRGGBB形式（#は省略）です。
デフォルトは000000（黒）です。
line_alpha：描く矩形の枠の不透明度。不透明度（0から100）。値は100（完全に不透明）から0（完全に透明）です。
デフォルトは、100（完全に不透明）です。
line_thickness：描く矩形の枠の厚さ(ピクセル）。デフォルトは、0（枠線なし）です。

テキスト（Text）

各テキストには、以下の属性があります。（テキストは、矩形の中に描くと想定します）

layer：要素を描く層。
値は、background(それは、要素をグラフの背面に置きます)とforeground(それは、要素をグラフの前面に置きます)です。
デフォルトは、foreground（前面）です。
同じ層に置かれた要素は同次元で描かれて、配置されます。

transition：要素の移り変わりの現れ方。
値は、しだいに明るくなる（dissolve）、落下する（drop）、回転する（spin）、はがすように見えてくる（scale）、
ズームアウト（zoom）、点滅（blink）、左からスライドする（slide_right）、右からスライドする（slide_left）、
上にスライドする（slide_up）、下にスライドする（slide_down）、または、なし（none)です。
デフォルトは、なし（none）です。

delay：transitionを始める前の遅れ（秒）。デフォルトは0（ゼロ）です。

duration：transitionの持続時間（秒）。デフォルトは1（秒）です。

x：X座標値(ピクセル）。キャンバスの左上隅(x,y=0,0)からの描く矩形の左上角の水平軸（X軸)の相対位置。

y：Y座標値(ピクセル）。キャンバスの左上隅(x,y=0,0)からの描く矩形の左上角の垂直軸（Y軸)の相対位置。

width：描く矩形のの長さ(ピクセル）。このパラメタは、100です。

height：描く矩形の高さ(ピクセル）。このパラメタは、100です。

h_align：矩形の中におけるテキストの水平方向の整列。値は、左寄せ（left）、中央寄せ（center）、右寄せ（right）です。デフォルトは、左寄せ（left）です。

v_align：矩形の中におけるテキストの垂直方向の整列。値は、上揃え（top）、中央揃え（middle）、下揃え（bottom）です。デフォルトは、上揃え（top）です。

rotation：矩形の回転。埋め込まれた字体が使用されているときだけ(下のFonts欄を見てください。)、これは動作します。
描く矩形の左上隅(x、y)を基に矩形を回転する角度。このパラメタはデフォルトで0（回転なし）です。

font：fontは、テキストを書くために使用されます。下のFonts欄を見てください。デフォルトは、arialです。
bold：テキストが、太字（bold）か否かの値（true/false)。デフォルトは、太字（true）です。
size：テキストのfontサイズ。デフォルトは、キャンバスの大きさに基づいて計算されます。
color：テキストのfontカラー。色は赤、緑、青のそれぞれの2桁の16進の値を持っているRRGGBB形式（#は省略）です。
デフォルトは000000（黒）です。
alpha：埋め込まれた字体が使用されているときだけ(下のFonts欄を見てください。)、これはキストの透明に影響します。
描く矩形の不透明度。不透明度（0から100）。値は100（完全に不透明）から0（完全に透明）です。
デフォルトは、100（完全に不透明）です。

（例）

  <!-- drawタグ は、カンバス上に、円-circle、イメージ-image（JPEGまたはSWF）、
          線-line、矩形-rectまたはテキスト-text等を自由に書くことを可能にします。
          textタグは、グラフのタイトル、データ軸ラベルの数値の単位やカテゴリ軸ラベルのタイトル等を書くことができます。-->
  <draw>
   <!--特殊文字(Special Characters)-->
   <text color='00008b' font='Microsoft Sans Serif'
    h_align='center' v_align='top' bold='true' size='13'>－過去４年の売上げ推移－</text>
   <text color='008000' font='Microsoft Sans Serif' h_align='center'
    bold='true' x='0' y='230'>（年）</text>
   <text color='008000' font='Microsoft Sans Serif' rotation='-90' width='50' height='30'
    bold='true' x='0' y='200'>（万円）</text>
   <image layer='background' url='./img/fujisan1.jpg' x='0' y='0'
             width='400' height='250' alpha='75'
             />
   <text  transition='slide_left' delay='1' duration='1' x='0' y='250' 
             width='250' height='100' h_align='center' v_align='top' 
             rotation='-90' font='arial' bold='true' size='65' color='4400ff' alpha='60'
             >Mt. Fuji
    </text>
  </draw>

XML全コード ex-col-draw.xml

**縦棒グラフサンプル（draw）**

< previous

このページのTOP

next >

*1 XML/SWF Charts Reference原本の著作権は、http://www.maani.usが所有しています

2006.12.8

by ma3ki