CookBook

IM-BloomMaker グラフエレメントの使い方(円グラフ編)

投稿日:2019-12-17 更新日:

この CookBook では、intra-mart Accel Platform 2019 Winter から利用可能になった IM-BloomMaker の円グラフの活用方法について紹介しています。
グラフエレメントの基本的な使い方を学びたい方は、以下の記事を参照してください。
http://dev.intra-mart.jp/cookbook169226/

円グラフエレメントには「selected」と「visible」というプロパティがあります。
これらのプロパティを活用することでドリルダウンを実現することができます。
散布図エレメントにも同様のプロパティがあるので、今回紹介する内容と同様の活用が可能です。

完成イメージ

このCookBookで作成するサンプルを、以下から動作を確認することができます。

  1. 円グラフをクリックすると、一覧の対応する項目がハイライトされます。
  2. 円グラフの下にある凡例をクリックすると、その項目が円グラフ上で非表示になります。
  3. 「Show only brands shown in graph」ボタンをクリックすると、円グラフに表示されている項目のみに絞り込んで一覧を表示します。
  4. 「Reset」ボタンをクリックすると、グラフが再描画されます。

完成サンプル

以下の完成サンプルをダウンロードしてご活用ください。
IM-BloomMakerのインポート機能を利用してインポートしてください。
インポート後、インポートしたルーティング定義の認可 URI の設定を行ってください。

IM-BloomMaker サンプルインポートファイル : cookbook_169309_sample.zip

また、このサンプルでは IM-LogicDesigner のフロー定義を利用します。
完成サンプルの動作確認を行う場合、または、レシピの手順を実施する前に、IM-LogicDesigner のインポート機能から以下のサンプルをインポートしてください。

IM-LogicDesigner サンプルインポートファイル : cookbook_169309_IM-LogicDesigner.zip

ローカル環境で表示させる場合は、以下の URL にアクセスしてください。
http://localhost:8080/imart/im_cookbook/169309
なおベース URL である以下の部分は、環境に合わせて適宜変更してください。
http://localhost:8080/imart

レシピ

  1. エレメントを配置する
  2. 変数を作成し、配置したエレメントに設定する
  3. 円グラフと一覧の連動を行うアクションを作成する
  4. ルーティング定義を設定し、IM-LogicDesigner のフロー定義と連携させる

1. エレメントを配置する

エレメントの配置は、この CookBook の主題ではないため省略します。
エレメント配置済みのインポートファイルを用意しているので、以下のファイルをインポートして利用してください。

エレメント配置済みインポートファイル : cookbook_169309.zip

インポート後、以下の URL にアクセスしてインポートしたコンテンツのデザイナ画面を表示してください。
ベース URL は、環境に合わせて適宜変更してください。
http://localhost:8080/imart/bloommaker/designer/im_cookbook_169309?css-framework=imui&content-definition-type=content

2. 変数を作成し、配置したエレメントに設定する

  • デザイナ画面の右ペインの変数タブを開き、プルダウンが「変数」になっていることを確認してください。

  • 以下の JSON を JSON エディタに貼り付けて変数を作成してください。

  • 作成した変数の「yoYChange」の編集アイコンをクリックして変数エディタを表示してください。

  • 「値の型」のプルダウンを「浮動小数」に変更して「決定」ボタンをクリックしてください。

  • 上記と同様に、変数「selected」の型を「整数」に変更してください。

  • 上記と同様に、変数「visible」の型を「整数」に変更してください。

  • デザイナ画面の右ペインの変数タブを開き、プルダウンを「入力」に変更してください。

  • 以下の JSON を JSON エディタに貼り付けて入力を作成してください。

  • 入力「yoYChange」の型を「浮動小数」に変更してください。

  • 円グラフエレメントをクリックしてください。

  • 右ペインのプロパティタブを開き、以下の通り設定してください。

カテゴリ プロパティ名 ラジオボタン 設定値
エレメント固有 seriesData - $variable.seriesData
エレメント固有 selected - $variable.selected
エレメント固有 visible - $variable.visible
「selected」プロパティは、グラフ上で選択されているデータ要素のインデックスを保持します。
カスタムスクリプトを用いることで、選択されたデータの内訳を表示するといった、ドリルダウンのような動作を行うことができます。
「visible」プロパティは、グラフ上で表示中のデータ要素のインデックスを保持します。
カスタムスクリプトを用いることで、グラフに表示されているデータのみで再集計を行うといった動作を行うことができます。
  • テーブルエレメントの2行目1列目のテーブルセルをクリックしてください。

  • プロパティタブで以下の通り設定してください。
    2行目2列目~5列目のセルに対しても同様の設定を行ってください。

カテゴリ プロパティ名 ラジオボタン 設定値
文字色・背景色 背景色 変数値 $variable.tableColor[$index]
  • テーブルエレメントの2行目1列目のラベルをクリックしてください。

  • プロパティタブで以下の通り設定してください。

カテゴリ プロパティ名 ラジオボタン 設定値
エレメント固有 textContent 変数値 $variable.tableData[$index].rank
  • テーブルエレメントの2行目2列目のラベルをクリックしてください。

  • プロパティタブで以下の通り設定してください。

カテゴリ プロパティ名 ラジオボタン 設定値
エレメント固有 textContent 変数値 $variable.tableData[$index].commonName
  • テーブルエレメントの2行目3列目のラベルをクリックしてください。

  • プロパティタブで以下の通り設定してください。

カテゴリ プロパティ名 ラジオボタン 設定値
エレメント固有 textContent 変数値 $variable.tableData[$index].brand
  • テーブルエレメントの2行目4列目のラベルをクリックしてください。

  • プロパティタブで以下の通り設定してください。

カテゴリ プロパティ名 ラジオボタン 設定値
エレメント固有 textContent 変数値 $variable.tableData[$index].number
  • テーブルエレメントの2行目5列目のラベルをクリックしてください。

  • プロパティタブで以下の通り設定してください。

カテゴリ プロパティ名 ラジオボタン 設定値
エレメント固有 textContent 変数値 $variable.tableData[$index].yoYChange

3. 円グラフと一覧の連動を行うアクションを作成する

  • 右ペインのアクションタブを開き、「新規作成」アイコンをクリックしてアクションエディタを開いてください。

  • アクション名に「Initial display」と入力してください。

  • 左ペインから「変数〇に〇を代入する」を右ペインに配置してください。

  • 配置したアクションアイテムに以下の通り設定してください。

項目 設定値
代入先 $variable.tableData
参照元 $input.data
  • 左ペインから「カスタムスクリプトを実行する」を右ペインの「変数〇に〇を代入する」の下に配置してください。

  • 配置したアクションアイテムに以下の内容を入力してください。

上記のカスタムスクリプトは、画面を表示した時に行う処理です。
前処理から受け取ったデータを加工し、円グラフに表示するためのデータを作成します。
  • アクションエディタの「決定」ボタンをクリックし、アクションを保存してください。

  • すべてのエレメントの選択を解除し、「コンテナ」のプロパティタブを表示してください。
    (Ctrl キーを押しながら選択済みのエレメントをクリックすることで選択を解除できます。)

  • 「コンテナ」のプロパティに、以下の通り設定してください。

カテゴリ プロパティ名 ラジオボタン 設定値
イベント ページ読み込み時 - Initial display

  • 円グラフの下に配置されている「Reset」ボタンを選択してください。

  • プロパティタブで以下の通り設定してください。

カテゴリ プロパティ名 ラジオボタン 設定値
イベント クリック時 - Initial display
  • 右ペインのアクションタブを開き、「新規作成」アイコンをクリックしてアクションエディタを開いてください。

  • アクション名に「Click graph element」と入力してください。

  • 左ペインから「カスタムスクリプトを実行する」を右ペインに配置してください。

  • 配置したアクションアイテムに以下の内容を入力してください。

上記のカスタムスクリプトは、円グラフのデータ要素をクリックした時に行う処理です。
円グラフ上で選択されたデータ要素の「name」を、一覧の「brand」と比較し、一致するデータを一覧上で強調表示します。
  • アクションエディタの「決定」ボタンをクリックし、アクションを保存してください。

  • 円グラフエレメントをクリックし、プロパティタブで以下の通り設定してください。

カテゴリ プロパティ名 ラジオボタン 設定値
エレメント固有 dataPointClickEvent - Click graph element

  • 右ペインのアクションタブを開き、「新規作成」アイコンをクリックしてアクションエディタを開いてください。

  • アクション名に「Update table」と入力してください。

  • 左ペインから「カスタムスクリプトを実行する」を右ペインに配置してください。

  • 配置したアクションアイテムに以下の内容を入力してください。

上記のカスタムスクリプトは、「Show only brands shown in graph」ボタンをクリックしたときに行う処理です。
円グラフで表示中のデータ要素の「name」を、一覧の「brand」と比較し、一致しないデータを一覧から除去します。
  • アクションエディタの「決定」ボタンをクリックし、アクションを保存してください。

  • テーブルエレメントの下にある「Show only brands shown in graph」ボタンを選択してください。

  • プロパティタブで以下の通り設定してください。

カテゴリ プロパティ名 ラジオボタン 設定値
イベント クリック時 - Update table
  • すべての設定が完了したら、「上書き保存」ボタンをクリックしてコンテンツを保存してください。

4. ルーティング定義を設定し、IM-LogicDesigner のフロー定義と連携させる

  • ルーティング定義一覧画面を表示し、「カテゴリ新規作成」ボタンをクリックしてください。

  • 以下の情報を入力し、「登録」ボタンをクリックしてください。(既に登録済みの場合はこの手順は不要です。)

項目 設定値
カテゴリID im_cookbook
カテゴリ名 im_cookbook
備考 なし
ソート番号 0
  • 登録した「im_cookbook」カテゴリを選択して「ルーティング新規作成」ボタンをクリックし、ルーティング定義登録画面を表示してください。

  • 「ルーティング」タブを表示し、以下の情報を入力してください。

項目 設定値
ルーティングID im_cookbook_169309
コンテンツ im_cookbook_169309
メソッド GET
URL im_cookbook/169309
ルーティング名 im_cookbook_169309
備考 なし
ソート番号 0

※ レシピの手順 1 ~ 3 で作成したコンテンツをコンテンツ検索画面から選択してください。

  • 「前処理」タブを表示し、「追加」ボタンをクリックしてダイアログを表示してください。

  • ダイアログに以下の通り設定し、「登録」ボタンをクリックしてください。

項目 設定値
種別 ロジックフロー
対象フロー im_cookbook_169309_flow
利用バージョン 最新バージョンを利用する

※ 事前に、完成サンプルの「IM-LogicDesigner サンプルインポートファイル」をインポートしておいてください。

  • ルーティング定義登録画面の「登録」ボタンをクリックし、ルーティング定義を登録してください。

  • 登録したルーティング定義「im_cookbook_169309」を選択し、「認可URI」の認可設定を行ってください。

項目 権限
認証済みユーザ 許可

以上で、円グラフのサンプル画面の作成は完了です。

動作確認

作成した画面の動作確認を行います。
ルーティング定義一覧画面でルーティング定義「im_cookbook_169309」を表示し、「URLのコピー」アイコンをクリックしてください。
コピーした URL をブラウザのアドレスバーに貼り付け、作成した画面に移動してください。

以下のように動作することを確認してください。
うまく動作しない場合は、レシピの手順を確認してください。

  • 円グラフをクリックすると、一覧の対応する項目がハイライトされること。
  • 円グラフの下にある凡例をクリックすると、その項目が円グラフ上で非表示になること。
  • 「Show only brands shown in graph」ボタンをクリックすると、グラフに表示されていないデータが一覧から消えること。
  • 「Reset」ボタンをクリックすると、画面が初期表示時の状態に戻ること。

-CookBook
-

執筆者:


comment

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

関連記事

スプレッドシートでForma入力チェックユーザプログラムを利用して入力チェックを実行する方法

このCookBookでは、スプレッドシートでForma入力チェックユーザプログラムを利用して入力チェックを実行する方法について紹介しています。 Formaの入力チェックプログラムでは以下の2つのチェッ …

no image

IMBox に投稿種別を追加する方法(Markdown)

このCookBookでは、IMBoxに投稿種別を追加する方法について紹介しています。 以下のドキュメントを参照することで、IMBox に投稿種別を追加することができます。 IMBox プログラミングガ …

no image

画面操作方法によって画面アイテムの入力チェックを切り替える方法

このCookBookでは、IM-FormaDesignerの入力チェックプログラムで、画面の操作方法に応じた入力チェックを設定する方法を紹介します。 この方法は、以下の製品で作成したアプリケーションや …

IM-BloomMaker のアクション「URL ○ にリクエストを送信する」の使い方

このCookBookでは、「URL ○ にリクエストを送信する」アクションを使ってサンプル画面を作成する方法を紹介します。 2019 Summer では「URL ○ にアクセスする」でしたが、 201 …

no image

外部連携を利用して簡単な相関チェックを行う方法

このCookbookでは、外部連携を利用して簡単な相関チェックを行う方法を紹介します。 この方法を活用することにより、簡単な入力チェックであれば、Formaユーザプログラムの入力チェックを作成せずに外 …

まだデータがありません。

RSSRSSRSSRSS