CookBook

複数の種類のグラフを組み合わせて表示したり、自由にオプションを指定してグラフを表示したりできるエレメントのサンプル

投稿日:

このCookBookでは、IM-BloomMaker で作成するアプリケーション画面で複数の種類のグラフを組み合わせて表示したり、自由にオプションを指定してグラフを表示したりできるエレメントのサンプルを紹介しています。
IM-BloomMaker が提供しているグラフエレメントの使い方については、以下の CookBook を参照してください。

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

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

IM-BloomMaker が提供しているグラフエレメントでは、表示できるグラフの種類や指定できるオプションが制限されていますが、このサンプルエレメントでは制限なくグラフの表示が可能です。

注意

  • 今回紹介するサンプルエレメントでは Highcharts を利用してグラフを表示しています。今後、Highcharts を読み込まないコンテンツ種別が追加された場合、そのコンテンツ種別ではこのサンプルエレメントは利用できないため注意してください。
  • 今回紹介するサンプルエレメントではオプションの指定に IM-BloomMaker の変数を使用しています。そのため、IM-BloomMaker の変数で表現できない値(Highcharts の変数やコールバック関数など)をオプションに指定することはできません。
  • intra-mart Accel Platform 2021 Summer 時点では Highcharts のバージョンは 7.0.3 です。それ以降のバージョンで追加されたオプションを指定しても動作しないので注意してください。
  • サンプルエレメントを利用する場合はよく動作確認を行ってください。

完成サンプル

以下の完成サンプルをダウンロードしてご活用ください。

e builder プロジェクト : im_cookbook_181352_highcharts.zip
imm ファイル : im_cookbook_181352_highcharts-1.0.0.imm

上記のサンプルは intra-mart Accel Platform 2021 Summer の環境で動作することを確認しています。
e builder プロジェクトはこの CookBook では使用しません。サンプルエレメントをカスタマイズする際に利用してください。

エレメントの使い方

  1. エレメントの追加
  2. プロパティの指定
  3. カスタマイズ

1. エレメントの追加

  • 上記の完成サンプルの imm ファイルを含めた war ファイルをデプロイしてください。手順の詳細は、以下のドキュメントを参照してください。
    intra-mart Accel Platform セットアップガイド

  • IM-BloomMaker のコンテンツ一覧画面を表示してください。

  • 任意のコンテンツを作成し、デザイナ画面を開いてください。

  • エレメントパレットに「CookBook181352 Highcharts Sample Category」カテゴリ、および、「CookBook181352 Highcharts Sample Element」エレメントがあることを確認してください。

2. プロパティの指定

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

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

  • 「CookBook181352 Highcharts Sample Element」エレメントをページに配置してください。

  • 配置した「CookBook181352 Highcharts Sample Element」エレメントを選択し、右ペインの「プロパティ」タブを開いてください。

  • 「json」プロパティに「$variable.json」を指定してください。

json プロパティは、Highcharts に渡すオプションです。このプロパティに指定した変数の配下のオプション項目がそのまま Highcharts で使用され、グラフが作成されます。
指定できるオプションについては、以下のリファレンスを参照してください。
https://api.highcharts.com/highcharts/
  • 「プレビュー」ボタンをクリックしてください。折れ線グラフと棒グラフが同時に表示され、ツールチップや凡例が変数で指定した通りの表示形式になっていることがわかります。

3. カスタマイズ

今回紹介したサンプルエレメントでは、json プロパティに指定したオプションをそのまま Highcharts に渡してグラフを表示する機能のみ実装しています。
グラフ上で選択されている要素を取得したい場合や、グラフデータをクリックした時にアクションを実行したい場合は、カスタマイズが必要です。
カスタマイズを行いたい場合は、「完成サンプル」の e Builder プロジェクトの中にあるエレメントのソースコードを編集し機能を追加してください。
エレメントの実装方法については、以下のドキュメントを参照してください。

intra-mart Accel Platform IM-BloomMaker プログラミングガイド

-CookBook
-

執筆者:


comment

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

関連記事

BloomMakerでワークフロー処理モーダルと動的処理対象者設定機能を利用してWorkflowコンテンツを作成する

このCookBookでは、BloomMakerで、ワークフロー処理モーダルと動的処理対象者設定機能を利用したWorkflowのコンテンツを作成する方法を紹介します。 本稿では、BloomMakerでワ …

no image

e Builder から Payara を起動する方法

この CookBook では、e Builder から Payara を起動する方法について紹介しています。 レシピ External Tools を表示します。 Program を追加します。 Pr …

no image

完了したワークフロー案件の登録データをメンテナンスする方法

このCookBookでは、IM-BISとIM-FormaDesignerで作成したワークフロー案件の登録データを編集する方法を紹介します。 一部制限はありますが、IM-FormaDesignerのアプ …

no image

スレッドダンプの取り方

このCookBookでは、スレッドダンプの取り方について紹介しています。 以下に手順を説明しますが、スレッドダンプは必ず問題の事象が発生している時に取得してください。 例えば、動作が重い・非同期処理が …

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

このCookBookでは、intra-mart Accel Platform 2019 Winter から利用可能になった IM-BloomMaker のグラフエレメントの使い方について紹介しています …