< previous
XML/SWF Charts Reference*1
next >
20.link リンク機能


<link>
   <area x='int' y='int' width='int' height='int' url='string' priority='int' target='string' 
         text='string' font='string' bold='boolean' size='int' 
         color='string' background_color='string' alpha='int'
         />
           
   [ <area ... /> ]
   
</link>

(説明)

linkは、いろいろな領域を持っていて、それらは、矩形を定義し、ユーザが矩形をクリックしたら行くためのURL定義します。

この特性は、登録ユーザのみ利用できます。(フリーライセンスでは利用できません)
登録されていない場合は、すべてのグラフをクリックするとこのウェブサイト(http://www.maani.us/xml_charts/)にリンクします。

それぞれのリンクには、以下の属性があります。


ボタンの上のリンク(Links Over Buttons)

下の例のような機能的なボタンを作るために、デザイン要素の上にリンクを置きます。(以下の例を見てください)
これらのボタンは、印刷をしたり、他のウェブページへジャンプしたり、グラフの何かを変更したり何でもできます。
(シリーズをオフにしたり、色を変更したり、データを変更したりするようなこと)
あなたが標準のフラッシュボタン(ロールオーバーなどがある)をあなたのグラフにインポートするのにドロー機能を
使用するなら、それらの上に置かれたリンクはボタンのロールオーバー効果とそれらの動作を中断させます。
ロールオーバーボタンをそれらの上に置かれるリンクに結合するには、actionscriptでマウスロールオーバーに
反応する通常のフラッシュムービーのクリップ(ボタンでない)を設計してください。

Javascriptコミュニケーションへのフラッシュ(Flash to Javascript Communication)

グラフのリンクの上のクリックに反応するjavascript機能を作るには、 リンクのターゲット(target)やURLパラメータを
省略します。

そして、urlに以下のことように設定します。

url="javascript:alert('Hello World!')"

FlashコミュニケーションへのJavascript(Javascript to Flash Communication)

ライブ_アップデートの引き金となるように、Javascriptからあるメッセージをグラフに送るには、この機能を使用します。
 
document.charts.SetVariable ( "update_url", "http://your_server/update.xml" );
 
2番目のパラメタをアップデートを要求するURLに取り替えます。
 
Javascriptから、グラフへXMLコードを送るたり、直接グラフをアップデートするには、この機能を使用してください。
 
document.charts.SetVariable ( "update_xml", "line" );
 
2番目のパラメタをXMLコードを含むストリングに取り替えて、グラフをアップデートします。
 
メッセージをJavascriptからFlash(グラフ)に送ることは、すべてのブラウザによってサポートされていません。
また、何人かのユーザがブラウザの上でjavascriptを無効にするかもしれません。
Javascriptをサポートしているブラウザは、Netscape Navigator 3.0 - 4.7x, Netscape 6.2 or higher,
Internet Explorer 3.0 or higher, Safari 2.0 or higher, and Firefox 1.5 or higherです。

グラフをアップデートするボタンを作成するために、javascriptへの代替手段は、グラフの中でボタンを描き込んで、
アップデートの引き金となるのにリンクを使用することが良いでしょう。
(以下の例を見てください)

フォント(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.
既に同じ特別な字体をインストールされているマシンのグラフを参照してください。

(例)

<chart>

 <!-- reduce chart's height to make room for buttons -->
 <chart_rect height='100' />
 
 <!-- draw 4 simple rectangles and texts to use as buttons -->
 <draw>
 <rect x='50' y='200' width='75' height='25' fill_color='cccccc' />
 <text x='67' y='204'>google</text>
 <rect x='130' y='200' width='75' height='25' fill_color='cccccc' />
 <text x='148' y='204'>update</text>
 <rect x='210' y='200' width='75' height='25' fill_color='cccccc' />
 <text x='233' y='204'>print</text>
 <rect x='290' y='200' width='75' height='25' fill_color='cccccc' />
 <text x='302' y='204'>javascript</text>
 </draw>

 <!-- create 4 links over the buttons, each triggers a different action -->
 <link>
 <area x='50' 
 y='200' 
 width='75' 
 height='25' 
 url='http://www.google.com' 
 target='_self'
 text='http://www.google.com' 
 background_color='AAFF00' 
 />
 
 <area x='130' 
 y='200' 
 width='75' 
 height='25' 
 url='live_update_1.php'
 target='live_update'
 />
 
 <area x='210' 
 y='200' 
 width='75' 
 height='25' 
 target='print'
 />

 <area x='290' 
 y='200' 
 width='75' 
 height='25' 
 url="javascript:alert('Hello World!')"
 />
 
 </link>

</chart>

サンプルグラフは、www.maani.usサイトを直接ご覧ください。
>Linkサンプルグラフ



< previous このページのTOP next >

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

2006.12.8  by ma3ki