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

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

関連記事

no image

intra-martのアプリケーションをセットアップする

このCookBookでは、intra-mart Accel Collaborationをセットアップしてアプリケーションを使える状態にする方法を紹介します。レシピの最後では、実際にintra-mart …

no image

IM-LogicDesignerのIM-ContentsSearch コンテンツ登録タスク利用例

このCookBookでは、IM-LogicDesignerのIM-ContentsSearch コンテンツ登録タスクの利用例を紹介します。 IM-BISで作成したワークフローの案件終了処理で、画面項目 …

no image

Formaのスクリプトから処理対象者を制御するには

このCookBookでは、スクリプトを利用してIM-Workflowの動的ノード(動的承認、縦配置、横配置)の処理対象者を制御する方法をご紹介します。 スクリプトから動的処理対象者設定機能を利用するこ …

no image

EWS2017 「業務への適用イメージがすぐに湧く!  魔法の業務ロジック作成ツール『IM-LogicDesigner』実用例 10本勝負!」講演内容のご紹介

この記事では、EWS2017 Technology Track「業務への適用イメージがすぐに湧く!  魔法の業務ロジック作成ツール『IM-LogicDesigner』実用例 10本勝負!」での講演内容 …

no image

フォームに入力した内容をデータベースに登録する

登録フォームに入力した内容をデータベースに登録する手順をご紹介します。 今回は例として、CookBook:スクリプト開発で登録フォームを作成するで作成した登録フォームに入力された内容をデータベースに登 …