30日間の無料評価版をお試しいただけます。

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migration of unmigrated content due to installation of a new plugin

...

Table of Contents
classcontents

概要

...

グラフィックスウィジェットを使用して、事前にデザインされたグラフィックスをダッシュボードに追加します。これは、ウィジェット選択から選択することで図形、矢印、アイコンを追加します。

...

ClasstopLink

...

ページトップ



グラフィックスウィジェットタイプ

グラフィックウィジェットを使用して、事前にデザインされたグラフィックをダッシュボードに追加します。これは、ウィジェット選択から選択することで図形、矢印、アイコンを追加することができます。

グラフィックウィジェットタイプ

名前説明
図形
展開やカスタマイズ、境界として使用できる円や四角といった、キャンバスに追加できる図形のタイプです。
展開やカスタマイズ、境界線として使用できる円や四角といった、キャンバスに追加できる図形のタイプです。
矢印のような、キャンバスに追加できる線のタイプです。
アイコンキャンバスに追加できるアイコンのタイプです。


...



グラフィックウィジェットの使用方法グラフィックスウィジェットの使用方法

Styleclass
ClasstopLink

ページトップ

  1. 画面の左側のグラフィックボタンをクリックして、パネルを展開します。画面の左側のグラフィックスボタンをクリックして、パネルを展開します。
  2. (図形や線、アイコンなど)パネル内の任意の項目を展開し、ダッシュボードキャンバスの任意の箇所に選択したウィジェットをドラッグします。

    Image Added
    Image Removed

  3. プロパティパネルから、グラフィックスウィジェットをカスタマイズできます。このパネルはウィジェットを選択することで、画面の右側に表示されます。図形、線、アイコンウィジェットに適用できるカスタマイズのタイプについては、以下のプロパティ項目を参照してください。
  4. プロパティパネルから、グラフィックウィジェットをカスタマイズできます。このパネルはウィジェットを選択することで、画面の右側に表示されます。図形、線、アイコンウィジェットに適用できるカスタマイズのタイプについては、以下のプロパティ項目を参照してください。
  5. 右クリックをして表示されるメニューを使用することで、さらなるオプションを利用できます。メニューオプションについて、より詳細な情報は、こちらを参照してください。

...

  1. このウィジェットがクリックされたときにトリガーになるアクションイベントを追加することもできます。より詳細な情報は、以下レポートのプロパティで「アクション」項目を参照してください。
  2. 右クリックをして表示されるメニューを使用することで、さらなるオプションを利用できます。メニューオプションについて、より詳細な情報は、こちらを参照してください。


...

グラフィックスのプロパティ

Styleclass
ClasstopLink

ページトップ

以下の表は、カスタマイズに使用できるグラフィックウィジェットのプロパティを示しています。以下の表は、カスタマイズに使用できるグラフィックスウィジェットのプロパティを示しています。

Tip

コードモードのヒント:カスタマイズしたアイコンをコピーして、「fa」classを使用してアイコンのタイプを変更します。例えば、「fa_android」は、「fa_arrow」に切り替えることができます。コードモードはアイコンを変更する唯一の方法です。



Section


Column
width40%

Image RemovedImage Added


Column
width60%

注意:図形、アイコン、線など、選択したグラフィックウィジェットのタイプに応じて、プロパティは若干異なります。図形、アイコン、線など、選択したグラフィックスウィジェットのタイプに応じて、プロパティは若干異なります。

プロパティの名前説明
色を付ける
塗りつぶしの色

図形内部の色を選択します。

注意:矢印のような線では、矢印の頭の色を指定します。

ストロークカラー
枠線の色
選択した図形の外側、または境界の色を定義します。

選択した図形の枠線、または境界線の色を定義します。

注意:矢印のような線では、矢印の線や本体の色を指定します。

ストロークの幅
枠線の幅
図形の外側や境界の太さを定義します。
図形の枠線や境界線の太さを定義します。
不透明度を付ける
塗りつぶしの不透明度選択した図形の(内側)色の不透明度を指定します。数字が大きいほど、色が濃くなります。
サイズと位置
X
ダッシュボードキャンバスに正確に配置するために、図形ウィジェットの左上隅のX座標を指定します。
ダッシュボードキャンバスに正確に配置するために、グラフィックスウィジェットの左上隅のX座標を指定します。
Y
ダッシュボードキャンバスに正確に配置するために、図形ウィジェットの左上隅のY座標を指定します。
ダッシュボードキャンバスに正確に配置するために、グラフィックスウィジェットの左上隅のY座標を指定します。
現在選択しているウィジェットの幅をピクセル単位で指定することで、正確にサイズを変更します。
高さ現在選択しているウィジェットの高さをピクセル単位で指定することで、正確にサイズを変更します。
角の丸み
こちらのオプションは、テキストウィジェットの境界の角の丸みを定義します。ヒント:角の丸みを最大にするには、ウィジェットの高さの半分の値を設定します。例えば、高さが130ピクセルの場合、角の値を65ピクセルに設定します。さらに、角の値を65より大きくしたとしても、今回の例ではこれ以上の効果はありません。
こちらのオプションは、ウィジェットの境界線の角の丸みを定義します。ヒント:角の丸みを最大にするには、ウィジェットの高さの半分の値を設定します。例えば、高さが130ピクセルの場合、角の値を65ピクセルに設定します。さらに、角の値を65より大きくしたとしても、今回の例ではこれ以上の効果はありません。
回転
選択した図形ウィジェットを時計回りに回転する角度を指定します。
選択したグラフィックスウィジェットを右回りに回転する角度を指定します。
アスペクト比
こちらのトグルを有効にして、アスペクト比を維持します。これにより、図形ウィジェットのサイズを大きくしたり、小さくしたりしても、その形状が維持されます。(幅と高さの関係)

こちらのトグルを有効にして、アスペクト比を維持します。これにより、グラフィックスウィジェットのサイズを拡大したり、縮小したりしても、その形状が維持されます。(幅と高さの関係)

こちらが無効の場合、図形ウィジェットは水平、または垂直方向に引き伸ばされます。

こちらが無効の場合、グラフィックスウィジェットは横、または縦方向に引き伸ばされます。

ウィジェットの固定
ウィジェットを固定
こちらのトグルを有効にして、図形ウィジェットの位置を固定します。これにより、ウィジェットの移動やサイズの変更はできなくなります。これは、キャンバス上で複数のウィジェットを選択している場合にも適用されます。図形ウィジェットは引き続きカスタマイズできることに注意してください。
こちらのトグルを有効にして、グラフィックスウィジェットの位置を固定します。これにより、ウィジェットの移動やサイズの変更はできなくなります。これは、キャンバス上で複数のウィジェットを選択している場合にも適用されます。グラフィックスウィジェットは引き続きカスタマイズできることに注意してください。
背景の書式設定
背景の書式
背景色
図形ウィジェットの背景色を指定します。これは、図形そのものをを除く、ウィジェット内のエリアが対象です。
グラフィックスウィジェットの背景色を指定します。これは、図形そのものをを除く、ウィジェット内のエリアが対象です。
不透明度
ウィジェット上の背景色の不透明度を指定します。
ウィジェットの背景色の不透明度を指定します。
余白のカスタマイズ
内側の余白の詳細設定
こちらのオプションを有効にすることで、余白のカスタマイズや、テウィジェットの周りのバッファをピクセル単位で定義します。これには、ウィジェットの両側の余白が含まれます。こちらの設定が無効の場合、全体的な余白サイズを定義できます。
こちらのオプションを有効にすることで、余白のカスタマイズや、ウィジェットの周りのバッファをピクセル単位で定義します。これには、ウィジェットの両側の余白が含まれます。こちらの設定が無効の場合、全体的な余白サイズを定義できます。
上部の余白
内側の余白:上
余白のカスタマイズが有効な場合、ウィジェットの上部に追加する余白を定義します。
内側の余白の詳細設定が有効な場合、ウィジェットの上部に追加する余白を定義します。
下部の余白
内側の余白:下
余白のカスタマイズが有効な場合、ウィジェットの下部に追加する余白を定義します。
内側の余白の詳細設定が有効な場合、ウィジェットの下部に追加する余白を定義します。
右側の余白
内側の余白:右
余白のカスタマイズが有効な場合、ウィジェットの右側に追加する余白を定義します。
内側の余白の詳細設定が有効な場合、ウィジェットの右側に追加する余白を定義します。
左側の余白
内側の余白:左
余白のカスタマイズが有効な場合、ウィジェットの左側に追加する余白を定義します。
内側の余白の詳細設定が有効な場合、ウィジェットの左側に追加する余白を定義します。
余白
内側の余白
図形ウィジェットの全体的な余白サイズを定義します。ピクセル単位で定義するこちらのサイズは、ウィジェットの各サイドで一定になります。任意のサイドに異なる余白サイズを設定する場合は、余白のカスタマイズオプションを有効にします。
グラフィックスウィジェットの全体的な余白サイズを定義します。ピクセル単位で定義するこちらのサイズは、ウィジェットの各サイドで一定になります。任意のサイドに異なる余白サイズを設定する場合は、内側の余白の詳細設定を有効にします。
境界の幅
境界線の幅
ウィジェットの境界の太さを指定します。

ウィジェットの境界線の太さを指定します。

注意:境界を表示するには、3つの境界プロパティすべてに値を定義しなくてはいけません。

注意:境界線を表示するには、3つの境界線プロパティすべてに値を定義しなくてはいけません。

境界のスタイル
境界線のスタイル
ウィジェットの境界のスタイルを選択します。選択肢は、次の通りです。破線、実線、点線、溝、など。
ウィジェットの境界線のスタイルを選択します。選択肢は、次の通りです。破線、実線、点線など。
境界の色
境界線の色
ウィジェットの境界の色を指定します。
ウィジェットの境界線の色を指定します。
水平方向の影
影のX方向の位置
こちらのオプションは、そのサイズをピクセル単位で定義することで、水平方向に影を投影します。
こちらのオプションは、そのサイズをピクセル単位で定義することで、X方向に影を投影します。
垂直方向の影
影のY方向の位置
こちらのオプションは、そのサイズをピクセル単位で定義することで、垂直方向に影を投影します。
こちらのオプションは、そのサイズをピクセル単位で定義することで、Y方向に影を投影します。
影のぼかしこちらのオプションは、影の鮮明さを定義します。値が小さくなるにつれて、鮮明さが増し、影が濃くなります。影をぼかす場合は、大きな値を定義します。
影の色こちらのオプションは、影に色を設定します。
アクション
クリックイベント

選択したウィジェットがクリックされたときに、トリガーになるイベントを選択します。イベントの選択肢は、次の通りです。

  • なし:ウィジェットをイベントのトリガーにしない場合は、こちらを使用します。
  • 次のサブタブ:同じダッシュボード内で次のタブへ移動します。
  • 前のサブタブ:同じダッシュボード内で前のタブへ移動します。
  • フィルターのリセット:フィルター選択をクリア、またはデフォルト値が設定されている場合は、フィルターをデフォルト値にリセットします。
  • ダッシュボードのリセット:ユーザーが実行したすべてのインタラクションのクリアや、適用されたすべてのフィルターを削除することで、ダッシュボードを更新します。
  • レポートへ移動:指定したレポートへ移動します。移動先のレポートは、レポートUUIDを提供することで、指定できます。
  • サブタブへ移動:同じダッシュボード内で、順序が指定された任意のサブタブへ移動します。例えば、四番目のサブタブへ移動するには「サブタブ#」項目に4と入力します。サブタブの順序は、1から始まる点に注意してください。
  • URLへ移動:指定されたURLを使用して、外部リンク、またはページへ移動します。リンク先を新しいタブやウィンドウ、または現在のウィンドウに開くことができます。(より詳細な情報は、以下URLおよびターゲット設定項目を参照してください。)
レポートIDレポートへ移動」クリックイベントを使用してレポートへ移動する場合は、移動先レポートのUUIDを提供します。
サブタブ#サブタブへ移動」クリックイベントを使用してサブタブへ移動する場合は、サブタブの順序を入力します。
URLURLへ移動」クリックイベントを使用して外部ページへ移動する場合は、ページの完全URLを提供します。
ターゲット

URLへ移動」クリックイベントを使用して外部ページへ移動する場合は、ページターゲットを指定します。選択肢は、次の通りです。

  • 新規タブ/ウィンドウ:使用しているブラウザ設定に応じて、URLページを新しいタブ、またはウィンドウに開きます。注意:大部分のブラウザのデフォルトはウィンドウですが、コンピューターのショートカットを使用して、新規タブに開くこともできます(Windowsの場合はCtrl、Macの場合はCmd)。
  • 現在のウィンドウ:現在のウィンドウにページを開きます。
  • 親フレーム:YellowfinがiFrameとして組み込まれている場合、新規ページは親フレーム内で開きます(つまり、そのコンテンツが表示されます)。親フレームとは、Yellowfinフレームが組み込まれいてるフレームです。
  • 現在のフレーム:YellowfinがiFrameとして組み込まれている場合、URLページのコンテンツは現在のフレームに開きます。現在のフレームとは、Yellowfinを組み込んでいるフレームです。






horizontalrule

Styleclass
ClasstopLink

ページトップ