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

Anchor
top
top

Table of Contents
classcontents

概要

Styleclass
ClasstopLink

ページトップ

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



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

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





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

Styleclass
ClasstopLink

ページトップ

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



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



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

Styleclass
ClasstopLink

ページトップ

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

Tip

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



Section


Column
width40%


Column
width60%

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

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

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

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

枠線の色

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

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

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

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

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

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

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

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

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






horizontalrule

Styleclass
ClasstopLink

ページトップ