Data Platform Documentation

title: extends を使用して最初のテンプレートに基づいて第二のテンプレートを作成する translator: source: docs/en/sdk/app-charts-template-extends.mdx sha256: c5f32567b02edeee86630eb0bcc621121660ed79f2008c0815ec4bef15c6e3ef model: ovhcloud/Mistral-Small-3.2-24B-Instruct-2506

Warning

作業中です。納期未定。 Front App SDK (ReactJS) と Front API SDK (NodeJS) の両方が置き換えられています。このページは現在のリリースをドキュメント化し、置き換えが出荷されるまで正確で維持されます。これに対して書かれたコードは引き続き動作します。

プラットフォームは、最初のテンプレートから多くのオプションを活用し、後者に対する変更を自動的に受け取るテンプレートを作成する簡単な方法を提供します。

テンプレートに extends エレメントを追加するだけです。

"rechartsBarWithBiggerSize": {
    "extends": "rechartsBar",
    "options": {
        "barSize": 10,
        "barCategoryGap": 5
    }
}

extends を使用すると、第二のテンプレートのオプションは最初のテンプレートのオプションとマージされます。したがって、第二のテンプレートを使用すると、オプションは次のようになります。

"options": {
    "barGap": 3,
    "barSize": 10,
    "barCategoryGap": 5
    "margin": {
         "left": 20,
         "right": 20,
         "top": 40,
         "bottom": 35
    }
}

例えば、rechartsBar からオプションのみを取得したい場合でも、別のコンポーネントに対して動作します。次の例のように、どのコンポーネントを指定する必要があります。

"rechartsBarWithBiggerSize": {
    "component": "recharts.line",
    "extends": "rechartsBar",
    "options": {
        "barSize": 10,
        "barCategoryGap": 5
    }
}

上記のマージされたオプションは、rechartsBarWithBiggerSize コンポーネントを使用するとすぐに recharts.line に適用されます。

Warning

extends を使用する場合、少なくとも1つのコンポーネント（キーワード component またはテンプレートとして使用されるコンポーネント）が定義されている必要があります。次の例は動作しません。rechartsBar または rechartsBarWithBiggerSize のどちらにもコンポーネントが割り当てられていないためです。

{
    "rechartsBar": {
        "options": {
            "barGap": 3,
            "barSize": 6,
            "margin": {
                 "left": 20,
                 "right": 20,
                 "top": 40,
                 "bottom": 35
            }
        }
    },
    "rechartsBarWithBiggerSize": {
        "extends": "rechartsBar",
        "options": {
            "barSize": 10,
            "barCategoryGap": 5
        }
    }
}

代わりに、これは正しい構成です。

{
    "rechartsBar": {
        "component": "recharts.bar", // define component that will be used here
        "options": {
            "barGap": 3,
            "barSize": 6,
            "margin": {
                 "left": 20,
                 "right": 20,
                 "top": 40,
                 "bottom": 35
            }
        }
    },
    "rechartsBarWithBiggerSize": {
        "extends": "rechartsBar",
        "options": {
            "barSize": 10,
            "barCategoryGap": 5
        }
    }
}

または

{
    "recharts.bar": { // recharts.bar is a component so it will work
        "options": {
            "barGap": 3,
            "barSize": 6,
            "margin": {
                 "left": 20,
                 "right": 20,
                 "top": 40,
                 "bottom": 35
            }
        }
    },
    "rechartsBarWithBiggerSize": {
        "extends": "recharts.bar",
        "options": {
            "barSize": 10,
            "barCategoryGap": 5
        }
    }
}

注意 : チャートファミリーを使用している場合は、extends を指定する必要はありません。デフォルトで、子は親と同じオプションを取得します。

例えば：

{
    "recharts": {
        "options": {
            "barGap": 3,
            "barSize": 6,
            "margin": {
                "left": 20,
                "right": 20,
                "top": 40,
                "bottom": 35
            }
        }
    },
    "recharts.bar": {
      "options": {
        "barGap": 1
      }
    }
}

ここで、recharts.bar は recharts からオプションを取得し、barGap プロパティを変更します。recharts.bar のオプションは次になります。

{
  "recharts.bar": {
        "options": {
            "barGap": 1, // On garde la définition de recharts.bar
            "barSize": 6,
            "margin": {
                "left": 20,
                "right": 20,
                "top": 40,
                "bottom": 35
            }
        }
    }
}