TECH BLOG

MENU

オンプレクラウド

MotionBoard

MotionBoard

達成率が50%未満の時は「まだまだ・・・」、80%を超えた時は「もう少し!」、100%になると「おめでとう!!」といった具合に、達成率に応じて違う画像を表示させたい場合はどうすればいいのでしょうか。
今回の記事では、データの値によって異なる画像を表示する方法をご紹介します。

▲完成図

 

シングルイメージを使おう

データの値によって異なる画像をボード上に表示させるには、シングルイメージというチャートを利用します。
シングルイメージでは、指定した条件に一致する場合に任意の画像を表示させることができます。

 

シングルイメージの設定は以下の3つです。

1.画像設定

2.値による画像設定

3.アラートによる画像設定

シングルイメージ設定画面

▲シングルイメージ設定画面

 

例えば、[アスペクト比を保持する]にチェックを入れると、画像のアスペクト比(画像の幅と高さの数値比率)が崩れないように表示されます。
また、集計項目の値やアラートレベルの値によって表示する画像を設定することができます。

詳細はこちらのマニュアルをご参照ください。

MotionBoardマニュアル:[シングル表示設定]-[シングルイメージ]

 

実際に設定してみよう

今回は、達成率という項目の値に応じて画像が変更されるように設定を行います。

 

ボードにシングルイメージを追加する

ボードにチャートを追加し、[シングルイメージ]を選択します。

▲シングルイメージを選択

 

 

シングルイメージの設定

シングルイメージチャートを追加しても、設定を行わなければボードには何も表示されません。
チャートを追加した場所をクリックして「チャート編集」を開きます。

 

必要に応じて「画像を拡大/縮小する」「アスペクト比を保持する」にチェックを入れてください。
次に、[追加]をクリックします。

▲拡大/縮小やアスペクト比の設定、画像の追加

 

 

[アップロード]をクリックして、必要な画像をアップロードしてください。
アップロードが完了したら[OK]をクリックします。

▲使用する画像のアップロード

 

アップロードした画像それぞれに「最小値」「最大値」を設定すれば完了です。
今回は以下のように設定しました。

画像のように最大値を未入力とすることで、100%以上といった設定が可能です。

 

最後に

今回は、データの値によって異なる画像を表示する方法をご紹介しました。
色々な使い道があると思うので、ぜひ試してみてください。

 

▲完成図

この記事にリアクションしてみませんか?

What do you think of this post?
  • 分かりやすい (1)
  • 問題が解決した (0)
お役に立てて嬉しいです!

Matsuura Takaya

MotionBoard
プロフィールへ >

2019年4月からWingArcにJoinし、主にMotionBoardを使ったボード構築に携わっています。デザイン性の高いダッシュボードの製作を得意としています。

Related article

Related article関連記事

Pick up

Pick upおすすめ記事

【脱Excel】MotionBoardの入力機能で業務アプリをつくる

公開:2024.08.05
更新:2024.08.05

分かりやすい

2

解決した

0
  • データ入力
  • デザイン
  • コンテナ

MotionBoard

【まとめ】SVF Cloud帳票をinvoiceAgentに連携する方法

公開:2024.04.18
更新:2024.08.07

分かりやすい

2

解決した

2
  • 帳票作成・出力
  • システム連携
  • 電帳法
  • 文書定義
  • 処理定義

SVF

Dr.Sum Copilotをインストールしてみた【OpenAI】

公開:2024.04.05
更新:2024.04.18

分かりやすい

2

解決した

0
  • Copilot

Dr.Sum

Ranking

Rankingランキング

1

棒グラフを大きい順番に並び替えたい!(ソートしたい)

公開:2019.06.15
更新:2023.11.27

分かりやすい

13

解決した

12
  • デザイン
  • グラフ
  • 集計表

MotionBoard

2

経過時間を時:分:秒で時刻表示したい!【320秒→05:20】

公開:2022.08.02
更新:2024.05.08

分かりやすい

11

解決した

7
  • グラフ

MotionBoard

3

カスタム項目の書き方 よく使う関数からIfまで

公開:2023.07.28
更新:2024.10.30

分かりやすい

25

解決した

7
  • データ加工

MotionBoard

Info

Information

ウイングアーク1stからのお知らせ

int(57)