ダッシュボードグラフィックス

概要

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

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

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

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

画面の左側のグラフィックスボタンをクリックして、パネルを展開します。
（図形や線、アイコンなど）パネル内の任意の項目を展開し、ダッシュボードキャンバスの任意の箇所に選択したウィジェットをドラッグします。
プロパティパネルから、グラフィックスウィジェットをカスタマイズできます。このパネルはウィジェットを選択することで、画面の右側に表示されます。図形、線、アイコンウィジェットに適用できるカスタマイズのタイプについては、以下のプロパティ項目を参照してください。
このウィジェットがクリックされたときにトリガーになるアクションイベントを追加することもできます。より詳細な情報は、以下レポートのプロパティで「アクション」項目を参照してください。
右クリックをして表示されるメニューを使用することで、さらなるオプションを利用できます。メニューオプションについて、より詳細な情報は、こちらを参照してください。

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

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

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

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

プロパティの名前	説明
塗りつぶしの色	図形内部の色を選択します。注意：矢印のような線では、矢印の頭の色を指定します。
枠線の色	選択した図形の枠線、または境界線の色を定義します。注意：矢印のような線では、矢印の線や本体の色を指定します。
枠線の幅	図形の枠線や境界線の太さを定義します。
塗りつぶしの不透明度	選択した図形の（内側）色の不透明度を指定します。数字が大きいほど、色が濃くなります。
サイズと位置
X	ダッシュボードキャンバスに正確に配置するために、グラフィックスウィジェットの左上隅のX座標を指定します。
Y	ダッシュボードキャンバスに正確に配置するために、グラフィックスウィジェットの左上隅のY座標を指定します。
幅	現在選択しているウィジェットの幅をピクセル単位で指定することで、正確にサイズを変更します。
高さ	現在選択しているウィジェットの高さをピクセル単位で指定することで、正確にサイズを変更します。
角の丸み	こちらのオプションは、ウィジェットの境界線の角の丸みを定義します。ヒント：角の丸みを最大にするには、ウィジェットの高さの半分の値を設定します。例えば、高さが130ピクセルの場合、角の値を65ピクセルに設定します。さらに、角の値を65より大きくしたとしても、今回の例ではこれ以上の効果はありません。
回転	選択したグラフィックスウィジェットを右回りに回転する角度を指定します。
アスペクト比	こちらのトグルを有効にして、アスペクト比を維持します。これにより、グラフィックスウィジェットのサイズを拡大したり、縮小したりしても、その形状が維持されます。（幅と高さの関係）こちらが無効の場合、グラフィックスウィジェットは横、または縦方向に引き伸ばされます。
ウィジェットを固定	こちらのトグルを有効にして、グラフィックスウィジェットの位置を固定します。これにより、ウィジェットの移動やサイズの変更はできなくなります。これは、キャンバス上で複数のウィジェットを選択している場合にも適用されます。グラフィックスウィジェットは引き続きカスタマイズできることに注意してください。
背景の書式
背景色	グラフィックスウィジェットの背景色を指定します。これは、図形そのものをを除く、ウィジェット内のエリアが対象です。
不透明度	ウィジェットの背景色の不透明度を指定します。
内側の余白の詳細設定	こちらのオプションを有効にすることで、余白のカスタマイズや、ウィジェットの周りのバッファをピクセル単位で定義します。これには、ウィジェットの両側の余白が含まれます。こちらの設定が無効の場合、全体的な余白サイズを定義できます。
内側の余白：上	内側の余白の詳細設定が有効な場合、ウィジェットの上部に追加する余白を定義します。
内側の余白：下	内側の余白の詳細設定が有効な場合、ウィジェットの下部に追加する余白を定義します。
内側の余白：右	内側の余白の詳細設定が有効な場合、ウィジェットの右側に追加する余白を定義します。
内側の余白：左	内側の余白の詳細設定が有効な場合、ウィジェットの左側に追加する余白を定義します。
内側の余白	グラフィックスウィジェットの全体的な余白サイズを定義します。ピクセル単位で定義するこちらのサイズは、ウィジェットの各サイドで一定になります。任意のサイドに異なる余白サイズを設定する場合は、内側の余白の詳細設定を有効にします。
境界線の幅	ウィジェットの境界線の太さを指定します。注意：境界線を表示するには、3つの境界線プロパティすべてに値を定義しなくてはいけません。
境界線のスタイル	ウィジェットの境界線のスタイルを選択します。選択肢は、次の通りです。破線、実線、点線など。
境界線の色	ウィジェットの境界線の色を指定します。
影のX方向の位置	こちらのオプションは、そのサイズをピクセル単位で定義することで、X方向に影を投影します。
影のY方向の位置	こちらのオプションは、そのサイズをピクセル単位で定義することで、Y方向に影を投影します。
影のぼかし	こちらのオプションは、影の鮮明さを定義します。値が小さくなるにつれて、鮮明さが増し、影が濃くなります。影をぼかす場合は、大きな値を定義します。
影の色	こちらのオプションは、影に色を設定します。
アクション
クリックイベント	選択したウィジェットがクリックされたときに、トリガーになるイベントを選択します。イベントの選択肢は、次の通りです。なし：ウィジェットをイベントのトリガーにしない場合は、こちらを使用します。次のサブタブ：同じダッシュボード内で次のタブへ移動します。前のサブタブ：同じダッシュボード内で前のタブへ移動します。フィルターのリセット：フィルター選択をクリア、またはデフォルト値が設定されている場合は、フィルターをデフォルト値にリセットします。ダッシュボードのリセット：ユーザーが実行したすべてのインタラクションのクリアや、適用されたすべてのフィルターを削除することで、ダッシュボードを更新します。レポートへ移動：指定したレポートへ移動します。移動先のレポートは、レポートUUIDを提供することで、指定できます。サブタブへ移動：同じダッシュボード内で、順序が指定された任意のサブタブへ移動します。例えば、四番目のサブタブへ移動するには「サブタブ#」項目に4と入力します。サブタブの順序は、1から始まる点に注意してください。 URLへ移動：指定されたURLを使用して、外部リンク、またはページへ移動します。リンク先を新しいタブやウィンドウ、または現在のウィンドウに開くことができます。（より詳細な情報は、以下URLおよびターゲット設定項目を参照してください。）
レポートID	「レポートへ移動」クリックイベントを使用してレポートへ移動する場合は、移動先レポートのUUIDを提供します。
サブタブ#	「サブタブへ移動」クリックイベントを使用してサブタブへ移動する場合は、サブタブの順序を入力します。
URL	「URLへ移動」クリックイベントを使用して外部ページへ移動する場合は、ページの完全URLを提供します。
ターゲット	「URLへ移動」クリックイベントを使用して外部ページへ移動する場合は、ページターゲットを指定します。選択肢は、次の通りです。新規タブ/ウィンドウ：使用しているブラウザ設定に応じて、URLページを新しいタブ、またはウィンドウに開きます。注意：大部分のブラウザのデフォルトはウィンドウですが、コンピューターのショートカットを使用して、新規タブに開くこともできます（Windowsの場合はCtrl、Macの場合はCmd）。現在のウィンドウ：現在のウィンドウにページを開きます。親フレーム：YellowfinがiFrameとして組み込まれている場合、新規ページは親フレーム内で開きます（つまり、そのコンテンツが表示されます）。親フレームとは、Yellowfinフレームが組み込まれいてるフレームです。現在のフレーム：YellowfinがiFrameとして組み込まれている場合、URLページのコンテンツは現在のフレームに開きます。現在のフレームとは、Yellowfinを組み込んでいるフレームです。