脱!教養ゼロママ

もう恥ずかしくない!教養のあるママを目指してます!

MENU

グラフ表示を設定してみた|初心者のアプリ開発|Adalo

f:id:yuka-edu:20211122211555p:plain

こんにちは!ゆかゆかです。

Adaloを使ってグラフ表示を試してみました!

 

正直な感想ですが、

「う〜ん、エクセルのような自由な表現はできない。」

私の設定を見ていただき、

使えるか使えないか、判断に役立てていただけいると嬉しいです!

 

ポイント! 
  • 表示できるグラフは3種類
  • 関連項目はグラフ表示に使えない
  • 値を集計したグラフを表示できなさそう

 

コンポーネントのインストール

グラフ表示コンポーネントはインストールする必要があります。

まだの方はマーケットプレースからインストールします。

  1. +マーク > ADD COMPORNENT
  2. EXPLORE MARKETPLACE を選択

f:id:yuka-edu:20211028082840p:plain

 

Chart Kit をインストールします。

f:id:yuka-edu:20211127105755p:plain

 

インストールが終わると、3種類コンポーネントが追加されます。

  1. +マーク > ADD COMPORNENT
  2. Installed

f:id:yuka-edu:20211127110046p:plain

 

グラフの設定方法

データの準備

それでは、グラフを表示するデータを準備します。

エクセル感覚でデータを準備していたら

「うまく表示できない〜!」と戸惑った点があります。

ポイント! 
  • データ1行ごとをグラフに表示する
  • 値の集計はできない
  • 関連項目はグラフ表示に使えない

 

グラフ作成の元データイメージ

今回はグラフ表示用に卒業イベントの役割決めデータを用意しました。

試行錯誤の結果、こちらの4データを用意してみました。

f:id:yuka-edu:20211127111258p:plain

 

グラフに表示してみると、1つのデータごとに1つの棒が用意されています。

複数行のデータを集計しようとしても、足されず代表1行の数値がグラフに反映されます。(涙)

f:id:yuka-edu:20211127111310p:plain

なので、データを準備される際には、

そのままグラフに表示できる状態のデータコレクションを用意しました。

グラフの種類紹介

同じデータを使って3種類のグラフをそれぞれ設定してみました。

設定方法とどんな風に表示されるかご紹介します。

 

①棒グラフの紹介

まずは棒グラフを設定してみます!

チャート設定

Bar Chart の設定で表示するデータに関しての設定ができます。

基本的にはリストの設定に似ています。

リストとは縦軸・横軸の設定が違っています。

f:id:yuka-edu:20211127212315p:plain

縦軸には数値項目を設定します。

 

今回は質問を横に並べて、投票数をグラフに出してみる設定です。

 

スタイル設定

スタイルを設定することで、タイトルや値の表示を設定できます。

f:id:yuka-edu:20211127213026p:plain

結果

こんな感じになりました!

f:id:yuka-edu:20211127213401p:plain

簡単に表示できました〜

でもなんだか、ヘッダーとグラフの上の端がつまてる?

ちょっと文字が切れていたり・・

 

②線グラフの紹介

続いて線グラフを設定してみます!

チャート設定

Line Chart の設定で表示するデータに関しての設定ができます。

基本的には棒グラフと似た設定ですね。

f:id:yuka-edu:20211127215527p:plain

 

スタイル設定

こちらも棒グラフと似ていますが、クリック時のアクションが無いようです。

f:id:yuka-edu:20211127215537p:plain

結果

折れ線グラフができました。

日にちとかで横になれべば良さそうですね。

f:id:yuka-edu:20211127215619p:plain

③円グラフの紹介

最後に円グラフを設定してみました。

パイ チャート設定

上の2つとの違いとしては、

右側に表示される凡例の設定ができるようです。

f:id:yuka-edu:20211127221051p:plain


スライス設定

分割の数など設定ができるようでした。

f:id:yuka-edu:20211127221100p:plain

 

結果

こんな感じの円グラフができました。

シンプルですが、簡単に設定できるので、使えそうな気がします。

f:id:yuka-edu:20211127221125p:plain



▼無料でも意外と使える Nocode開発ツール Adalo

www.adalo.com

 

 

まとめ

最近、tableauのかっこいいグラフを使っていたので、

物足りなさはありますが、簡単に使える点はいいですね。

値を設定するときに、Sum関数があればいいのになぁ・・と今回も思いました。

 

「こんな使い方できるよ」と情報いただけたら嬉しいです。


♡・・*・・♡・・*・・♡・・*・・♡・・*・・♡・・*