Skip to main content

This is documentation for Caché & Ensemble. See the InterSystems IRIS version of this content.Opens in a new tab

For information on migrating to InterSystems IRISOpens in a new tab, see Why Migrate to InterSystems IRIS?

グラフ・ウィジェットの外観のカスタマイズ

DeepSee には、グラフ・ウィジェットの外観のカスタマイズに使用できるオプションが豊富に用意されています。これらのオプションにアクセスするには、ダッシュボード・エディタにアクセスし、“ウィジェットの再構成” の説明に従ってウィジェットを選択して、[グラフとピボット] セクションのオプションを使用します。以下のサブメニューは、グラフの外観に影響します。

  • [グラフの設定]→[グラフ・タイプ] — グラフ・タイプを選択できます。

  • [グラフの設定]→[サイズと外観]グラフ全体を制御するためのオプションを提供します。

  • [グラフの設定]→[タイトルとラベル] — グラフ上のタイトルとラベルのテキストとフォーマット設定を制御するためのオプションを提供します。

  • [グラフの設定]→[データなしの警告] — 表示するデータがない場合のオプションの警告を制御するためのオプションが用意されています。

  • [グラフの設定]→[色とスタイル] — グラフ内の色と線のスタイルを制御するためのオプションを提供します。

  • [グラフの設定]→[x 軸] — グラフの x 軸のテキストとフォーマット設定を制御するためのオプションを提供します。

  • [グラフの設定]→[y 軸] — グラフの 1 つまたは複数の y 軸のテキストとフォーマット設定を制御するためのオプションを提供します。

  • [グラフの設定]→[系列の詳細] — 各系列 (データ・ソースの行) の表示方法をカスタマイズするためのオプションを提供します。

  • [グラフの凡例]グラフの凡例の無効化、有効化、およびカスタマイズのためのオプションを提供します。

以下のサブセクションで詳細を説明します。

Note:

ダッシュボードの外観を体系的に変更する最も簡単な方法は、テーマを定義して使用することです。これについては、“テーマの定義と使用” で説明します。テーマでは、以降の多くのサブセクションで説明するオプションを使用します。

サイズと外観のオプション

グラフの全体的なサイズと外観をカスタマイズするには、ダッシュボード・エディタにアクセスし、“ウィジェットの再構成” の説明に従ってウィジェットを選択して、[グラフの設定]→[サイズと外観] をクリックし、そこに表示されているオプションを使用します。以下のオプションを使用できます。

  • [余白] — このサブメニューを使用して、グラフの余白をカスタマイズします。[上][左][右]、および [下] の各スライダを使用して、上余白、左余白、右余白、および下余白を個別に制御します。各余白について、[単位] 設定を使用して、ウィジェット・サイズに占める割合として余白を指定するか、ピクセル単位で余白を指定します。

    または、[単位][自動] と指定して、既定の余白を使用します。

  • [複数] — 系列 (データ・ソースの行) ごとに 1 つのグラフを表示する場合は、このオプションを選択します。以下はその例です。

    generated description: chart multiples

    円グラフおよびツリー・マップの場合に、このオプションの使用をお勧めします。

  • [ピボット] (x 軸と y 軸を持つグラフにのみ適用) — x 軸と y 軸を切り替える場合は、このオプションを選択します。

  • [積み重ね] (x 軸と y 軸を持つグラフにのみ適用) — 積み重ね形式で系列 (データ・ソースの行) を表示する場合は、このオプションを選択します。以下はその例です。

    generated description: chart stacked

    このオプションによって影響を受けるのは、棒グラフとして表示される系列のみです。

  • [塗りつぶし] (折れ線グラフと面グラフにのみ適用) — グラフ上の系列の線の下側の領域を塗りつぶすかどうかを制御する場合は、このオプションを選択します。

  • [見栄え] — このオプションを使用して、3 次元の外観でグラフを表示するかどうかを制御します。以下はその例です。

    generated description: chart 3d

  • [ズーム] — このオプションを有効にすると、グラフの左下にズーム・ボタンが表示されます。以下はその例です。

    generated description: chart zoom buttons

    このオプションは、x 軸と y 軸を持つグラフにのみ適用されます。

  • [円の高さ] (円グラフにのみ適用) — [見栄え][3D] の場合は、このオプションを使用して円グラフの高さを制御します。以下はその例です。

    generated description: pie height

  • [円のサイズ] (円グラフにのみ適用) — このオプションを使用して、円グラフの半径を制御します。

  • [円の穴のサイズ] (円グラフにのみ適用) — このオプションを使用して、円の中心の穴のサイズを制御します。以下はその例です。

    generated description: pie hole

    既定の穴のサイズは 0 です。

  • [四分区間] (バブル・グラフにのみ適用) — このオプションを選択して、グラフをそれぞれ異なる色を使用した 4 象限に分割します。以下はその例です。

    generated description: bubble chart with quadrants

  • [半径] (バブル・グラフにのみ適用) — このオプションを使用して、バブル・グラフ内のバブルの基本サイズを制御します。

  • [不透明度] (バブル・グラフにのみ適用) — このオプションを使用して、バブル・グラフ内のバブルの不透明度を制御します。

  • [回帰] (バブル・グラフにのみ適用) — このオプションを選択して、グラフに回帰線を表示します。以下はその例です。

    generated description: bubble chart with regression

  • [分離系列スケール] (スワール・グラフにのみ適用) — 基礎となるピボット・テーブルに複数の列がある場合に扇形のスケーリングを制御します。既定では、このグラフは 1 つのスケールを使用して各扇形のサイズを決定します。ある列の最大値の扇形は、別の列の最大値の扇形とは異なることが多いです (例については、[プロット基準] を参照してください)。

    [分離系列スケール][オン] の場合、このグラフは各列に分離スケールを使用し、以下の例のようにすべての列の最大の扇形は同じサイズになります (この例では Patient Count と Allergy Count の両方を列として使用しています)。

    generated description: swirl separate series scale

  • [反転] (スワール・グラフにのみ適用) — [オン] をクリックすると、中央ではなくグラフの外側の領域にラベルが表示されます。以下はその例です。

    generated description: swirl invert

  • [ギャップ] (スワール・グラフにのみ適用) — このオプションを使用して、扇形の間のギャップのサイズを制御します。以下に、最小ギャップの例を示します。

    generated description: swirl gap zero

  • [プロット基準] (スワール・グラフにのみ適用) — 扇形の色付け方法を制御します。これは、基礎となるピボット・テーブルに複数の列がある場合に特に便利です。[アイテム] をクリックすると、このグラフは、このグラフの基礎になっているピボット・テーブルの同じ行に属しているすべての扇形に類似の色を使用します。例えば、以下のスワール・グラフは、Patient Count と Allergy Count を列に使用しているピボット・テーブルに基づいています。例えば、Sunday には類似の色の扇形が 2 つあり、一方は Patient Count 用、他方は Allergy Count 用です。

    generated description: swirl plotby items

    [系列] をクリックすると、グラフは同じ列に属しているすべての扇形に単一の色を使用するため、列ごとに別の色が使用されるようになります。例えば、以下のスワール・グラフは、[プロット基準] が [系列] に設定されていること以外は前述の例と同じです。

    generated description: swirl plotby series

タイトルとラベルのオプション

グラフのタイトルとラベルをカスタマイズするには、ダッシュボード・エディタにアクセスし、“ウィジェットの再構成” の説明に従ってウィジェットを選択して、[グラフの設定]→[タイトルとラベル] をクリックし、そこに表示されているオプションを使用します。以下のオプションを使用できます。

  • [タイトル] — このオプションを使用して、グラフ内に表示されるオプションのタイトルを指定します。以下はその例です。

    generated description: chart titles

  • [タイトルのスタイル] — このサブメニューを使用して、グラフ・タイトルのスタイルを制御します。以下はその例です。

    generated description: chart title styles

    このドキュメントで前述した “グラフのテキスト・スタイルの指定” を参照してください。

  • [サブタイトル] — このオプションを使用して、グラフ内に表示されるオプションのサブタイトルを指定します。[タイトル] の例を参照してください。

  • [サブタイトルのスタイル] — このサブメニューを使用して、グラフ・サブタイトルのスタイルを制御します。[タイトルのスタイル] の例を参照してください。

    このドキュメントで前述した “グラフのテキスト・スタイルの指定” を参照してください。

  • [タイトルの配置] — このオプションを使用して、グラフのタイトルとサブタイトルの配置を制御します。これらのタイトルは、左揃え、中央揃え、または右揃えに配置できます。

  • [タイトル・ボックス] — このサブメニューを使用して、グラフのタイトルとサブタイトルを囲むオプションのボックスを追加します。以下はその例です。

    generated description: chart title box

    このドキュメントで前述した “線のスタイルの指定” を参照してください。

  • [タイトル・イメージ] — このオプションを使用して、タイトルにオプションのイメージを追加します。以下はその例です。

    generated description: chart title image

    この例では、同時にタイトルが左揃えに配置されています ([タイトルの配置] オプションを参照してください)。

  • [イメージの幅][イメージの高さ][イメージを上]、および [イメージを左] — これらのオプションを使用して、オプションのタイトル・イメージのサイズと位置を制御します。

  • [ラベル] — このオプションを有効にして、グラフの軸にラベルを表示します。以下に、ラベルが表示されたグラフを示します。

    generated description: chart labels and value labels

    この例では、各列の上部に表示されるラベルを制御する [値ラベル] オプションも使用しています。

    このオプションによってどのラベルが制御されるかを理解するために、グラフの基礎となるピボット・テーブルの軸によってグラフの軸が決定されることを思い出してください。例えば、前述のグラフは、X 軸 (行) が No Channel、Online、および Retail を表示し、Y 軸 (列) が Revenue を表示するピボット・テーブルに基づいています。

  • [ラベルのスタイル] — このサブメニューを使用して、グラフのラベルのスタイルを制御します。以下はその例です。

    generated description: chart label style

    このドキュメントで前述した “グラフのテキスト・スタイルの指定” を参照してください。

  • [ラベルの長さ] — このオプションを使用して、ラベルの最大長を指定します。最大長を超えた部分の文字は切り捨てられます。以下はその例です。

    generated description: chart label length

    この例では、[ラベルの長さ] は 5 です。

  • [軸タイトル] — このサブメニューを使用して、軸タイトルのスタイルを制御します。以下はその例です。

    generated description: chart axis style

    このドキュメントで前述した “グラフのテキスト・スタイルの指定” を参照してください。

    また、x 軸1 つまたは複数の y 軸のスタイルを個別に制御することもできます。

  • [値ラベル] (棒グラフにのみ適用) — このオプションを選択して、各列の上または横にラベルを表示し、列に表示される値を示します。例は、[ラベル][値のスタイル] を参照してください。

  • [値のスタイル] — このサブメニューを使用して、値ラベルのスタイルを制御します。以下はその例です。

    generated description: chart value label style

    この例では、[値の形式] で既定以外のオプション (#.###) も使用しています。次の項目を参照してください。

    このドキュメントで前述した “グラフのテキスト・スタイルの指定” を参照してください。

  • [値の形式] — このオプションを使用して、値ラベルの数値のフォーマット設定を制御します。[値のスタイル] の例を参照してください。

    詳細は、このドキュメントで前述した “数値形式文字列の指定” を参照してください。

データなしの警告

表示するデータがない場合のグラフの外観をカスタマイズするには、“ウィジェットの再構成” の説明に従ってウィジェットを選択して、[グラフの設定]→[データなしの警告] をクリックして、そこに表示されているオプションを使用します。以下のオプションを使用できます。

  • [データなしのメッセージ] — このグラフに表示するデータがない場合に表示するメッセージを入力します。

  • [データがない場合に警告する] — データがない場合に指定されたメッセージを表示するには、[オン] を選択します。このメッセージは、下図に示すようにウィジェット内のボックスに表示されます。既定値は [オフ] です。

  • [背景の不透明度] — 指定されたメッセージが表示されるボックスの背景の不透明度を指定します。1 という値は 100% を意味します。

  • [背景色] — 指定されたメッセージが表示されるボックスの色を選択します。

  • [メッセージの色] — メッセージの色を選択します。

以下に例を示します。

generated description: chartopt nodata

色とスタイルのオプション

グラフ内の色と線のスタイルをカスタマイズするには、ダッシュボード・エディタにアクセスし、“ウィジェットの再構成” の説明に従ってウィジェットを選択して、[グラフの設定]→[色とスタイル] をクリックし、そこに表示されているオプションを使用します。以下のオプションを使用できます。

  • [系列の配色] — 配色 (このグラフに表示される系列に使用する色のセット) を選択します。

  • [バックグラウンド] — このサブメニューを使用して、グラフを囲む背景のスタイルを指定します。以下はその例です。

    generated description: chart parts background

  • [プロット領域] — このサブメニューを使用して、グラフのプロット領域のスタイルを指定します。以下はその例です。

    generated description: chart parts plot area

  • [プロットのスタイル] — このサブメニューを使用して、グラフにプロットされる系列のスタイルを指定します。このサブメニューよって影響を受けるのは、棒グラフ、面グラフ、および円グラフのみです。

    以下はその例です。

    generated description: chart parts plot style

    [プロットのスタイル] メニューでは、すべての系列が同様に処理されます。また、このメニューは、[グラフの設定]→[系列の詳細] のオプションより優先されます。この章で後述する “系列の詳細のオプション” を参照してください。

  • [グリッドのスタイル] — グラフにグリッドを表示する場合、このサブメニューを使用してグリッドのスタイルを指定します。以下はその例です。

    generated description: chart parts grid style

  • [軸線のスタイル] — このサブメニューを使用して、軸線のスタイルを制御します。以下はその例です。

    generated description: chart parts axis style

  • [ベース・ラインのスタイル] — グラフでベース・ラインを使用している場合は、このサブメニューを使用してベース・ラインのスタイルを指定します。

    以下はその例です。

    generated description: chart parts base value

    ベース・ラインを指定するには、次のセクション[ベース値] オプションを参照してください。

  • [線のスタイル] — グラフで線を使用する場合は、このサブメニューを使用してその線のスタイルを指定します。例えば、以下のようにします。

    generated description: chart parts line style

  • [マーカ表示] — グラフでマーカを表示する場合、このオプションを有効にします。

  • [マーカのスタイル] — グラフでマーカを使用する場合は、このサブメニューを使用してマーカのスタイルを指定します。以下はその例です。

    generated description: chart parts marker style

  • [マーカ・サイズ] — マーカを使用する場合は、このオプションを使用してマーカのサイズを変更します。

  • [インジケータ表示] — ユーザがグラフの項目を選択したときに十字が表示されるようにするには、このオプションを有効にします。以下はその例です。

    generated description: chart parts indicator

  • [インジケータのスタイル] — グラフでインジケータを使用する場合は、このサブメニューを使用してインジケータのスタイルを指定します。前の項目を参照してください。

  • [バンドの上限] — バンドとしてスタイル設定されたこの軸の上部領域を定義する値を入力します。以下の例では、[バンドの上限] (60 と指定) と [バンドの下限] (20 と指定) の両方を使用しています。

    generated description: chart parts bands

  • [上限のスタイル] — グラフで上限バンドを使用する場合は、このサブメニューを使用して上限バンドのスタイルを制御します。

  • [バンドの下限] — バンドとしてスタイル設定されたこの軸の下部領域を定義する値を入力します。[バンドの上限] の例を参照してください。

  • [下限のスタイル] — このサブメニューを使用して、下限バンド (存在する場合) のスタイルを制御します。

  • [ストライプ] — このオプションを使用して、この軸にストライプを追加します。以下はその例です。

    generated description: chart parts stripes

    この例では、[ストライプのスタイル] も使用しています。

  • [ストライプのスタイル] — このサブメニューを使用して、ストライプのスタイルを指定します。

  • [境界線のスタイル] — このサブメニューを使用して、グラフの境界線のスタイルを指定します。境界線がプロット領域を囲み、境界線を背景が囲みます。以下に例を示します。

    generated description: chart parts border

    この例では、このリストで後述する [境界線の半径] に既定以外のオプションも使用しています。

  • [境界線のオフセット] — このオプションを使用して、背景を基準とした境界線の相対位置を変更します。

  • [境界線の半径] — このオプションを使用して、境界線の角の半径を変更します。既定では、境界線の角は直角です。既定以外の例は、[境界線のスタイル] を参照してください。

  • [データ駆動型の色][条件リスト] オプション — このオプションを使用して、このウィジェットの特定の系列に使用する一連の CSS カラーを指定します。このオプションを使用するには、まず条件リスト・マネージャを使用して ("DeepSee モデルの定義" を参照)、以下のように条件リストを定義します。

    • 各項目のキーは、このウィジェットの系列の正確な表示名であることが必要です。

    • 項目の値は CSS カラー値であることが必要です。有効な任意の CSS カラー名を使用できます。これらについては、https://www.w3.org/TR/css3-color/Opens in a new tab およびインターネットの他の場所を参照してください。

    以下に例を示します。

    generated description: termlist of series colors

    [データ駆動型の色][条件リスト] オプションには、条件リストの正確な名前を入力します。

    ウィジェットの所定の系列の条件がこの条件リストに含まれていない場合、その系列はグレーで表示されます。

    この機能はローカライズをサポートしないことに注意してください。

サブメニューの詳細は、このドキュメントで前述した “線のスタイルの指定” を参照してください。

x 軸のオプション

グラフの x 軸をカスタマイズするには、ダッシュボード・エディタにアクセスし、“ウィジェットの再構成” の説明に従ってウィジェットを選択して、[グラフの設定]→[x 軸] をクリックし、そこに表示されているオプションを使用します。以下のオプションを使用できます。

  • [軸タイトル] — x 軸で使用するタイトルを指定します。既定では、このタイトルはデータ・ソースから取得されます。

  • [主グリッド線] — このオプションを使用して、x 軸上の主要な位置を示す線の表示を有効または無効にします。既定では、これらの線は有効になっています。

  • [主グリッド線のスタイル] — このサブメニューを使用して、x 軸上の主要な位置を示す線のスタイルをカスタマイズします。以下の例では、x 軸と y 軸の両方で [主グリッド線のスタイル] が指定されています。

    generated description: chart major grid styles

    このドキュメントで前述した “線のスタイルの指定” を参照してください。

  • [補助グリッド線] — このオプションを使用して、x 軸上の補助的な位置を示す線の表示を有効または無効にします。既定では、これらの線は無効になっています。以下の例では、x 軸と y 軸の両方でこれらの線が有効になっています。

    generated description: chart minor grid on

  • [補助グリッド線のスタイル] — このサブメニューを使用して、x 軸上の補助的な位置を示す線のスタイルをカスタマイズします。

    このドキュメントで前述した “線のスタイルの指定” を参照してください。

  • [ラベル位置] — x 軸の位置 (上部または下部) を指定します。既定では、この軸は下部にあります。この軸がグラフの上部にある例を以下に示します。

    generated description: chart xaxis top

  • [ラベルのスタイル] — このサブメニューを使用して、x 軸のラベルのスタイルを指定します。以下はその例です。

    generated description: chart xaxis label style

    この例では、[ラベルの角度] オプションも使用しています。

    このドキュメントで前述した “グラフのテキスト・スタイルの指定” を参照してください。

  • [ラベルの角度] — このオプションを使用して、x 軸のラベルの角度を指定します。[ラベルのスタイル] の例を参照してください。

  • [軸タイプ] — 必要に応じ、[%] を選択して x 軸上の値をパーセンテージで表現します。このオプションを選択すると、値に 100 が乗じられ、各値の末尾に % が表示されます。

  • [最小値] — このオプションを使用して、グラフに表示される最小の x 値を指定します。このオプションを使用すると、グラフはこの最小 x 値から始まるように拡大縮小され、この値未満のデータ・ポイントは無視されます。

  • [最大値] — このオプションを使用して、グラフに表示される最大の x 値を指定します。このオプションを使用すると、グラフはこの最大 x 値で終わるように拡大縮小され、この値を超えるデータ・ポイントは無視されます。

  • [ベース値] — このオプションを使用して、指定された値に参照線を追加します。例えば、以下のグラフでは、値 50 に参照線があります。

    generated description: chart parts base value

    この例では、[グラフの設定]→[色とスタイル][ベース・ラインのスタイル] も使用しています。前のセクションを参照してください。

y 軸をカスタマイズする場合も同様のオプションを使用できます。

1 つまたは複数の y 軸のオプション

グラフの 1 つまたは複数の y 軸をカスタマイズするには、ダッシュボード・エディタにアクセスし、“ウィジェットの再構成” の説明に従ってウィジェットを選択して、[グラフの設定]→[y 軸] をクリックし、そこに表示されているオプションを使用します。このメニューには、このグラフに現在定義されている y 軸が表示されます。以下はその例です。

generated description: yaxis submenu

ここでは、以下の操作を実行できます。

  • y 軸の追加。そのためには、プラス記号ボタンをクリックします。y 軸は直ちに追加されます。

  • y 軸の削除。そのためには、その軸の行で [X] ボタンをクリックします。

  • y 軸の再配置。そのためには、軸名の左にある軸ハンドルをドラッグします。

  • y 軸のカスタマイズ。そのためには、軸名をクリックしてオプションのサブメニューを表示します。このサブメニューの詳細は、前のセクションを参照してください。

    [主グリッド線][主グリッド線のスタイル][補助グリッド線][補助グリッド線のスタイル] などの一部のオプションは、主 y 軸に対してのみサポートされています。

系列の詳細のオプション

DeepSee では、系列 (データ・ソース内の行) ごとに適用される一連の既定色が使用されます。これらはオーバーライドできます。折れ線グラフの場合は、データ・ポイントに使用されるマーカをカスタマイズすることもできます。

グラフでの各系列の表示方法をカスタマイズするには、ダッシュボード・エディタにアクセスし、“ウィジェットの再構成” の説明に従ってウィジェットを選択して、[グラフの設定]→[系列の詳細] をクリックし、系列をクリックしてから、そこに表示されているオプションを使用します。

各系列に対して、以下のオプション (グラフ・タイプによって異なる) を変更できます。

  • [色] — この系列の色を指定します。

    色の指定に関する詳細は、このドキュメントで前述した “テーブルのテキスト・スタイルの指定” を参照してください。

  • [y 軸] — この系列を関連付ける y 軸 を指定します (1 または 2 のいずれか)。

    既定では、両方の y 軸が同じ位置に表示されます。この位置を変更するには、[グラフの設定]→[y 軸][ラベル位置] オプションの説明を参照してください。

  • [プロット・タイプ] (コンボ・グラフ) — この系列で使用するプロット・タイプを指定します。

  • [マーカの形状] (折れ線グラフ面グラフコンボ・グラフ、および時間グラフ) — この系列に表示されるデータ・ポイントで使用するマーカの形状を指定します。

以下に例を示します。

generated description: chart series details

グラフの凡例のオプション

グラフの凡例をカスタマイズするには、ダッシュボード・エディタにアクセスし、“ウィジェットの再構成” の説明に従ってウィジェットを選択して、[グラフの凡例] をクリックし、そこに表示されているオプションを使用します。以下のオプションを使用できます。

  • [位置] — グラフで凡例を使用する場合は、このオプションを選択して凡例の位置を指定します。[右][左][上部][下部]、または [なし] を選択します。

  • [タイトル] — グラフの凡例に表示するタイトルを指定します (グラフ定義に基づいた既定のタイトルを指定変更する場合)。

  • [タイトルの表示] — グラフの凡例のタイトルを表示するには、[オン] を選択します。非表示にするには、[オフ] を選択します。

  • [境界線] — このサブメニューを使用して、グラフの凡例を囲む境界線を指定します。以下に例を示します。

    generated description: chart legend background border

  • [バックグラウンド] — グラフの凡例の背景の色を指定します。上記の例を参照してください。

  • [不透明度] — グラフの凡例の不透明度を指定します。1 という値は 100% を意味します。

  • [フォント] — グラフの凡例の書体を指定します。

  • [フォント・サイズ] — グラフの凡例のテキストのサイズを指定します。

  • [テキスト色] — グラフの凡例のテキストの色を指定します。このオプションとその他のスタイル・オプションを使用する例を以下に示します。

    generated description: chart legend style

  • [テキスト・スタイル] — グラフの凡例のテキストのスタイルを指定します。

  • [パディング] — 凡例の前後の水平方向および垂直方向のパディングを指定します。

  • [幅] — 凡例の幅を指定します。

  • [高さ] — 凡例の高さを指定します。

  • [ボックスの影の表示] — 凡例の各ボックスに薄い影を表示するかどうかを指定します。既定では、この影は表示されます。次の拡大図に例を示しています。

    generated description: legend box shadow default

    [ボックスの影の表示][オフ] の場合は、同じ凡例が次のように表示されます。

    generated description: legend box shadow off

FeedbackOpens in a new tab