CookBook

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

投稿日:2019-12-17 更新日:

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

グラフエレメントは、Highcharts を利用してグラフを表示するエレメントです。
Highcharts の仕様については、Highcharts が公開している以下のリファレンスを参照してください。
https://api.highcharts.com/highcharts/

完成サンプル

以下の完成サンプルをダウンロードしてご活用ください。
IM-BloomMakerのインポート機能を利用してインポートしてください。

画面サンプルインポートファイル : cookbook_169226.zip
ローカル環境で表示させる場合は、以下のURLにアクセスしてください。
http://localhost:8080/imart/bloommaker/designer/im_cookbook_169226?css-framework=imui&content-definition-type=content
なおベースURLである以下の部分は、環境に合わせて適宜変更してください。
http://localhost:8080/imart

レシピ

この CookBook で行う内容を以下に示します。

  1. グラフに表示するデータを作成する
  2. グラフエレメントを配置し、データを設定する
  3. プロパティを編集し、グラフの見た目を整える

1. グラフに表示するデータを作成する

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

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

2. グラフを配置し、データを設定する

  • エレメントパレットの「グラフ」から、「折れ線グラフ」をページに配置してください。

  • 配置した「折れ線グラフ」エレメントを選択し、右ペインの「プロパティ」タブを開いてください。

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

グラフエレメントの series プロパティは、Highcharts の series オプションに相当します。
series オプションの詳細は Highcharts が公開している以下のリファレンスを参照してください。
https://api.highcharts.com/highcharts/series.line

IM-BloomMaker では、series オプション配下の各オプションを設定したマップ型の変数を設定することでグラフを表示します。

ただし、IM-BloomMaker では、series 配下に指定できるオプションを制限しています。
折れ線グラフの場合、指定できるオプションは以下の通りです。それ以外のオプションは無視されます。

3. プロパティを編集し、グラフの見た目を整える

  • 「title」プロパティに「Transition in smartphone ownership rate (Japan)」を設定してください。

  • 「yAxisTitle」プロパティに「Number of people」を設定してください。

  • 「yAxisLabelsFormat」に「{value} %」を設定してください。

yAxisLabelsFormat プロパティでグラフのY軸のラベルのフォーマットを変更することができます。
「{value}」 は Highcharts が用意している変数で、Y軸の値を保持しています。
例えば、Y軸が距離を表す場合は、「{value} km」のように入力することで、Y軸のラベルに「km」の単位を表示することができます。
  • 「xAxisCategories」に「2011,2012,2013,2014,2015,2016」を設定してください。
xAxisCategories プロパティは、X軸のラベルに表示する文字列を指定するプロパティです。
固定値の場合は、ラベルに表示したい文字列をカンマ区切りで入力してください。
入力した文字列がカンマ区切りで分割され、X軸の左から順番に割り当てられます。

変数値の場合は、文字列型の変数か、配列を設定してください。
文字列型の変数の場合は、固定値と同様に文字列がカンマ区切りで分割されX軸に割り当てられます。
配列の場合は、配列の要素がX軸の左から順番に割り当てられます。

以上で、グラフエレメントの設定は完了です。
必要に応じて、その他のプロパティを編集してください。
「プレビュー」ボタンをクリックして、配置したグラフエレメントの動作確認を行ってください。
グラフ上のポイントにマウスオーバーすると、そのポイントの情報がツールチップで表示されます。
グラフの下部にある凡例をクリックすると、対象のデータ要素の表示/非表示を切り替えることができます。

-CookBook
-

執筆者:


  1. […] になった IM-BloomMaker の円グラフの活用方法について紹介しています。 グラフエレメントの基本的な使い方を学びたい方は、以下の記事を参照してください。 http://dev.intra-mart.jp/cookbook169226/ […]

comment

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

関連記事

no image

FormaのスクリプトからAjax処理を呼び出す

このCookBookでは、Formaのスクリプトからサーバサイドロジックを呼び出し、Ajax処理を実現する方法をご紹介します。 IM-LogicDesignerを利用し、サーバサイドロジックとその呼び …

no image

Payara 5.184 を Google Kubernetes Engine(GKE) から利用する

この CookBook では、Payara を GKE 上で実行しクラスタリングを構築する手順について紹介しています。 Payara 5.184 で Kubernetes Cluster Mode が …

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

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

no image

画面に確認ダイアログ(コンファーム)を表示する

画面に確認ダイアログ(imuiConfirm)を表示する方法をご紹介します。 確認ダイアログとは以下の画像のように、ユーザが選択した操作を本当に実行するかどうか確認するための機能です。 確認ダイアログ …

no image

intra-martを初めて使う開発者が、まずは e Builder で「Hello world!」する方法

e Builder は、intra-mart Accel Platform で動作するアプリケーションを開発するための開発支援ツールです。 このレッスンでは、intra-martを初めて使う開発者が …

RSSRSSRSSRSS