<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/)にリンクします。
それぞれのリンクには、以下の属性があります。
- x:X座標値(ピクセル)。キャンバスの左上隅(x,y=0,0)からの矩形の左上隅までの水平軸(X軸)の相対位置。
- y:Y座標値(ピクセル)。キャンバスの左上隅(x,y=0,0)からの矩形の左上隅までの垂直軸(Y軸)の相対位置。
- width:矩形の長さ(ピクセル)。デフォルト値はキャンバスの幅です。
- height:矩形の高さ(ピクセル)。デフォルト値はキャンバスの高さです。
- url:矩形がクリックされたときの相対または絶対URL。
- priority:リンクの優先権。もし、リンクの矩形が重なっている場合、リンクのオーダーは、
その優先によって決まります。
最初のリンクには、最も高い優先権があり、最後のリンクには、最も低い優先権があります。
最優先のリンクがトリガーとなります。
また、さらに、1に設定されたこの「優先権」属性とのすべてのリンクが引き起こされます。
これは、ワンクリックで複数の重なるリンクの引き金となります。
例えば、これは、グラフをライブアップデートしたり、ワンクリックでポップアップウィンドウを始めたりすることを許します。
デフォルトは0です。(オーダーが最優先をそれに与える場合にだけ、このリンクの引き金となってください。)
- target:ターゲット。値は、
- _self:同じウィンドー
- _blank:新しいウィンドー
- _parent:ウィンドウがフレームに分割されていれば、1段だけ分割を解除して、その親フレームに表示
- _top:フレームを解除してフルボディのウィンドー
- フレーム名:フレーム名のフレームに開く
- live_update:ページをリロードせずにグラフをアップデート
- print:印刷を行う。この場合URLは無視されます。
- text:リンクの矩形にマウスを当てたときにtooltipとして表示する文字列。省略するなら、tooltipを表示しません。
- font:tooltipテキストを描くときのTTF Font名。下のFonts欄を参照。デフォルトはArialです。
- bold:tooltip Fontを太字にするか否の指定(true/false)。デフォルトは、太字(true)です。
- size:tooltip Fontの文字サイズ。デフォルトは12(ピクセル)です。
- color:tooltip Fontの色。色は赤、緑、青のそれぞれの2桁の16進の値を持っているRRGGBB形式(#は省略)です。
デフォルトは、000000(黒)です。
- background_color:tooltipの背景色。省略した場合は背景色はありません。
色は赤、緑、青のそれぞれの2桁の16進の値を持っているRRGGBB形式(#は省略)です。
デフォルトは、背景色はありません。
- alpha:tooltipの不透明度。不透明度(0から100)。値は100(完全に不透明)から0(完全に透明)です。
デフォルトは、80です。
ボタンの上のリンク(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サンプルグラフ
*1 XML/SWF Charts Reference原本の著作権は、http://www.maani.usが所有しています
2006.12.8  by ma3ki