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

この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. エレメントの追加

上記の完成サンプルの imm ファイルを含めた war ファイルをデプロイしてください。手順の詳細は、以下のドキュメントを参照してください。
intra-mart Accel Platform セットアップガイド
IM-BloomMaker のコンテンツ一覧画面を表示してください。
任意のコンテンツを作成し、デザイナ画面を開いてください。
エレメントパレットに「CookBook181352 Highcharts Sample Category」カテゴリ、および、「CookBook181352 Highcharts Sample Element」エレメントがあることを確認してください。

2. プロパティの指定

デザイナ画面の右ペインの変数タブを開き、プルダウンの設定値が「変数」になっていることを確認してください。
以下の JSON を JSON エディタに貼り付けて変数を作成してください。

{
  "json": {
    "title": {
      "text": "CookBook 181352 Highcharts"
    },
    "subtitle": {
      "text": "sample"
    },
    "yAxis": {
      "title": {
        "text": "value"
      }
    },
    "legend": {
      "layout": "vertical",
      "align": "right",
      "verticalAlign": "middle"
    },
    "tooltip": {
      "crosshairs": true,
      "shared": true
    },
    "plotOptions": {
      "series": {
        "label": {
          "connectorAllowed": false
        },
        "pointStart": 2010
      }
    },
    "series": [
      {
        "name": "Data A",
        "type": "line",
        "zIndex": 1,
        "color": "rgb(181,230,29)",
        "data": [
          1,
          3,
          5,
          7,
          9
        ]
      },
      {
        "name": "Data B",
        "type": "column",
        "zIndex": 0,
        "color": "rgb(255,160,30)",
        "data": [
          1,
          2,
          4,
          8,
          16
        ]
      }
    ],
    "responsive": {
      "rules": [
        {
          "condition": {
            "maxWidth": 500
          },
          "chartOptions": {
            "legend": {
              "layout": "horizontal",
              "align": "center",
              "verticalAlign": "bottom"
            }
          }
        }
      ]
    }
  }
}

{

"json": {

"title": {

"text": "CookBook 181352 Highcharts"

"subtitle": {

"text": "sample"

"yAxis": {

"title": {

"text": "value"

}

"legend": {

"layout": "vertical",

"align": "right",

"verticalAlign": "middle"

"tooltip": {

"crosshairs": true,

"shared": true

"plotOptions": {

"series": {

"label": {

"connectorAllowed": false

"pointStart": 2010

}

"series": [

{

"name": "Data A",

"type": "line",

"zIndex": 1,

"color": "rgb(181,230,29)",

"data": [

]

{

"name": "Data B",

"type": "column",

"zIndex": 0,

"color": "rgb(255,160,30)",

"data": [

]

}

"responsive": {

"rules": [

{

"condition": {

"maxWidth": 500

"chartOptions": {

"legend": {

"layout": "horizontal",

"align": "center",

"verticalAlign": "bottom"

}

]

}

「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 プログラミングガイド