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

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

関連記事

IM-BloomMaker フォーム部品(Bulma)のグループ化と結合の使い方

このCookBookでは、intra-mart Accel Platform 2020 Summer から利用可能になった コンテンツ種別「Bulma」の「フォーム部品(Bulma)」を使用したグルー …

スプレッドシートでSpreadJSライブラリを利用してFormaの画面に対して入力チェックを実行する方法

このCookBookでは、スプレッドシートでSpreadJSライブラリを利用して入力チェックを実行する方法について紹介しています。 SpreadJSライブラリはクライアントサイドで動作するため、サーバ …

IM-LogicDesignerを利用して、IM-Workflowの未処理案件の処理対象者を再展開する

このCookBookでは、IM-LogicDesignerを利用して、IM-Workflowの未処理案件の処理対象者を再展開する方法について紹介しています。 人事異動を重ねることで、未処理案件の中には …

no image

祝日や会社の予定を設定したカレンダーを作成する

このCookbookでは、祝日や独自の予定を設定したカレンダーを活用する方法について紹介します。テナント管理者はカレンダーの作成、メンテナンスを行えます。また、テナントのデフォルトカレンダーを設定でき …

標準の画面アイテムを利用して「先頭へ戻る」ボタンを実現する

このCookBookでは、標準の画面アイテムを利用して「先頭へ戻る」ボタンを実現する方法について紹介しています。 本稿では、表示する項目が多く縦長い画面で下へスクロールすると右下に「先頭へ戻る」ボタン …