# 円グラフ
*スキルレベル: 初心者*
## 開始前に
* [データベース](https://help.adalo.com/ja/database)と[リレーションシップ](https://help.adalo.com/ja/database/relationships)の基礎を知っていること
* 円グラフのほとんどのアプリケーションでは、次の2つのコレクションが必要です：
* レコードカテゴリのコレクション（たとえば、レストランのカテゴリ、旅行のカテゴリ、書籍のカテゴリなど）またはそれに関連付けられるもの
* それらのカテゴリに関係するレコードのコレクション（[多対多](https://help.adalo.com/glossary#many-to-many)が最適）（たとえば、レストラン、旅行、書籍など）
* この機能を実装するには、有料のAdaloプランは必要ありません
## 手順
{% tabs %}
{% tab title="シンプル" %}
**1.)** Adaloアプリ内で、左上隅にある大きなプラス記号
をクリックします
**2.)** 画面を下にスクロールして**マーケットプレイス**セクションに移動し、**マーケットプレイスを探索**をクリックします
**3.)** リストから**Chart Kit**を見つけ、**インストール**をクリックします
**4.)** コンポーネントリストに戻り、検索バーに**Pie Chart**と入力し、コンポーネントを目的の画面にドラッグアンドドロップします
**5.)** **Pie Chart**セクションのドロップダウンメニューで、**What is this a chart of**ドロップダウンメニューの下で、チャートで表示したいコレクションを選択します（この場合、カテゴリのコレクションです）
**6.)** フィルタが必要な場合は、**Filter**ドロップダウンメニューのすぐ下に追加します。たとえば、すべての旅行カテゴリを表示する代わりに、フィルタを追加して、ログインユーザーの>レストラン>レストランカテゴリのみを表示して、ユーザーが訪れたレストランのカテゴリのみを表示できます。
**7.)** **Show value as**ドロップダウンメニューで、チャートキーの値をカウント、パーセンテージ、または完全に非表示にするかを選択できます。
**8.)** **Slice Value**フィールドでは、カテゴリコレクションに関係するレコードのカウントを表示するために[マジックテキスト](https://help.adalo.com/glossary#magic-text)を使用できます。たとえば、**レストラン>カウント**または**旅行>カウント**を選択できます。ここに値を入力することもできますが、その値はすべてのスライスに対して真になります。
**9.)** そのすぐ下の**Slice Label**フィールドでは、直接入力してすべてのスライスにラベルを付けるか、各スライスのカテゴリ名を表示するためにマジックテキストを使用できます（推奨）。
**10.)** **Slices**セクションのドロップダウンメニューでは、主に個人の好みに基づいて円グラフに関するさまざまなオプションを変更できます：
* **最大スライス数** - スライダーを使用して円グラフに表示するセクションの数を選択します
* **その他のスライスラベル** - フィールドに入力するか、マジックテキストを使用して「その他」スライスの名前を変更します
* **スライスの色** - ドロップダウンメニューを使用して、円グラフの色が選択した色に補完されるか、円の各スライスにカスタム色を割り当てるかを変更します
* **スライスアクション** - ここでは、リスト内で行うのと同様に、パイのスライスにクリックアクションを追加できます。パイのスライスをクリックすると、そのスライスに関連するレコードデータを別の画面に送信したり、レコードを作成、更新、削除することができます。なお、「その他」スライスにはクリックアクションは利用できません。
{% hint style="info" %}
コンポーネントがデータを引っ張るためには、コレクションにデータが必要です。これによりパイチャートが表示されます。
{% endhint %}
{% endtab %}
{% tab title="詳細" %}
**1.)** Adaloアプリ内で、左上隅にある大きなプラス記号をクリックします
**2.)** **"Marketplace"** を検索し、**Explore Marketplace** をクリックします
**3.)** リストから **Chart Kit** を見つけ、**Install** をクリックします
**4.)** コンポーネントリストに戻り、検索バーに **Pie Chart** と入力し、コンポーネントを目的の画面にドラッグアンドドロップします
**5.)** **Pie Chart** セクションのドロップダウンメニューで、**What is this a chart of** ドロップダウンメニューの下で、チャートで表示したいコレクションを選択します（この場合、Categoriesコレクションです）
**6.)** フィルターが必要な場合は、**Filter** ドロップダウンメニューの直下に追加します。たとえば、すべてのTrip Categoriesを表示する代わりに、ログインユーザーの > レストラン > レストランカテゴリーのみを表示するフィルターを追加できます。これには、Usersコレクションへの関連付けが必要です。ここにカスタムフィルターを追加することもできます。
**7.)** **Show value as** ドロップダウンメニューで、チャートキーの値をカウント、パーセンテージ表示、または完全に非表示にすることができます。
**8.)** **Slice Value** フィールドでは、関連付けられたレコードのカウントを表示するために[マジックテキスト](https://help.adalo.com/glossary#magic-text)を使用できます。たとえば、**Restaurants > Count** または **Trips > Count** を選択できます。なお、ここに値を入力することもできますが、その値はすべてのスライスに対して真となります。
**9.)** 直下の **Slice Label** フィールドでは、直接入力してすべてのスライスにラベルを付けるか、各スライスのカテゴリ名を表示するためにマジックテキストを使用できます（推奨）。
**10.)** **Slices** セクションのドロップダウンメニューでは、主に個人の好みに基づいたパイチャートのさまざまなオプションを変更できます：
* **最大スライス数** - スライダーを使用して、パイチャートに表示するセクションの数を選択します
* **その他のスライスラベル** - "その他"スライスの名前を変更するには、フィールドに入力するか、マジックテキストを使用します
* **スライスの色** - ピエチャートの色を補完色に変更するか、各スライスにカスタム色を割り当てるかを選択するためにドロップダウンを使用します
* **スライスアクション** - ここでは、リスト内で行うのと同様に、ピエチャートのスライスにクリックアクションを追加できます。ピエチャートのスライスをクリックすることで、そのスライスに関連するレコードデータを別の画面に送ったり、レコードの作成、更新、削除に使用したりできます。なお、「その他」スライスにはクリックアクションは利用できません。
{% endtab %}
{% tab title="ビデオ" %}
{% embed url="" %}
{% endtab %}
{% endtabs %}
## 結果
これで、ユーザーはデータベース内のレコードを円グラフで視覚的に表示することができます。この手順のアプリのクローンキットは[こちらをクリックして](https://previewer.adalo.com/af14d84c-acaa-4db4-91f6-4399c90a5060)ください。
## もっと詳しく
* 円グラフコンポーネントを実装するさまざまな方法があります。スライスの値を表示するためにレコードをカウントする際に、円グラフに表示される内容を細かく定義するためにフィルターを追加することもできます。
* チャートのサイズを変更するには、チャートの黄色い境界ボックスのハンドルをクリックしてドラッグします
* より多くの機能が必要な場合は、カスタムコンポーネントをチェックしてください
## ヘルプ
この記事に関する追加のヘルプが必要な場合は、いつでも[コミュニティフォーラム](https://forum.adalo.com/)で質問できます！投稿する際は、この記事へのリンクも貼り付けてください！