こんにちは!ゆかゆかです。
Adaloを使ってグラフ表示を試してみました!
正直な感想ですが、
「う〜ん、エクセルのような自由な表現はできない。」
私の設定を見ていただき、
使えるか使えないか、判断に役立てていただけいると嬉しいです!
コンポーネントのインストール
グラフ表示コンポーネントはインストールする必要があります。
まだの方はマーケットプレースからインストールします。
- +マーク > ADD COMPORNENT
- EXPLORE MARKETPLACE を選択
Chart Kit をインストールします。
インストールが終わると、3種類コンポーネントが追加されます。
- +マーク > ADD COMPORNENT
- Installed
グラフの設定方法
データの準備
それでは、グラフを表示するデータを準備します。
エクセル感覚でデータを準備していたら
「うまく表示できない〜!」と戸惑った点があります。
グラフ作成の元データイメージ
今回はグラフ表示用に卒業イベントの役割決めデータを用意しました。
試行錯誤の結果、こちらの4データを用意してみました。
グラフに表示してみると、1つのデータごとに1つの棒が用意されています。
複数行のデータを集計しようとしても、足されず代表1行の数値がグラフに反映されます。(涙)
なので、データを準備される際には、
そのままグラフに表示できる状態のデータコレクションを用意しました。
グラフの種類紹介
同じデータを使って3種類のグラフをそれぞれ設定してみました。
設定方法とどんな風に表示されるかご紹介します。
①棒グラフの紹介
まずは棒グラフを設定してみます!
チャート設定
Bar Chart の設定で表示するデータに関しての設定ができます。
基本的にはリストの設定に似ています。
リストとは縦軸・横軸の設定が違っています。
縦軸には数値項目を設定します。
今回は質問を横に並べて、投票数をグラフに出してみる設定です。
スタイル設定
スタイルを設定することで、タイトルや値の表示を設定できます。
結果
こんな感じになりました!
簡単に表示できました〜
でもなんだか、ヘッダーとグラフの上の端がつまてる?
ちょっと文字が切れていたり・・
②線グラフの紹介
続いて線グラフを設定してみます!
チャート設定
Line Chart の設定で表示するデータに関しての設定ができます。
基本的には棒グラフと似た設定ですね。
スタイル設定
こちらも棒グラフと似ていますが、クリック時のアクションが無いようです。
結果
折れ線グラフができました。
日にちとかで横になれべば良さそうですね。
③円グラフの紹介
最後に円グラフを設定してみました。
パイ チャート設定
上の2つとの違いとしては、
右側に表示される凡例の設定ができるようです。
スライス設定
分割の数など設定ができるようでした。
結果
こんな感じの円グラフができました。
シンプルですが、簡単に設定できるので、使えそうな気がします。
▼無料でも意外と使える Nocode開発ツール Adalo
まとめ
最近、tableauのかっこいいグラフを使っていたので、
物足りなさはありますが、簡単に使える点はいいですね。
値を設定するときに、Sum関数があればいいのになぁ・・と今回も思いました。
「こんな使い方できるよ」と情報いただけたら嬉しいです。
♡・・*・・♡・・*・・♡・・*・・♡・・*・・♡・・*