TECH BLOG

MENU

オンプレクラウド

MotionBoard

MotionBoard

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

▲完成図

 

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

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

 

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

1.画像設定

2.値による画像設定

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

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

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

 

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

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

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

 

実際に設定してみよう

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

 

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

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

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

 

 

シングルイメージの設定

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

 

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

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

 

 

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

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

 

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

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

 

最後に

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

 

▲完成図

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

  • 分かりやすい (1)
  • 問題が解決した (0)
お役に立てて嬉しいです!
プロフィールへ

Matsuura Takaya

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

Related article

Related article関連記事

Pick up

Pick upおすすめ記事

特定の文字列で分割して階層構造をつくりたい!~DS Scriptで分割する~1

  • #データ加工
  • #DS Script

2023.07.17

Dr.Sum

DS Scriptで必要なテーブルだけ再構築(リビルド)をしよう

  • #DS Script

2023.07.06

Dr.Sum

「データポイント数が、しきい値をオーバーしました」というエラーの解決方法【データベースで処理をしよう】

  • #データ加工

2023.06.13

MotionBoard

Ranking

Rankingランキング

1

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

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

2019.06.15

MotionBoard

2

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

  • #データ加工

2023.07.28

MotionBoard

3

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

  • #グラフ

2022.08.02

MotionBoard

Info

Information

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