< previous
XML/SWF Charts Reference*1
 next >
16．draw グラフ要素の描写 

<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)

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

イメージ(Image)

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


別のグラフの中に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）

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

矩形（長方形）（Rectangle）

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

テキスト（Text）

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

複数行テキスト（Multi-line Text）

複数行テキストを描くには、\rでテキストをブレークします。
例：
"Show this in\rtwo lines"
フォント（fonts）
 
XML/SWF Chartsは、Arial-bold-Fontを埋め込んでいます（Fontのデフォルト値）。
文字特性をArialに設定することにより、埋め込まれた字体は、マシンにこの字体があるかどうかに関わらず、
テキストをすべてのマシンで同じに見せます。
埋め込まれた字体の他の利点はそれを回転させることができて、透明にそれをレンダリングすることができるということです。
不都合はフラッシュファイルのサイズを増加させるということです。
XML/SWF Chartsには1つの埋め込まれた字体しかない理由です。
埋め込まれたArial字体はeuropean言語の大部分のためにアクセントがあるキャラクタを見せることができます。
それが十分でないなら、代わりに別の非埋め込まれた字体を選びます。(ギャラリーページはこの字体を使用するだけです)
 
他の非埋め込まれた字体にも、上の文字修飾を設定することができます。
ローカルマシンに、正確な選択した字体がないなら、Flashは最も密接にそれに類似しているどんな字体も使用します。
非埋め込まれた字体は、予想より異なるように見えるかもしれませんが、
埋め込まれているより小さいポイントサイズで、もっと鋭くて読みやすい字体であるかもしれません。(10ポイント未満の場合)
 
非埋め込まれた字体が使用されているとき、どんな回転(rotation)とアルファ(alpha)属性も無視されます。
非埋め込まれた字体を使用するテキストは、いつも水平に表示し、完全に不透明です。
 
他の字体を直接charts.swfに埋め込むのは不可能です。
しかしながら、別のフラッシュファイルを作成して、他の字体をそれに埋め込んで、次に、それに図を表示するのは可能です。
これで、グラフは他の埋め込まれた字体にアクセスします。
詳細に関してこのページを参照してください。
 
ドローイメージ機能（draw image function）を使用して、JPEGイメージかSWFがファイルを読み込む（including）ことにより、
字体を心配しないでどんなテキストも表示する方法があります。

特殊文字(Special Characters)

特殊文字や英語以外の言語を表示するために；
 
1.
ソースファイル（XML)の中で特殊文字を入力し、それへのキャラクタを見せることができる字体を適用します。
 
<draw>
 <text font='special_font' > special_text </text>
</draw>
 
「special_font」の部分を特殊文字を表示することができる字体の名前に取り替えてください。
これはArial以外の字体で、そして、オペレーティングシステムでそれが参照できる方法で入力します。
「special_text」の部分を特殊文字を含むテキストに取り替えてください。
特殊文字は正しくここに現れなければなりません。
 
2.
UTF-8コード化されたソースファイル(XML)を作成、保存します。
 
3.
既に同じ特別な字体をインストールされているマシンのグラフを参照してください。

（例）

  <!-- 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