CookBook

IM-BloomMaker グラフエレメントのツールチップのフォーマットを指定する方法

投稿日:

このCookBookでは、Accel Platform 2020 Winter でグラフエレメントに追加された「tooltipPointFormat」プロパティについて紹介しています。

「tooltipPointFormat」プロパティは、ツールチップのフォーマットを指定するプロパティです。
ツールチップ上でグラフの値に単位を表示したい場合や、グラフのデータ以外に表示したい情報がある場合は、このプロパティで指定します。

このプロパティは Highcharts のオプション「tooltip.pointFormat」に相当します。
pointFormat の詳細については Highcharts の API ドキュメントを参照してください。
Highcharts API Reference

使い方

このcookbookで紹介するサンプルのインポート資材です。BloomMaker のインポート画面からインポートしてください。
サンプル資材 : cookbook_190382_im_bloommaker.zip

ツールチップのフォーマットを指定する

  1. コンテンツ一覧画面を開き、コンテンツツリーの「im_cookbook」>「im_cookbook_190382」カテゴリを開いてください。

  2. 「im_cookbook_190382」カテゴリ内の「im_cookbook_190382_01」コンテンツを選択し、「デザイン編集」ボタンをクリックしてください。

  3. 「折れ線グラフ」エレメントを選択してください。

  4. 右ペインのプロパティタブを開き、「エレメント固有」カテゴリの「tooltipPointFormat」プロパティを表示してください。
    固定値で以下のように設定されています。
    <b>{point.y} ℃</b>

    この設定値の場合、ツールチップには「(グラフの y の値) ℃」と表示されます。

  5. 「プレビュー」ボタンをクリックしてください。

  6. プレビュー画面でグラフの任意のポイントにマウスカーソルを合わせてください。
    以下のようなツールチップが表示されます。

グラフのデータ以外に表示したい情報がある場合

  1. コンテンツ一覧画面を開き、コンテンツツリーの「im_cookbook」>「im_cookbook_190382」カテゴリを開いてください。

  2. 「im_cookbook_190382」カテゴリ内の「im_cookbook_190382_02」コンテンツを選択し、「デザイン編集」ボタンをクリックしてください。

  3. 「棒グラフ」エレメントを選択してください。

  4. 右ペインのプロパティタブを開き、「エレメント固有」カテゴリの「tooltipPointFormat」プロパティを表示してください。
    固定値で以下のように設定されています。
    <b>{point.convertedValue}</b>

「convertedValue」 は、変数「$variable.series.data」の配下にある変数です。
このサンプルでは、グラフデータは分単位で表示し、時分に変換した値を「convertedValue」に格納してツールチップに表示しています。
  1. 「プレビュー」ボタンをクリックしてください。

  2. プレビュー画面でグラフの任意のポイントにマウスカーソルを合わせてください。
    以下のようなツールチップが表示されます。

上記のように、グラフのデータ以外に表示したい情報がある場合やグラフとツールチップで表示形式を変えたい場合は、表示したい情報を格納した変数を「series.data」の配下に追加し、「tooltipPointFormat」プロパティで「{point.変数名}」と指定します。

円グラフと散布図ではツールチップで使用できる変数名を制限しています。
円グラフ、散布図の場合は、「tooltipArgs」の名前で変数を追加し、表示したい情報を格納してください。

-CookBook
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

IM-BloomMaker サイドメニューの使い方

このCookBookでは、2020 Summer から利用可能になったサイドメニューエレメントの使い方について紹介しています。 エレメントの概要 サイドメニューエレメントは、「intra-mart A …

Formaでスクリプトアイテムを使い、ボタン・見出し等の色やサイズを変更する方法

このCookBookでは、Formaでスクリプトアイテムを使い、デザインを変更する方法をご紹介します。 サンプルでは、「ボタンアイテム」の背景色の変更・「見出し」の背景色の変更・「ラジオボタン」のボタ …

no image

Formaの実行画面でアクセスログを収集する

このCookBookでは、Formaの実行画面で、アクセスログを収集する方法を紹介します。 サンプルでは、登録画面を開いた時点とデータ登録を実行した時点で、ログを収集します。 ログを収集することで、登 …

no image

物理マシン 1 台で Resin のクラスタリング環境を構築する

この CookBook では、物理マシン 1 台で Resin のクラスタリング環境を構築する手順について紹介しています。 Resin のクラスタリングを構築するには通常複数台のマシンが必要ですが、D …

no image

ViewCreatorのヘッダやフッタに配置するリンクのURLに計算結果を埋め込む方法

本記事では、ViewCreatorのヘッダやフッタにリンクを埋め込む際に、関数を利用する方法をご紹介します。 この方法を利用すると、パラメータ文字列に「今日日付」を受け渡すといったことが実現できます。 …

RSSRSSRSSRSS