円グラフ

ユーザーに、カウントされたレコード、パーセンテージ、またはレコードカテゴリの視覚的表現を提供するために、円グラフをインストールしてください。

スキルレベル: 初心者

開始前に

• データベースとリレーションシップの基礎を知っていること

• 円グラフのほとんどのアプリケーションでは、次の2つのコレクションが必要です：

  • レコードカテゴリのコレクション（たとえば、レストランのカテゴリ、旅行のカテゴリ、書籍のカテゴリなど）またはそれに関連付けられるもの

  • それらのカテゴリに関係するレコードのコレクション（多対多が最適）（たとえば、レストラン、旅行、書籍など）

• この機能を実装するには、有料のAdaloプランは必要ありません

手順

シンプル

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フィールドでは、カテゴリコレクションに関係するレコードのカウントを表示するためにマジックテキストを使用できます。たとえば、レストラン>カウントまたは旅行>カウントを選択できます。ここに値を入力することもできますが、その値はすべてのスライスに対して真になります。

9.) そのすぐ下のSlice Labelフィールドでは、直接入力してすべてのスライスにラベルを付けるか、各スライスのカテゴリ名を表示するためにマジックテキストを使用できます（推奨）。

10.) Slicesセクションのドロップダウンメニューでは、主に個人の好みに基づいて円グラフに関するさまざまなオプションを変更できます：

• 最大スライス数 - スライダーを使用して円グラフに表示するセクションの数を選択します

• その他のスライスラベル - フィールドに入力するか、マジックテキストを使用して「その他」スライスの名前を変更します

• スライスの色 - ドロップダウンメニューを使用して、円グラフの色が選択した色に補完されるか、円の各スライスにカスタム色を割り当てるかを変更します

• スライスアクション - ここでは、リスト内で行うのと同様に、パイのスライスにクリックアクションを追加できます。パイのスライスをクリックすると、そのスライスに関連するレコードデータを別の画面に送信したり、レコードを作成、更新、削除することができます。なお、「その他」スライスにはクリックアクションは利用できません。

コンポーネントがデータを引っ張るためには、コレクションにデータが必要です。これによりパイチャートが表示されます。

詳細

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 フィールドでは、関連付けられたレコードのカウントを表示するためにマジックテキストを使用できます。たとえば、Restaurants > Count または Trips > Count を選択できます。なお、ここに値を入力することもできますが、その値はすべてのスライスに対して真となります。

9.) 直下の Slice Label フィールドでは、直接入力してすべてのスライスにラベルを付けるか、各スライスのカテゴリ名を表示するためにマジックテキストを使用できます（推奨）。

10.) Slices セクションのドロップダウンメニューでは、主に個人の好みに基づいたパイチャートのさまざまなオプションを変更できます：

• 最大スライス数 - スライダーを使用して、パイチャートに表示するセクションの数を選択します

• その他のスライスラベル - "その他"スライスの名前を変更するには、フィールドに入力するか、マジックテキストを使用します

• スライスの色 - ピエチャートの色を補完色に変更するか、各スライスにカスタム色を割り当てるかを選択するためにドロップダウンを使用します

• スライスアクション - ここでは、リスト内で行うのと同様に、ピエチャートのスライスにクリックアクションを追加できます。ピエチャートのスライスをクリックすることで、そのスライスに関連するレコードデータを別の画面に送ったり、レコードの作成、更新、削除に使用したりできます。なお、「その他」スライスにはクリックアクションは利用できません。

ビデオ

結果

これで、ユーザーはデータベース内のレコードを円グラフで視覚的に表示することができます。この手順のアプリのクローンキットはこちらをクリックしてください。

もっと詳しく

• 円グラフコンポーネントを実装するさまざまな方法があります。スライスの値を表示するためにレコードをカウントする際に、円グラフに表示される内容を細かく定義するためにフィルターを追加することもできます。

• チャートのサイズを変更するには、チャートの黄色い境界ボックスのハンドルをクリックしてドラッグします

• より多くの機能が必要な場合は、カスタムコンポーネントをチェックしてください

ヘルプ

この記事に関する追加のヘルプが必要な場合は、いつでもコミュニティフォーラムで質問できます！投稿する際は、この記事へのリンクも貼り付けてください！