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

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

IM-BloomMaker グラフエレメントの使い方（円グラフ編） - intra-mart Developer Portal

この CookBook では、intra-mart Accel Platform 2019 Winter から

intra-mart Developer Portal -

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

完成サンプル

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

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 エディタに貼り付けて変数を作成してください。

{
  "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"
            }
          }
        }
      ]
    }
  }
}

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

• 「プレビュー」ボタンをクリックしてください。折れ線グラフと棒グラフが同時に表示され、ツールチップや凡例が変数で指定した通りの表示形式になっていることがわかります。
  

3. カスタマイズ

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

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