Zen と SVG
Scalable Vector Graphics (SVG) は、XML 形式で 2 次元ベクトル・グラフィックを記述するための言語です。SVG 言語仕様書は、Web サイト www.w3.org/TR/SVG/Opens in a new tab で入手できます。
Zen は SVG を使用して、高性能なデータ駆動型のグラフやメータを表示します。組み込みの SVG コンポーネントを使用すると、人目を引く企業ダッシュボードを定義し、リアルタイムで統計情報を更新できます。独自の SVG コンポーネントを定義することも可能です。%ZEN.SVGComponent.svgComponentOpens in a new tab から継承するコンポーネントはいずれも SVG コンポーネントです。これらのコンポーネントは、データ値に応じて外観を変える動的な SVG イメージを描画します。
Zen ページに静的な SVG ファイルを表示するには、<iframe> を使用します。ボタン・コントロールのイメージとして、静的な SVG ファイルを使用するには <image> を使用します。以下のトピックで説明する規約は、動的な SVG コンポーネントにのみ当てはまります。
この章では、Zen ページに SVG コンポーネントを配置する方法を説明します。項目は以下のとおりです。
-
“SVG コンポーネントのレイアウト”
-
“SVG コンポーネントの属性”
-
“メータ”
-
“グラフ”
-
“<radialNavigator>”
-
“<ownerDraw>”
SVG のフォント
フォントファミリが指定されないと、SVG グラフィックは SVG エンジンが提供する既定フォントを使用します。必要に応じて、グローバル ^%ZEN.DefaultSVGFontFamily をフォントファミリの名前に設定することで、システムの SVG 既定フォントを指定できます。これにより、そのフォント名を使用して Zen で CSS フォントファミリの定義を作成できます。CSS フォントファミリの値を明示的に指定しない限り、自動的にこのフォントファミリがすべての SVG テキスト要素に適用されます。
例えば、Microsoft Vista の Internet Explorer で日本語を使用する場合は、MingLiU フォントが便利です。
Set ^%ZEN.DefaultSVGFontFamily="MingLiU"
SVG コンポーネントのレイアウト
以下のコンポーネントを使用して、Zen ページに SVG コンポーネントを配置できます。
-
“<svgFrame>”
-
“<svgGroup>”
-
“<svgSpacer>”
<svgFrame>
<svgFrame> は、Zen ページ上に四角形のフレームを作成する Zen コンポーネントで、この中に SVG コンポーネントを配置できます。このフレームの内部に表示できるのは SVG コンポーネントのみです。メータやグラフなど動的な SVG コンポーネントはすべて、<svgFrame> に記述する必要があります。
<svgFrame> は %ZEN.Component.componentOpens in a new tab から継承されます。これにより、"Zen の使用法" の “Zen のスタイル” の章の説明にあるとおり <svgFrame> に通常のコンポーネント・スタイル属性 (height、width、label など) が与えられます。また、この規約により、他の Zen コンポーネントと同様、<page>、<hgroup>、<vgroup> などの中に <svgFrame> を記述できます。詳細は、"Zen の使用法" の “Zen のレイアウト” の章を参照してください。
次の図は、1 つのページに Zen コンポーネントと SVG コンポーネントが混在する例です。これは、SAMPLES ネームスペースのサンプル・クラス ZENDemo.DashboardOpens in a new tab による出力と類似しています。
以下の XData Contents ブロックには、上の図を生成したコンポーネントがあります。これには以下のコンポーネントが混在しています。
-
Zen コンポーネント (<hgroup>、<vgroup>、<html>、<spacer>、<button>、<svgFrame>)
-
SVG コンポーネント (<speedometer>、<fuelGauge>、<lightBar>、<lineChart>、<svgGroup>、<svgSpacer>)
XData Contents [XMLNamespace="http://www.intersystems.com/zen"]
{
<page cellStyle="background-color: plum;"
xmlns="http://www.intersystems.com/zen">
<hgroup>
<spacer width="10"/>
<vgroup valign="top">
<spacer height="20"/>
<hgroup>
<html
enclosingStyle="margin: 3px; font-size:1.2em; color: darkblue;">
This is an example of a Zen Dashboard:
</html>
<spacer width="10" />
<button caption="Update" onclick="zenPage.updateData();"/>
</hgroup>
<svgFrame id="svgFrame" width="600" height="430"
frameStyle="border-style: inset;"
backgroundStyle="fill: black;"
layout="horizontal">
<svgSpacer width="20" />
<svgGroup layout="vertical">
<svgSpacer height="20" />
<lineChart id="chart" width="400" height="420"
title="Summary of Service Requests"
backgroundStyle="fill: black;"
plotAreaStyle="fill: url(#glow-silver);"
lineStyle="stroke: black;" chartFilled="true"
seriesColors="url(#glow-blue)" seriesCount="1"
seriesSize="12" markersVisible="true"
marginRight="5" marginLeft="10"
ongetData="return zenPage.getChartData(series);"
ongetLabelX="return zenPage.getChartLabelX(value);">
<yAxis id="yAxis" baseValue="0"
minValue="-25" maxValue="75"
majorUnits="25" minorUnits="5"
title="Requests" minorGridLines="true"/>
</lineChart>
</svgGroup>
<svgGroup layout="vertical">
<svgSpacer height="20" />
<speedometer id="speed3" label="Overdue!" animate="true"
labelStyle="fill: yellow;"
lowLampColor="url(#glow-green)"
rangeUpper="100" width="125" height="125"/>
<fuelGauge id="speed1" label="Important" animate="true"
labelStyle="fill: yellow;"
rangeUpper="100" width="125" height="125"/>
<lightBar id="speed2" label="Urgent" animate="true"
labelStyle="fill: yellow;"
lowLampColor="url(#glow-green)"
rangeUpper="100" width="100" height="125"/>
</svgGroup>
</svgFrame>
</vgroup>
</hgroup>
</page>
}
<svgFrame> 要素には、目的のレイアウトを得るうえで必要な数の階層で入れ子にした <svgGroup> 要素と <svgSpacer> 要素が記述されています。<svgFrame> にも svgPage 属性をサポートする <parameter> 要素を記述することができます。詳細は、以下のテーブルの svgPage の説明を参照してください。
<svgFrame> には以下の属性があります。
属性 | 説明 |
---|---|
Zen コンポーネントの属性 |
<svgFrame> は、あらゆる Zen コンポーネントと同じ汎用属性を持ちます。詳細は、以下のセクションを参照してください。
|
backgroundStyle |
SVG の CSS スタイル定義 (SVG で使用するスタイルは CSS に準拠していますが、CSS にはないスタイルのセットもあります)。フレームの背景スタイルを指定します。このスタイルには、塗りつぶしの値を指定する必要があります。指定しないと、このフレーム内部でのマウス・イベントが正しく動作しません。backgroundStyle の既定値は以下のとおりです。 "fill: white;" |
disabled |
True の場合、このフレームとその子フレームが無効になります。既定値は False です。 この属性で基本となるデータ型は %ZEN.Datatype.booleanOpens in a new tab です。“Zen 属性のデータ型” を参照してください。 |
dragCanvas |
True の場合、ユーザはポインティング・デバイス (マウス) を使用して、フレームのキャンバスをドラッグできます。これによって offsetX 属性および offsetY 属性の値が更新され、キャンパス上でシェイプが移動します。既定値は False です。 この属性で基本となるデータ型は %ZEN.Datatype.booleanOpens in a new tab です。“Zen 属性のデータ型” を参照してください。 |
editMode |
このフレームの編集モード。可能な値は以下のとおりです。
|
frameStyle |
このフレームに適用する CSS スタイル定義。例えば、上の図にあるようなくぼんだベベル境界線を作成するには、次のように指定します。 frameStyle="border-style: inset;" |
gridX | snapToGrid が True の場合、gridX はサイズ変更グリッドを構成する各セルの HTML の幅を定義します。既定値は 25 です。 |
gridY | snapToGrid が True の場合、gridY はサイズ変更グリッドを構成する各セルの HTML の高さを定義します。既定値は 25 です。 |
layout |
このフレームでの SVG コンポーネントのレイアウト方法を指定します。可能な値は以下のとおりです。
|
offsetX | このフレームの座標の左上隅を原点とした x 軸方向のオフセット。 既定値は 0 です。 |
offsetY | このフレームの座標の左上隅を原点とした y 軸方向のオフセット。 既定値は 0 です。 |
ondragCanvas |
<svgFrame> の ondragCanvas イベント・ハンドラ。ユーザがポインティング・デバイスを使用して背景のキャンバスをドラッグするたびに、Zen によってこのハンドラが呼び出されます。“Zen コンポーネントのイベント・ハンドラ” を参照してください。操作が完了したかどうかを示すブーリアン変数 done がこのイベント・ハンドラに渡されます。 |
onmouseWheel | このフレームのバックグラウンドである長方形の中でマウス・ホイールを移動すると実行されるクライアント側 JavaScript 式。現在、FireFox のみで利用可能です。 |
onmoveItem | このフレームがドラッグ・モードのとき、ユーザが 1 つ以上の選択項目を移動すると実行されるクライアント側 JavaScript 式。項目のリストは、selectedItems プロパティの説明を参照してください。操作が完了したかどうかを示すブーリアン変数 done がこのイベント・ハンドラに渡されます。 |
onresizeItem | このフレームがドラッグ・モードのとき、ユーザが 1 つ以上の選択項目のサイズを変更すると実行されるクライアント側 JavaScript 式。項目のリストは、selectedItems プロパティの説明を参照してください。操作が完了したかどうかを示すブーリアン変数 done がこのイベント・ハンドラに渡されます。 |
onselectItem | このフレームで選択している項目の数を (項目を追加選択または選択解除することにより) ユーザが変更すると実行されるクライアント側 JavaScript 式。 変数 item がこのイベント・ハンドラに渡され、最近選択または選択解除された項目を参照します。 |
onzoom | このフレームのズーム・レベルをユーザが変更すると実行されるクライアント側 JavaScript 式。 |
snapToGrid |
True の場合、すべてのマウス操作 (サイズ変更とドラッグ) が可能な範囲は、gridX と gridY で指定したグリッド上に制限されます。既定値は False です。 この属性で基本となるデータ型は %ZEN.Datatype.booleanOpens in a new tab です。“Zen 属性のデータ型” を参照してください。 |
svgAutoSize |
フレーム内の SVG 描画キャンバスのサイズを制御します。dragCanvas が True の場合、svgAutoSize プロパティは無視されます。False の場合は、svgAutoSize が True であれば、横 svgWidth ×縦 svgHeight を最小キャンバス・サイズとして、キャンパス・サイズがフレームの内容に基づいて自動的に計算され、更新されます。svgAutoSize が False の場合、キャンバスのサイズは svgWidth と svgHeight の値で決まります。 この属性で基本となるデータ型は %ZEN.Datatype.booleanOpens in a new tab です。“Zen 属性のデータ型” を参照してください。 |
svgHeight | フレーム内の SVG 描画キャンバスのサイズを制御します。svgHeight には、任意の有効な SVG 単位を使用してキャンバスの高さを指定できます。この属性を指定しない場合、svgHeight の既定値は、<svgFrame> の height の 100% です。height も指定していない場合、height および svgHeight の既定値は 100 です。 |
svgPage |
SVG コンテンツを提供する専用の CSP ページを表し、フレーム内の SVG コンポーネントのスタイルと色を定義します。指定する場合、svgPage の値は %ZEN.SVGComponent.svgPageOpens in a new tab を拡張したクラスの名前にする必要があります。指定しない場合、フレームでは既定でベース・クラス %ZEN.SVGComponent.svgPageOpens in a new tab が使用されます。 svgPage 属性に値を指定すると、<svgFrame> の中に <parameter> 要素も記述できます。Zen は、これらの <parameter> 要素から svgPage クラスに、URI パラメータとして value 文字列を渡します。以下はその例です。 <parameter value="I am a URI parameter!"/> <parameter> に指定する value には、リテラル文字列のほか、Zen #()# 実行時式も使用できます。 <parameter> 属性 paramName を使用して、<svgFrame> で使用するパラメータに名前を割り当てます。以下はその例です。 <parameter paramName="First" value="I am a URI!"/> |
svgWidth | フレーム内の SVG 描画キャンバスのサイズを制御します。svgWidth には、任意の有効な SVG 単位を使用してキャンバスの幅を指定できます。この属性を指定しない場合、svgWidth の既定値は、<svgFrame> の width の 100% です。width も指定していない場合、width および svgWidth の既定値は 300 です。 |
zoom | 1.0 以上の 10 進数値 (数値の小数点部分は省略できます)。この値は、フレームのズーム倍率を表します。既定値は 100 で、これはズームが行われないことを表します。100 を超える値の場合、イメージのサイズは拡大され、100 未満の場合は縮小されます。 |
zoomLevels |
推奨ズーム値のコンマ区切りのリスト。既定値は以下のとおりです。 "10,25,50,75,100,125,150,175,200,300,400,500" |
zoomWithWheel |
True の場合、マウス・ホイールのイベントに応じて、フレームは自動的に拡大または縮小します。既定値は False です。現在、FireFox のみで利用可能です。 この属性で基本となるデータ型は %ZEN.Datatype.booleanOpens in a new tab です。“Zen 属性のデータ型” を参照してください。 |
<svgFrame> には、%ZEN.Component.componentOpens in a new tab から継承したコンポーネントは記述できません。このようなコンポーネントとしては、<iframe>、<html>、<spacer>、<hgroup>、<vgroup>、<button>、<link>、およびこのドキュメントで説明した他の Zen コンポーネントのすべてが該当します。<svgFrame> に記述できるのは SVG コンポーネントのみです。
埋め込み SVG フレームのウィンドウ・オブジェクトにプログラムを使用してアクセス可能であることが重要な場合があります。%ZEN.SVGComponent.svgFrameOpens in a new tab クラスには、<svgFrame> 要素に埋め込まれた SVG ウィンドウ・オブジェクトをポイントするクライアント側プロパティ svgWindow があります。
<svgGroup>
<svgGroup> は、<svgFrame> 内の SVG コンポーネントを格納して配置することを目的とした特別なコンテナです。<svgGroup> は、Zen コンポーネント (%ZEN.Component.componentOpens in a new tab) ではなく、また Zen グループ・コンポーネント (%ZEN.Component.groupOpens in a new tab) でもありません。<svgGroup> は、他の Zen SVG コンポーネントを収めることができる Zen SVG コンポーネント (%ZEN.SVGComponent.svgComponentOpens in a new tab) です。
<svgGroup> には以下の属性があります。
属性 | 説明 |
---|---|
SVG コンポーネントの属性 | <svgGroup> は、あらゆる SVG コンポーネントと同じ汎用属性を持ちます。詳細は、“SVG コンポーネントの属性” を参照してください。 |
disabled |
True の場合、このグループとその子グループは無効で、非表示になります。既定値は False です。 この属性で基本となるデータ型は %ZEN.Datatype.booleanOpens in a new tab です。“Zen 属性のデータ型” を参照してください。 |
layout |
このグループに SVG コンポーネントをどのようにレイアウトするかを指定します。指定できる値は、"horizontal" および "vertical" です。 layout を "none" または空の値 "" に設定すると、x と y で指定した座標にコンポーネントを配置できます。“SVG コンポーネントの属性” の x 属性および y 属性の説明を参照してください。 |
<svgSpacer>
<svgGroup> コンテナでは、<svgSpacer> 要素が便利です。横長 <svgGroup> にスペースを追加するには width 値、縦長 <svgGroup> にスペースを追加するには height 値を <spacer> と共に使用します。
<svgSpacer> は、あらゆる SVG コンポーネントと同じ汎用属性を持ちます。詳細は、“SVG コンポーネントの属性” を参照してください。
<rect>
Zen の <rect> 要素は単純な四角形を描画します。これは、SVG 言語仕様で定義されている <rect> 要素とは別の要素です。Zen の <rect> は、<svgFrame> や <svgGroup> に配置できる組み込み Zen SVG コンポーネントです。
Zen の <rect> 要素は、<svgFrame> や <svgGroup> の中で領域を占有しますが、その様子は <svgSpacer> とは異なります。概念から見た <svgSpacer> と <rect> の違いは、<rect> には塗りつぶし色など、目に見えるスタイル属性を設定できることです。
属性 | 説明 |
---|---|
SVG コンポーネントの属性 | <rect> は、あらゆる SVG コンポーネントと同じ汎用属性を持ちます。詳細は、“SVG コンポーネントの属性” を参照してください。 |
rx | 角に付けるカーブの半径 (単位は有効な任意の SVG 単位)。 |
style | SVG の CSS スタイル定義。SVG で使用するスタイルは CSS に準拠していますが、CSS にはないスタイルのセットもあります。 |
SVG コンポーネントの属性
すべての SVG コンポーネントは次のスタイル属性を持ちます。これらは、通常の Zen コンポーネントでサポートされている属性とはまったく異なります。
属性 | 説明 |
---|---|
boundless |
True の場合、このコンポーネントには境界がありません。つまり、エンクロージング SVG 要素が、通常の SVG 要素ではなく単純なグループ <g> となります。既定値は False です。 この属性で基本となるデータ型は %ZEN.Datatype.booleanOpens in a new tab です。“Zen 属性のデータ型” を参照してください。 |
height | コンポーネントの高さ (単位は有効な任意の SVG 単位)。この値を設定することによる効果は、コンポーネントにより異なります。組み込みの SVG コンポーネントの場合、その効果は通常、単純です。height の値が、それを含む <svgFrame> の height よりも大きい場合、この SVG コンポーネントはフレームで切り取られたように表示されます。 |
hidden |
True の場合、このコンポーネントは無効で、非表示になります。既定値は False です。SVG コンポーネントの非表示状態を変更すると、SVG フレームのレイアウトの再計算が発生します。つまり、layout が “none” と等しくない場合、他のコンポーネントは非表示コンポーネントが表示されていた領域に移動します。 この属性で基本となるデータ型は %ZEN.Datatype.booleanOpens in a new tab です。“Zen 属性のデータ型” を参照してください。 |
id | SVG コンポーネントの属性を更新するために、そのコンポーネントを選択するときに使用する名前。例えば、メータを使用する表示では、このメータが表す value が定期的に更新される可能性があります。 |
name | コンポーネントの名前を指定します。 |
onclick |
SVG コンポーネントの onclick イベント・ハンドラ。ユーザがこのシェイプでマウスをクリックするたびに、Zen によってこのハンドラが呼び出されます。“Zen コンポーネントのイベント・ハンドラ” を参照してください。 |
position | SVG キャンバスの残りの部分に固定されたコントローラを配置するために使用します。SVG コンポーネントの position が "fixed" の場合、キャンバスと共にこのシェイプをスクロールすることはできません。また、マウスを使用してこのシェイプをドラッグすることもできません。position が "relative" (既定) の場合、このシェイプはスクロールやドラッグが可能です。 |
preserveAspectRatio | Zen の既定では、SVG コンポーネントのアスペクト比 (幅と高さの比率) を維持したまま、そのコンポーネントのサイズを変更できます。preserveAspectRatio を "none" に設定すると、アスペクト比は維持されず、height と width を個別に変更できます。 |
viewBoxHeight | このコンポーネントに使用するビュー・ボックスの高さ (単位は有効な任意の SVG 単位)。viewBoxHeight 属性を指定すると、その値がビュー・ボックスの高さになります。指定していない場合は、コンポーネントの height 値が使用されます。 |
viewBoxWidth | このコンポーネントに使用するビュー・ボックスの幅 (単位は有効な任意の SVG 単位)。viewBoxWidth 属性を指定すると、その値がビュー・ボックスの幅になります。指定していない場合は、コンポーネントの width 値が使用されます。 |
width | コンポーネントの幅 (単位は有効な任意の SVG 単位)。この値を設定することによる効果は、コンポーネントにより異なります。組み込みの SVG コンポーネントの場合、その効果は通常、単純です。width の値が、それを含む <svgFrame> の width よりも大きい場合、この SVG コンポーネントはフレームで切り取られたように表示されます。 |
x | コンポーネントの x 位置 (単位は有効な任意の SVG 単位)。コンポーネントの実際の位置は、コンポーネントを囲む <svgGroup> の layout によって異なります。<svgGroup> が縦方向または横方向のレイアウトの場合、この x 座標は無視されます。ただし、layout="" の場合は、この x 座標が有効になります。x は、<svgGroup> の左上隅の原点 (0,0) を基準とした正の値です。 |
y | このコンポーネントの y 位置。 |
メータ
メータは、1 つの数値をグラフィックで表示する SVG コンポーネントです。各メータは、それ自身を表示するために必要な SVG を生成する %ZEN.SVGComponent.meterOpens in a new tab から派生したクラスです。
Zen には組み込みのメータがいくつか用意されています。以下のメータのいずれかを Zen ページに配置するには、<svgFrame> または <svgGroup> の中で、対応するメータ要素を指定します。
-
“<fuelGauge>”
-
“<indicatorLamp>”
-
“<lightBar>”
-
“<slider>”
-
“<smiley>”
-
“<speedometer>”
-
“<trafficLight>”
-
独自のメータ・スタイルを作成する方法については、"Zen アプリケーションの開発" の “カスタム・コンポーネント” の章を参照してください。
このトピックでは、メータの値を指定する方法について説明し、すべてのメータに共通する属性、および前述のメータ・タイプそれぞれに特有の属性について説明します。
メータの値の指定
コードを使用して、メータに表示する値を動的に更新する方法には次の 2 とおりがあります。
-
ページ・クラスの JavaScript メソッドから、次のように、メータ・クラス・メソッドである getComponentById および setValue を使用して、メータの value 属性を設定します。
this.getComponentById("myMeterID").setValue(myNewValue);
ここで、myMeterID はこのメータの id 属性値、myNewValue は 1 つの数値を含む変数です。
-
“モデル・ビュー・コントローラ” の章の説明にあるように、データ・コントローラにメータを関連付けます。例えば、XData Contents ブロックに、次のような <dataController> 参照があるとします。
<dataController id="source" modelClass="myPackage.MyModel" modelId="1"/>
参照先の modelClass myPackage.MyModel に Automobiles というプロパティがある場合、XData Contents ブロックに次のようなメータ定義を記述できます。
<trafficLight id="myLight" controllerId="source" height="150" width="75" dataBinding="Automobiles" label="Autos" labelStyle="fill: yellow;" />
この方法は、メータの controllerId の値が <dataController> の id 値と一致し、メータの dataBinding の値が <dataController> の modelClass で定義されているプロパティの名前と一致する場合に機能します。
メータの属性
すべてのメータには、そのスタイルと動作を定義する以下の属性があります。
属性 | 説明 |
---|---|
SVG コンポーネントの属性 | メータは、あらゆる SVG コンポーネントと同じ汎用属性を持ちます。詳細は、“SVG コンポーネントの属性” を参照してください。 |
animate |
Zen の組み込みメータの中にはアニメーション機能を持つものがあります。例えば、針を使用して値を示しているメータでは、アニメーションを使用して、前の値から次の値に針を “振らす” ことができます。メータでアニメーションがサポートされている場合、この属性は、アニメーションをオンにする (True) か、オフにする (False) かを制御します。既定は "True" です。 この属性で基本となるデータ型は %ZEN.Datatype.booleanOpens in a new tab です。“Zen 属性のデータ型” を参照してください。 |
controllerId | このメータのデータを指定するデータ・コントローラを表します。controllerId の値は、その <dataController> コンポーネントに指定した id 値と一致している必要があります。詳細は、“モデル・ビュー・コントローラ” の章を参照してください。 |
dataBinding | このメータをデータ・コントローラに関連付けている場合、この属性は、このコントロールの値を指定する、<dataController> の modelClass に属する特定のプロパティを表します。 詳細は、“モデル・ビュー・コントローラ” の章を参照してください。 |
label |
メータのテキスト・ラベル。 この属性に普通のテキストを入力できる場合でも、基本となるデータ型 %ZEN.Datatype.captionOpens in a new tab が与えられます。“Zen 属性のデータ型” を参照してください。 |
labelStyle | SVG の CSS スタイル定義。SVG で使用するスタイルは CSS に準拠していますが、CSS にはないスタイルのセットもあります。このメータをレイアウトするとき、label のテキストにこのスタイルが適用されます。 |
onnotifyView |
メータの onnotifyView イベント・ハンドラ。“Zen コンポーネントのイベント・ハンドラ” を参照してください。この属性は、メータがデータ・コントローラに関連付けられている場合に適用されます。このメータに接続されたデータ・コントローラがイベントを発生するたびに、Zen によってこのハンドラが呼び出されます。詳細は、“モデル・ビュー・コントローラ” の章を参照してください。 |
rangeLower | このメータの下限値を定義する整数または小数値。既定値は 0 です。 |
rangeUpper | このメータの上限値を定義する整数または小数値。既定値は 100 です。 |
scaleFactor | このメータに指定された値を一定の比率で調整するために使用する整数または小数値。調整した入力値は rangeLower や rangeUpper などと比較されます。既定値は 1 (調整なし) です。 |
thresholdLower | メータの動作に適用するしきい値を定義する整数または小数値。メータの値がしきい値を下回ると、メータは指定された動作を行います。通常、thresholdLower 値を rangeLower よりも大きい値に設定することで、メータの値が rangeLower に近づいていることを警告できます。既定値は 0 です。 |
thresholdUpper | メータの動作に適用するしきい値を定義する整数または小数値。メータの値がしきい値を越えると、メータは指定された動作を行います。通常、thresholdUpper 値を rangeUpper よりも小さい値に設定することで、メータの値が rangeUpper に近づいていることを警告できます。既定値は 90 です。 |
value | メータの現在値を表す整数または小数値 (実際は、文字列として格納されます)。ページにメータを配置したままこの値を設定することは可能ですが、通常、このようなことは行いません。その代わり、このテーブルの前に説明したとおり、getComponentById と setValue を使用するか、このメータを %ZEN.Auxiliary.dataControllerOpens in a new tab と関連付けます。 |
<fuelGauge>
燃料計は左から右に動く針の付いた、細い縦型のメータで、特定範囲内の値を表します。このメータの範囲には均等にマーク、つまり “目盛り” が設けられます。このメータの属性 rangeLower と rangeUpper は範囲を定義し、rangeLower の値はメータの左下、rangeUpper の値は右下を表します。
燃料計の中央にあるテキスト・ボックスには現在の値が表示されます。
このメータの左上または右上で、目盛りの上に警告灯の表示を指定できます。針が特定の値に近づくに従って、該当の警告灯は色を変えます。右側の警告灯の色は、メータの値が thresholdUpper に近づいたとき、またはこの値を超えたときに変わります。左側の警告灯の色は、メータの値が thresholdLower に近づいたとき、またはこの値を下回ったときに変わります。既定の設定が 0 の thresholdLower 警告灯は常に存在します。範囲の上限にも警告灯を表示する場合は、thresholdUpper 値を指定する必要があります。
<fuelGauge> には以下の属性があります。
属性 | 説明 |
---|---|
メータの属性 | <fuelGauge> は、あらゆるメータと同じ汎用属性を持ちます。詳細は、“メータの属性” を参照してください。 |
highLampColor |
CSS カラー値を指定した文字列。これは、<fuelGauge> の value が thresholdUpper を超えたときに表示される色です。既定値は、陰影付けにより “グロー” 効果を持つ、以下の定義済み Zen カラーです。 url(#glow-red) %ZEN.SVGComponent.svgPageOpens in a new tab クラスでは、グロー・カラーがいくつか定義されています。“<svgFrame>” は、svgPage 属性を介して、このクラスまたはこのクラスのサブクラスを常に参照するため、これらのカラーはフレーム内のどの SVG コンポーネントでも常に使用できます。 |
logo |
メータの表面に表示されるテキスト・ラベル (上の図にある "Zen" に似たテキスト)。 この属性に普通のテキストを入力できる場合でも、基本となるデータ型 %ZEN.Datatype.captionOpens in a new tab が与えられます。“Zen 属性のデータ型” を参照してください。 |
lowLampColor |
CSS カラー値を指定した文字列。これは、<fuelGauge> の value が thresholdUpper を超えたときに表示される色です。既定値は、以下の定義済み Zen カラーです。 url(#glow-red) |
<indicatorLamp>
インジケータ・ランプは、メータの value に応じて、塗りつぶしパターンが変化する長方形のバーです。 基本的に、値がthresholdUpper より上、thresholdLower より下、およびこれら 2 つの値の間という 3 つの状態があります。
メータが label 属性を持つ場合、そのテキストはインジケータ・ランプの中央に、labelStyle で定義されたスタイルで表示されます。
<indicatorLamp> には以下の属性があります。
属性 | 説明 |
---|---|
メータの属性 | <indicatorLamp> は、あらゆるメータと同じ汎用属性を持ちます。詳細は、“メータの属性” を参照してください。 |
highStyle |
SVG の CSS スタイル定義。<indicatorLamp> の value が thresholdUpper を超えたときの塗りつぶしスタイルを指定します。highStyle には、塗りつぶしの値を指定する必要があります。指定しないと、このシェイプ内部でマウス・イベントが正しく動作しません。既定の highStyle は、以下の陰影付けにより “グロー” 効果をもたらす定義済み Zen カラーを使用します。 "fill: url(#glow-green);" %ZEN.SVGComponent.svgPageOpens in a new tab クラスでは、グロー・カラーがいくつか定義されています。“<svgFrame>” は、svgPage 属性を介して、このクラスまたはこのクラスのサブクラスを常に参照するため、これらのカラーはフレーム内のどの SVG コンポーネントでも常に使用できます。 |
lowStyle |
SVG の CSS スタイル定義。<indicatorLamp> の value が thresholdLower に満たない場合の塗りつぶしスタイルを指定します。lowStyle には、塗りつぶしの値を指定する必要があります。指定しないと、このシェイプ内部でマウス・イベントが正しく動作しません。既定値 lowStyle は、以下の定義済み Zen カラーを使用します。 "fill: url(#glow-red);" |
normalStyle |
SVG の CSS スタイル定義。<indicatorLamp> の value が thresholdLower と thresholdUpper の間にあるときの塗りつぶしスタイルを指定します。normalStyle には、塗りつぶしの値を指定する必要があります。指定しないと、このシェイプ内部でマウス・イベントが正しく動作しません。既定値 normalStyle は、以下の定義済み Zen カラーを使用します。 "fill: url(#glow-blue);" |
<lightBar>
ライト・バーは、複数のランプを縦に積み重ねた垂直のバーです。ライト・バーは信号機に似ていますが、多数のランプが並んでいて、表示範囲の中で値が変化する様子を確認できます。
ライト・バーの表示は、値が最小のときは “オフ” に、最大のときはすべて点灯するようになっています。バーの色は緑 (スケールの最下部) から黄色を経由して、赤 (スケールの最上部) に変化し、値が大きいときは作業を中止し、問題に対処する必要があることを表します。
値が低いときに注意が必要な場合もあります。この場合、rangeLower と rangeUpper の値を逆にすれば、ライト・バー表示の意味を逆転できます。この場合、ランプがすべて点灯している場合は値が低く、ランプが “オフ” のときは値が高いことを表します。
警告灯は、ライト・バーの左上隅または左下隅に表示されます。左上隅にある警告灯の色は、メータの値が thresholdUpper に近づいたとき、またはその値を超えたときに変わります。左下隅にある警告灯の色は、メータの値が thresholdLower に近づいたとき、またはその値を下回ったときに変わります。警告灯の色は指定できますが、ライト・バー自体の色 (緑、黄色、赤) は変更できません。
rangeLower と rangeUpper を逆にするときは、同時に thresholdUpper と thresholdLower を逆にしないでください。
<lightBar> には以下の属性があります。
属性 | 説明 |
---|---|
メータの属性 | <lightBar> は、あらゆるメータと同じ汎用属性を持ちます。詳細は、“メータの属性” を参照してください。 |
highLampColor |
CSS カラー値を指定した文字列。これは、<lightBar> の value が thresholdUpper を超えたときに表示される色です。既定値は、陰影付けにより “グロー” 効果を持つ、以下の定義済み Zen カラーです。 url(#glow-red) %ZEN.SVGComponent.svgPageOpens in a new tab クラスでは、グロー・カラーがいくつか定義されています。“<svgFrame>” は、svgPage 属性を介して、このクラスまたはこのクラスのサブクラスを常に参照するため、これらのカラーはフレーム内のどの SVG コンポーネントでも常に使用できます。 |
lowLampColor | CSS カラー値を指定した文字列。これは、<lightBar> の value が thresholdLower を下回ったときに表示される色です。既定値は、url(#glow-red) という定義済み Zen カラーです。 |
<slider>
スライダは針を使用して最下部の rangeLower 値と最上部の rangeUpper 値の間の値を示す縦型のメータです。ユーザは、メータとの対話操作でその value を編集できます。それには、マウスを使用して針を上下にドラッグするか、スライダの最上部および最下部にある矢印をクリックして目盛り上で value をインクリメントします。
<slider> には以下の属性があります。
属性 | 説明 |
---|---|
メータの属性 | <slider> は、あらゆるメータと同じ汎用属性を持ちます。詳細は、“メータの属性” を参照してください。 |
constrained |
True の場合、スライダの value は スライダに表示された最も近い目盛りに制限されます (数値が丸められます)。False の場合、スライダの value は rangeLower と rangeUpper を基準とした針の正確な位置に基づいて決まります。既定値は True です。 この属性で基本となるデータ型は %ZEN.Datatype.booleanOpens in a new tab です。“Zen 属性のデータ型” を参照してください。 |
tickMarks | rangeLower と rangeUpper の間に表示される目盛りの数。最小値は 0、既定値は 10 です。 |
<smiley>
スマイリーは黄色の丸に 2 つの目と口を描いた笑顔のマークです。口を表すラインは、メータの value に応じて変化します。メータの値が rangeUpper に近いとき、口は笑顔ですが、rangeLower と rangeUpper の中間点では直線になり、rangeLower の近くでは「への字」になります。これは、値が大きいときが好ましい状況で、値が小さいときが好ましくない状況である場合に便利です。
rangeLower と rangeUpper の値を逆にすれば、スマイリー表示の意味を逆転できます。この場合、値が低いときは笑顔、高いときは不満な顔になります。
<smiley> は、あらゆるメータと同じ汎用属性を持ちます。詳細は、“メータの属性” を参照してください。<smiley> は、しきい値の属性をすべて無視します。
<speedometer>
速度計は円形のメータで、針は左下から右下まで回転し、特定の範囲にある値を表します。このメータの範囲には均等にマーク、つまり “目盛り” が設けられます。このメータの属性 rangeLower と rangeUpper は範囲を定義し、rangeLower の値はメータの左下、rangeUpper の値は右下を表します。
既定では、速度計の中央にあるテキスト・ボックスに現在の値が表示されます。速度計の表示から独立した制御値をこのテキスト・ボックスに表示することもできます。このためには、independentOdometer 属性および odometerValue 属性を使用します。
このメータの左下または右下に警告灯が表示されるように指定することが可能です。針が特定の値に近づくに従って、該当の警告灯は色を変えます。右側の警告灯の色は、メータの値が thresholdUpper に近づいたとき、またはこの値を超えたときに変わります。左側の警告灯の色は、メータの値が thresholdLower に近づいたとき、またはこの値を下回ったときに変わります。
<speedometer> には以下の属性があります。
属性 | 説明 |
---|---|
メータの属性 | <speedometer> は、あらゆるメータと同じ汎用属性を持ちます。詳細は、“メータの属性” を参照してください。 |
highLampColor |
CSS カラー値を指定した文字列。これは、<speedometer> の value が thresholdUpper を超えたときに表示される色です。既定値は、陰影付けにより “グロー” 効果を持つ、以下の定義済み Zen カラーです。 url(#glow-red) %ZEN.SVGComponent.svgPageOpens in a new tab クラスでは、グロー・カラーがいくつか定義されています。“<svgFrame>” は、svgPage 属性を介して、このクラスまたはこのクラスのサブクラスを常に参照するため、これらのカラーはフレーム内のどの SVG コンポーネントでも常に使用できます。 |
independentOdometer |
True の場合、このメータの中央にあるテキスト・ボックスには、針が示す値とは別の値を表示できます。False の場合、このテキスト・ボックスには針が示す値が表示されます。既定値は False です。 この属性で基本となるデータ型は %ZEN.Datatype.booleanOpens in a new tab です。“Zen 属性のデータ型” を参照してください。 |
logo |
メータの表面に表示されるテキスト・ラベル (上の図にある "Zen" に似たテキスト)。 この属性に普通のテキストを入力できる場合でも、基本となるデータ型 %ZEN.Datatype.captionOpens in a new tab が与えられます。“Zen 属性のデータ型” を参照してください。 |
lowLampColor | CSS カラー値を指定した文字列。これは、<speedometer> の value が thresholdLower を下回ったときに表示される色です。既定値は、url(#glow-red) という定義済み Zen カラーです。 |
odometerValue | independentOdometer が True の場合に、メータの中央にあるテキスト・ボックスに表示される値です。 |
<trafficLight>
信号機は、3 つの円形のランプを縦に並べたものです。ランプの色は上から下に赤、黄、緑です。
メータの値が thresholdLower 以下の場合、一番下のランプが緑色で点灯します。値が thresholdLower より上、thresholdUpper 未満の場合は、中央のランプが黄色に、thresholdUpper 以上の場合は一番上のランプが赤色に点灯します。これは、値が大きいときに注意が必要である場合に便利です。
値が低いときに注意が必要な場合もあります。この場合、rangeLower と rangeUpper の値を逆にすれば、信号機の意味を逆転できます。この場合、赤のランプが点灯している場合は値が低く、緑のランプが点灯している場合は値が高いことを表します。
<trafficLight> は、あらゆるメータと同じ汎用属性を持ちます。詳細は、“メータの属性” を参照してください。width を height の半分にすると、<trafficLight> の外観が見やすくなります。信号機のライトの色は変更できません。
グラフ
グラフは、複数の連続するデータ・ポイントを表す SVG コンポーネントです。Zen には、折れ線グラフ、棒グラフ、円グラフなど、組み込みのグラフ・タイプが数種類用意されています。グラフは SVG コンポーネントなので、この章で説明した SVG の layout および style の特性を備えています。また、グラフには独自の属性も多数あります。詳細は、“Zen のグラフ” の章を参照してください。
<ownerDraw>
<ownerDraw> は空の SVG コンポーネントであり、そのコンテンツは、SVG のコンテンツを提供する実行時コールバック・メソッドを呼び出すことにより動的に挿入されます。<ownerDraw> には以下の属性があります。
属性 | 説明 |
---|---|
SVG コンポーネントの属性 | <ownerDraw> は、あらゆる SVG コンポーネントと同じ汎用属性を持ちます。詳細は、“SVG コンポーネントの属性” を参照してください。 |
onrender |
<ownerDraw> の onrender イベント・ハンドラ。“Zen コンポーネントのイベント・ハンドラ” を参照してください。このメソッドは、そのページに SVG コンポーネントを表示する文を指定します。 |
以下は <ownerDraw> 要素の例です。
<ownerDraw id="owner1"
height="200" width="400"
onrender="zenPage.doOwnerDraw(zenThis);"/>
上記の例では、JavaScript 式により、引数として <ownerDraw> オブジェクトを使用して、ページ・クラスの doOwnerDraw メソッドが呼び出されます。この式は、組み込み変数 zenPage を持つページ、および組み込み変数 zenThis を持つ <ownerDraw> オブジェクトを表します。ページ・クラスの他の場所では、doOwnerDraw メソッドは以下のようになります。
ClientMethod doOwnerDraw(svg) [ Language = javascript ]
{
// clear contents of ownerDraw component
svg.unrender();
// create a line; add it to the svg component
for (var n = 0; n < 30; n++) {
var line = svg.document.createElementNS(SVGNS,'line');
line.setAttribute('x1',200);
line.setAttribute('y1',100);
line.setAttribute('x2',Math.random() * 400);
line.setAttribute('y2',Math.random() * 200);
line.setAttribute('style','stroke: blue; stroke-width: 2;');
svg.svgGroup.appendChild(line);
}
}
<ownerDraw> の例は、SAMPLES ネームスペースの、ZENDemo.SVGBrowserOpens in a new tab と ZENTest.SVGOwnerDrawTestOpens in a new tab の各ページ・クラスにあります。
カスタム SVG コンポーネントを作成することも可能です。"Zen アプリケーションの開発" の “カスタム・コンポーネント” の章を参照してください。