【Bubble】数値の千単位を「K」に、百万単位を「M」に変換して表示する方法

ノーコードツールBubbleで、数値の千単位を「K」に、百万単位を「M」に変換して表示する方法をご紹介！

以下のような方にぜひ読み進めていただきたいです。

• 動的な数値が1,000以上のときに、千以上の単位を残しそれ以外の部分は「K」で置き換えて表示させたい人
• 動的な数値が1,000,000以上のときに、百万以上の単位を残しそれ以外の部分は「M」で置き換えて表示させたい人

無料で資料をダウンロード

ノーコード開発お役立ち資料3点セット

計100ページ近い大ボリュームでノーコード開発について解説

• ノーコード開発会社の選び方
• EPICsのノーコード受託開発の特徴
• 支援実績・事例集

氏名

法人名

メールアドレス

電話番号

送信ボタンを押すことで、個人情報の取扱いについてに同意したとみなされます

実装イメージ

今回の記事で紹介する方法を実践すると、上の添付画像のような数値の変換を実装できます！

ご覧の通り、数値が1,000の場合、1Kと表示したり、数値が1,000,000の場合には1Mと表示が可能です。

Bubbleで数値の千単位をKと表示する方法

数値の千単位をKと変換して表示する実装の考え方は以下の通り。

数値が1,000以上のときに、その数値を1,000で割って末尾にKをつけるというConditionをConditionalタブで設定する

それでは実際に上記をBubbleに落とし込みましょう。一例ですが、以下のように設定することで実装できます。

When 数値 >= 1000のときに、Textの表示を数値 / 1000Kにするという意味です。

Bubbleで数値の百万単位をMと表示する方法

数値の百万単位をMと変換して表示する実装の考え方は以下の通り。

数値が1,000,000以上のときに、その数値を1,000,000で割って末尾にMをつけるというConditionをConditionalタブで設定する

千単位のときとほぼ同じですがこちらも実際に上記をBubbleに落とし込みましょう。以下のように設定することで実装できます。

When 数値 >= 1000000のときに、Textの表示を数値 / 1000000Kにするという意味です。

また、千単位の変換と、百万単位の変換を併用する場合は、以下のように設定します。

小数点を切り捨てたいときは、割ったあとに:floorをつけてあげればOKです！