> ## Documentation Index
> Fetch the complete documentation index at: https://domoinc-openapi-sync-dataflows.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# チャートの色のルールを設定する

export const InlineImage = ({src, alt = '', height = '1.6em'}) => {
  return <img noZoom src={src} alt={alt} style={{
    display: 'inline',
    verticalAlign: 'start',
    height: height,
    margin: '0'
  }} />;
};

## はじめに

ユーザーに向けてデータを表示するためのチャートを作成するとき、例外的なデータをハイライトし、一貫した色を使用すると見やすくなります。Analyzerの［色のルール］ツールを使えば、その両方を実現できます。［色のルール］を使用して、チャート内の特定の列に色を適用したり、特定の色を表示する条件を設定したりできます。

例えば、ABC CafeがデフォルトのDomoカラースキームではなく、ビジネスに合ったカスタムスキームを使用したいとします。［色のルール］ダイアログを開き、「Sales」系列の列を赤に設定し、「Profit」系列の列を黒に設定することで、これを行うことができます。

<Frame>
  <img alt="" src="https://mintcdn.com/domoinc-openapi-sync-dataflows/U1MglXZKeJZebGlP/images/kb/ka05w00000123kQ-00N5w00000Ri7BU-0EM5w000005vOyw.png?fit=max&auto=format&n=U1MglXZKeJZebGlP&q=85&s=204161647cf8f462dd79c3c01b5345fd" width="750" height="340" data-path="images/kb/ka05w00000123kQ-00N5w00000Ri7BU-0EM5w000005vOyw.png" />
</Frame>

また、棒グラフの収益値が特定の閾値を下回った場合にすぐに知りたいとします。こうするためには、特定の数値を下回った棒が赤くなるように、値列に色のルールを設定します。この例は、以下のスクリーンショットのように表示されます。

<Frame>
  <img alt="" src="https://mintcdn.com/domoinc-openapi-sync-dataflows/U1MglXZKeJZebGlP/images/kb/ka05w00000123kQ-00N5w00000Ri7BU-0EM5w000005vOyt.png?fit=max&auto=format&n=U1MglXZKeJZebGlP&q=85&s=21c3e8c4267f07a361f1cf027d132261" width="750" height="358" data-path="images/kb/ka05w00000123kQ-00N5w00000Ri7BU-0EM5w000005vOyt.png" />
</Frame>

この例の色のルールは、おおよそ以下の通りです。「製品サブカテゴリーで『Profit』の値が50,000を下回ったら、その製品カテゴリーの棒を赤くする。値が50,000以上なら、デフォルトの色（青）を適用する。」

チャートに色のルールを適用するとき、このカードにのみルールを適用するか、同じDataSetを利用するすべてのカードに適用するかを選択します。すべてのカードに適用すると、同じDataSetにもとづいたすべてのチャートで、同じカスタムカラースキームを使用できます。したがって、最初の例でチャートを作成したユーザーは、このオプションを使用して、このDataSetにもとづくすべてのカードでこのカードのように「Sales」と「Profits」に赤/黒のカラースキームが適用されるようにします。

<Note>
  **注記：** 1つのDataSetにもとづくすべてのカードの変更は、ご自身がDataSetの所有者であるか、「管理者」のセキュリティプロフィールまたは「DataSetを管理」が有効なカスタム権限をお持ちの場合に限り可能です。
</Note>

［色のルール］ツールは、以下を除くすべてのグラフタイプで利用できます。

* すべてのマップ
* すべてのパネル
* 箱ひげ図
* ファネル型棒グラフ
* 横型ファネルグラフ
* ヒートマップ
* カテゴリ散布図
* ローソク足
* 高低線グラフ
* カレンダー

色の「テーマ」を適用することで、マップの色をカスタマイズできます。色のテーマでは、マップデータの様々な範囲を表すために、様々な色合いを使用できます。詳細については、 [マップの色の変更](/s/article/360043429653 "チャートのデフォルトの色を変更する") についてのページを参照してください。

任意のチャートまたは表で、最大100個の色のルールを使用できます。カードレベルのルールとDataSetレベルのルールを合わせて100個まで使用できます。ドリルダウンビューでは、すべての親ビューに含まれるすべての色のルールの組み合わせにこの制限が適用されます。ドリルダウンの詳細については、「 [チャートにドリルパスを追加する](/s/article/360042924094 "チャートにドリルパスを追加する") 」を参照してください。

**動画 - 色のルールを追加する**

<iframe allowfullscreen="" frameborder="0" height="315" src="//www.youtube-nocookie.com/embed/RxZQIjkM01Q" width="560" />

## チャートに色のルールを適用する

色のルールは、Domoの任意のグラフタイプに適用できます。ただし、これを系列データ（複数棒グラフなど）のカテゴリー列や値列で使用することは現在推奨していません。上述の例のように、系列データの列に色のルールを適用することはできます。

チャートに色のルールを設定するには、Analyzerウィンドウ上部にある **［色のルール］** をクリックして、ルールを適用する列を選択し、色（と条件）を設定します。

チャートに色のルールを適用するシナリオは数多く考えられます。ここでは、カスタムの（静的な）色の設定と、条件に応じた動的な色の設定という2つの一般的なユースケースの手順を示します。

### ユースケース#1：色のルールを使用してカスタムの色を設定する

（このトピックの最初の例のように）チャートにカスタムの色を設定する場合は、単一系列チャート（標準の棒グラフや折れ線グラフなど）では *カテゴリー* の列に、複数系列チャート（集合棒グラフや複数折れ線グラフなど）では *系列* の列に適用することを推奨します。カスタムの色を設定する際、値列には色のルールを適用しないようにしてください。

**チャートにカスタムの色を設定するには：**

1. カスタムの色を設定するカードに対して、Analyzerを開きます。

   これを行うには、カードのページビューまたは詳細ビューで **［Analyzerで編集］** を選択するか、詳細ビューで <InlineImage src="/images/kb/ja/ka05w00000128hV-00N5w00000Ri7BU-0EM5w000005vOyu.png" /> をクリックします。

2. （オプション）ウィンドウの上部にAnalyzerツールバーが展開されない場合は、
   <InlineImage src="/images/kb/ja/ka05w00000128hV-00N5w00000Ri7BU-0EM5w000005vOyz.png" /> をクリックして展開します。

3. ツールバーの **［色のルール］** ボタンをクリックします。

4. **［列］** のドロップダウンで、カスタムの色を設定するテキスト列または日付列を選択します。

   <Tip>
     **ヒント：** このチャートに適用した列だけではなく、DataSetの *任意の* 列を選択できます。DataSet列で色のルールを設定する場合、そのDataSetにもとづく任意のチャートでAnalyzerを開き、 **［色のルール］** ダイアログを開き、DataSetの各列に色のルールを設定すると簡単です。設定の保存時には、DataSetにもとづくすべてのカードに新しいルールを適用することができます。DataSetにもとづくすべてのカードに手動で色のルールを設定する必要はありません。
   </Tip>

5. **［条件］** ドロップダウンで以下を行います。

   * テキスト列の場合、ルールを適用するすべての項目についてボックスにチェックを入れます。
   * 日付列の場合：

     1. 目的に合った条件式を選択します。
     2. ルールを適用する日付（日付範囲）を選択します。

6. **［塗りつぶし］** ドロップダウンメニューから希望の色を選択します。

7. （オプション）ルールを追加するには、 **［新規］** をクリックし、ステップ4〜6を繰り返して新しいルールを設定します。

8. （オプション）設定済みのルールを削除するには、ルールの横にある
   <InlineImage src="/images/kb/ja/ka05w00000128hV-00N5w00000Ri7BU-0EM5w000005vOys.png" /> をクリックします。

9. **［次へ］** をクリックします。

10. （条件付き）このDataSetにもとづくすべてのカードにこのルールを適用する場合（上記のヒントも参照してください）、 **［全てのカードに適用する］** をクリックします。1枚だけに適用する場合は、 **［このカードだけに適用する］** をクリックします。

これで、設定済みのルールがこのチャートに適用されます。ステップ10で **［全てのカードに適用する］** を選択した場合は、DataSetにもとづくほかのチャートにも適用されます。

### ユースケース#2：条件にもとづいた動的な色を設定する

値が特定の条件を満たした場合に特定の色が使用されるように、チャートで色のルールを設定できます。これは上記の「製品サブカテゴリーごとの収益」の例に示されています。基準値を下回った棒が赤くなっています。ほかのすべてのユーザーには、デフォルトの青で表示されます。さらに進んで、特定の値を *上回る* 値が緑で表示されるように、同じ列に2つ目のルールを設定することができます。これで「よくない」値を赤で、「よい」値を緑で表示できます。デフォルトの青は使用されなくなります。以下の例で確認できます。100,000以上の値は緑で、100,000未満の値は赤で表示されています。

<Frame>
  <img alt="" src="https://mintcdn.com/domoinc-openapi-sync-dataflows/U1MglXZKeJZebGlP/images/kb/ka05w00000123kQ-00N5w00000Ri7BU-0EM5w000005vOyf.png?fit=max&auto=format&n=U1MglXZKeJZebGlP&q=85&s=d52d880e9d5da69923cb82996612eb31" width="750" height="346" data-path="images/kb/ka05w00000123kQ-00N5w00000Ri7BU-0EM5w000005vOyf.png" />
</Frame>

<Note>
  **注記：** 複数の系列のあるチャート（複数折れ線グラフなど）では推奨しません。
</Note>

**チャートに条件に応じた動的な色を設定するには：**

1. カスタムの色を設定するカードに対して、Analyzerを開きます。

   これを行うには、カードのページビューまたは詳細ビューで **［Analyzerで編集］** を選択するか、詳細ビューで <InlineImage src="/images/kb/ja/ka05w00000128hV-00N5w00000Ri7BU-0EM5w000005vOyu-1.png" /> をクリックします。
2. （オプション）ウィンドウの上部にAnalyzerツールバーが展開されない場合は、
   <InlineImage src="/images/kb/ja/ka05w00000128hV-00N5w00000Ri7BU-0EM5w000005vOz0.png" /> をクリックして展開します。
3. ツールバーの **［色のルール］** ボタンをクリックします。
4. **［列］** ドロップダウンで、色を設定する値列を選択します。
5. **［条件］** ドロップダウンで、メニューから目的に合った条件式を選択し、条件に応じてフィールドに値を入力します。

   例えば、値が50を超えた場合に色を適用する場合、メニューで **［は次よりも>（大きい）：］** を選択して、フィールドに `50` を入力します。
6. この条件を満たした場合に適用される色を選択します。
7. （オプション）同じ値列に追加のルールを設定するには、（上記のように） **［新規］** をクリックし、値列を選択し、新しい列でステップ5〜6を繰り返します。
8. （オプション）設定済みのルールを削除するには、ルールの横にある
   <InlineImage src="/images/kb/ja/ka05w00000128hV-00N5w00000Ri7BU-0EM5w000005vOys-1.png" /> をクリックします。
9. **［次へ］** をクリックします。
10. （条件付き）このDataSetにもとづくすべてのカードにこのルールを適用する場合、 **［全てのカードに適用する］** をクリックします。1枚だけに適用する場合は、 **［このカードだけに適用する］** をクリックします。

これで、設定済みのルールがこのチャートに適用されます。ステップ10で **［全てのカードに適用する］** を選択した場合は、DataSetにもとづくほかのチャートにも適用されます。

## 表に色のルールを適用する

表では、陰影やスタイルオプションなど、追加の書式設定を利用できます。さらに、ルールを特定のセルだけに適用するか、行全体に適用するかも指定できます。

表の行に複数のルールが適用される場合、新しいルールが優先されます。例えば、アメリカ「西部」地域のユーザーが、自分の担当する州の色をすべてターコイズに変更するルールを表に適用しているとします。このユーザーが「Profit」列のマイナス値のセルが赤く表示される2つ目のルールを設定した場合、セルが「西部」地域に含まれるかどうかにかかわらず、このルールはその列の条件を満たす *すべての* セルに適用されます。これは以下の例で「Paper」と「Computer Peripherals」の行で確認できます。

<Frame>
  <img alt="" src="https://mintcdn.com/domoinc-openapi-sync-dataflows/U1MglXZKeJZebGlP/images/kb/ka05w00000123kQ-00N5w00000Ri7BU-0EM5w000005vOz1.png?fit=max&auto=format&n=U1MglXZKeJZebGlP&q=85&s=6c11214232d38d643080f7677ee5f16d" width="750" height="225" data-path="images/kb/ka05w00000123kQ-00N5w00000Ri7BU-0EM5w000005vOz1.png" />
</Frame>

**表の色のルールを設定するには：**

1. カスタムの色を設定するカードに対して、Analyzerを開きます。

   これを行うには、カードのページビューまたは詳細ビューで **［Analyzerで編集］** を選択するか、詳細ビューで <InlineImage src="/images/kb/ja/ka05w00000128hV-00N5w00000Ri7BU-0EM5w000005vOyu-2.png" /> をクリックします。

2. （オプション）ウィンドウの上部にAnalyzerツールバーが展開されない場合は、
   <InlineImage src="/images/kb/ja/ka05w00000128hV-00N5w00000Ri7BU-0EM5w000005vOz0-1.png" /> をクリックして展開します。

3. ツールバーの **［色のルール］** ボタンをクリックします。

4. **［列］** のドロップダウンで、カスタムの色を設定する列を選択します。

   <Tip>
     **ヒント：** このチャートに適用した列だけではなく、DataSetの *任意の* 列を選択できます。DataSet列で色のルールを設定する場合、そのDataSetにもとづく任意のチャートでAnalyzerを開き、 **［色のルール］** ダイアログを開き、DataSetの各列に色のルールを設定すると簡単です。設定の保存時には、DataSetにもとづくすべてのカードに新しいルールを適用することができます。DataSetにもとづくすべてのカードに手動で色のルールを設定する必要はありません。
   </Tip>

5. **［条件］** ドロップダウンで、メニューから目的に合った条件式を選択し、条件に応じてフィールドに値を入力します。

   例えば、値が50を超えた場合に色を適用する場合、メニューで **［は次よりも>（大きい）：］** を選択して、フィールドに `50` を入力します。

   （列のすべての行に色を適用したい場合など）条件を指定しない場合は、デフォルトメニューの設定 **［含む（任意）：］** のままにします。

6. この条件を満たした場合に適用される色を選択します。

7. **［表のテキスト］** メニューで、テキストと背景の色オプションを希望に合わせて選択します。

8. **［表のテキストスタイル］** メニューで、テキストスタイルを希望に合わせて選択します。

9. （条件付き）この色を条件に合ったすべての行に適用するには、 **［表の行にフォーマットを適用する］** のボックスにチェックを入れます。条件に合ったセルのみに色を適用し、関連づけられた行全体には適用しない場合は、このボックスにチェックを入れないでください。

10. （オプション）ルールを追加するには、 **［新規］** をクリックし、ステップ4〜9を繰り返して新しいルールを設定します。

11. （オプション）設定済みのルールを削除するには、ルールの横にある
    <InlineImage src="/images/kb/ja/ka05w00000128hV-00N5w00000Ri7BU-0EM5w000005vOys-2.png" /> をクリックします。

12. **［次へ］** をクリックします。

13. （条件付き）このDataSetにもとづくすべてのカードにこのルールを適用する場合（上記のヒントも参照してください）、 **［全てのカードに適用する］** をクリックします。1枚だけに適用する場合は、 **［このカードだけに適用する］** をクリックします。

これで、設定済みのルールがこのチャートに適用されます。ステップ10で **［全てのカードに適用する］** を選択した場合は、DataSetにもとづくほかのチャートにも適用されます。

## ドリルダウンでの色のルール

カードのドリルダウンビューでは、親ビューのいずれかに適用されている色のルールがすべて（「カードのみ」のルールでも）適用されます。カードのドリルパスが以下のように設定されているとします。

<table class="mt-responsive-table" data-aura-rendered-by="33:196;a"><thead><tr><th colspan="1" rowspan="1"><p> ドリルダウンレベル </p></th><th colspan="1" rowspan="1"><p> 色のルール </p></th></tr></thead><tbody><tr><td colspan="1" rowspan="1"><p> トップレベルのカード </p></td><td colspan="1" rowspan="1"><p> DataSetのXとYのルールが適用されていて、「カードのみ」ルールはなし </p></td></tr><tr><td colspan="1" rowspan="1"><p> ドリルダウン1 </p></td><td colspan="1" rowspan="1"><p> ルールなし </p></td></tr><tr><td colspan="1" rowspan="1"><p> ドリルダウン2 </p></td><td colspan="1" rowspan="1"><p> AとBのルールが「カードのみ」として適用されている </p></td></tr><tr><td colspan="1" rowspan="1"><p> ドリルダウン3 </p></td><td colspan="1" rowspan="1"><p> CとDのルールが「カードのみ」として適用されている </p></td></tr><tr><td colspan="1" rowspan="1"><p> ドリルダウン4 </p></td><td colspan="1" rowspan="1"><p> ルールなし </p></td></tr></tbody></table>

この場合、ドリルダウン時には、以下のように色のルールが適用されます。

<table class="mt-responsive-table" data-aura-rendered-by="33:196;a"><thead><tr><th colspan="1" rowspan="1"> ドリルダウンレベル </th><th colspan="1" rowspan="1"> 色のルール </th></tr></thead><tbody><tr><td colspan="1" rowspan="1"><p> トップレベルのカード </p></td><td colspan="1" rowspan="1"><p> X、Yの順 </p></td></tr><tr><td colspan="1" rowspan="1"><p> ドリルダウン1 </p></td><td colspan="1" rowspan="1"><p> X、Yの順 </p></td></tr><tr><td colspan="1" rowspan="1"><p> ドリルダウン2 </p></td><td colspan="1" rowspan="1"><p> A、Bの順 </p></td></tr><tr><td colspan="1" rowspan="1"><p> ドリルダウン3 </p></td><td colspan="1" rowspan="1"><p> A、B、C、Dの順 </p></td></tr><tr><td colspan="1" rowspan="1"><p> ドリルダウン4 </p></td><td colspan="1" rowspan="1"><p> A、B、C、Dの順 </p></td></tr></tbody></table>

ドリルダウンの詳細については、「 [データをドリルダウンする](/s/article/360042923994 "チャートにドリルパスを追加する") 」を参照してください。

日本語