MZ Platformグラフ化複合コンポーネントチュートリアル

このチュートリアルはsampleフォルダ内の「グラフ化.mzax」を基に説明しています。

1.複合コンポーネントを使ったグラフ表示

1.1グラフデータ作成複合コンポーネントとは


1.グラフ化作成複合コンポーネントとは

  1. [グラフデータ作成]複合コンポーネントとは
  2. グラフを表示するときには、各 グラフの書式 に則ったテーブ ルデータを用意しなければなりませんが、[グラフデータ作成]複合コン ポーネントを使うと簡単に テーブルデータを整理して、グラフ表示ができます。

  3. 表示できるグラフの種類
  4. 複合コンポーネントでの簡単な設定で表示できるグラフは以下の通りです。

  5. [グラフデータ作成]複合コンポーネント追加の仕方
  6. アプリケーションビルダー編集画面で右クリック>[複合コンポーネント追加]>[グラフ]>[グラフ化モジュール.mzcx]を選び ます。

1.2画面作成例

2.画面作成例

コンポーネント追加

  1. 追加するコンポーネントは以下の通りです。
  2. コンポーネント名 必要数 カテゴリー テキストまたはコンポーネントキー
    フレーム 1 画面構成部品>ウィンドウ
    ラベル 1 画面構成部品>ラベル 作業工程一覧
    ※テーブル 画面構成部品>テーブル 作業工程一覧
    ボタン 3 画面構成部品>ボタン 積上棒グラフ設定
    ガントチャート設定
    ヒストグラム設定
    タブ 1 画面構成部品>パネル 系列グラフ切替
    パネル 3 画面構成部品>パネル 工程別作業時間
    生産計画表
    単工程作業時間
    積上棒グラフ 画面構成部品>グラフ 工程別作業時間
    ガントチャート 画面構成部品>グラフ 生産計画表
    ヒストグラム 画面構成部品>グラフ 単工程作業時間
    ※[テーブル]にデータを設定する処理はここでは説明しません。 簡単に進めるにはサンプルファイルの「グラフ化.mzax」から[テーブル]コンポーネントをコピーします。

  1. フレーム表示処理作成
  2. 「アプリケーション開始時にフレームを表示する」、「フレームを閉じたときアプリケーションを終了する」基 本の接続処理を作ります。
  3. 画面作成
  4. 上部に[テーブル]、下部の[タブ]パネル上に[グラフ]を配置し、中央部の[ボタン]または[タブ]をクリックするとグラ フを表示するようにしま す。

    画面編集

    1. 「画面編集画面」に入り、「手動配置」で[フレーム]にコンポーネントを追加、配置します。
      上部に[ラベル]と[テーブル]、その下の中央部分に3つの[ボタン]を配置します。
    2. フレーム画面下部に[タブ]を追加します。
      コンポーネント追加でフレーム画面下部にタブを追加後、左側ツリー図の[タブ]名の上で右クリックし、[(新規)コンポーネント 追 加]からパネルを3つ追加します。
      各パネルの上で右クリックして、各一つずつグラフを追加します。
    3. 「実行(設定可)」ボタンで実行し、右の図を参考ボタン名等を変更します。
      1. ボタン名をそれぞれ「積上棒グラフ設定」、「ガントチャート設定」、「ヒストグラ ム設定」に変更します。
      2. タブの各タイトルを右クリックして、「積上棒グラフ」、「ガントチャート」、「ヒストグラム」に変更します。
      3. [ラベル]名を[作業工程一覧]に変更します。
      4. パネルのコンポーネントキーをそれぞれ「工程別作業時間」、「生産計画表」、「単工程作業時間」に変更します。
完成画面例 
画面編集パネル追加例

1.3グラフ表示処理の作成

1.積上棒グラフ表示

接続処理設定

  1. 系列グラフ用データの作成
  2. [グラフデータ作成]に引数としてテーブルデータを設定し、項目、系列等に列名または列番号を指定するこ とで積み上げ棒グラフ用に整理した テーブルデータを作成します。

    説明 取得方法 コンポーネント メソッド/値
    引数0 テーブルデータ メソッド戻り値 テーブル(工程) テーブルデータを取得する
    引数1 項目列 固定値
    工程または0
    引数2 系列列 固定値
    受注番号または4
    引数3 セル値列 固定値
    作業時間(分)または3

  3. 積上棒グラフへデータ設定
    1. 【接続1-2】作成されたテーブルデータを積上棒グラフに設定します。
    2. 【接続1-3】系列色のリストを設定します。
    3. 既定では同じ系列でも項目が違うと違う色で表示されます。同系列は同じ色で 表示されるように色のリス トを設定します。

    [編集画面図1]  ※右側の接続先コンポーネントをクリックすると、起動メソッド情報の画像が表示されます。

2.ガントチャートグラフ表示

接続処理の 作成
  1. ガントチャート用データの作成
  2. [グラフデータ作成]に引数としてテーブル データを設定し、項 目、系列、開始日時、終了日時に列 名または列番号を指定することでガントチャート用に整理したテーブルデータを作成できます。
    1. 【接続4-1】ガントチャート用テーブルデータを複合コンポーネント内で作成します。
      (引数設定例)

      説明 取得方法 コンポーネント メソッド/値
      引数0 テーブルデータ メソッド戻り値 テーブル(工程) テーブルデータを取得する
      引数1 系列列 固定値
      受注番号または4
      引数2 項目列 固定値
      工程または0
      引数3 開始日時列 固定値
      開始時刻または1
      引数4 終了日時列 固定値
      終了時刻または2
    2. 【接続4-2】タスク名用のテーブル デー タを複合コンポーネント内で作成します。
      タスク名はテーブル型のデータによって一括で設定することができます。
      先にガントチャート用データ作成を行っていることが必要です。
  3. ガントチャートへデータ設定
    1. 【接続4-3】作成されたテーブルデータをガントチャートに設定します。
    2. 【接続4-4】作成されたタスク名データをガントチャートに設定します。
  4. 全系列の色を設定する
  5. 同系列は同じ色で 表示されるように色のリストを設定します。
    1. 【接続4-5】系列色のリストを設定します。
  6. 属性設定の変更
    1. 表示開始日、表示期間、時間軸の大目盛間隔、小目盛間隔などを変更します。
      (変更例)表示期間:1か月 大目盛間隔:1週間 小目盛間隔:1日
      1. ガントチャート上で右クリック>[ガントチャート]>[時間軸]>[表示期間...]を選択します。
        設定窓で1月を入力し、「適用」ボタンを押します。
      2. ガントチャート上で右クリック>[ガントチャート]>[時間軸]>[大目盛間隔..]を選択します。
        設定窓で1週を入力し、「適用」ボタンを押します。
      3. ガントチャート上で右クリック>[ガントチャート]>[時間軸]>[小目盛間隔...]を選択します。
        設定窓で1日を入力し、「適用」ボタンを押します。
    2. タスク名を表示できるようにします。
      ガントチャート上で右クリック>[ガントチャート]>[タスク]>[タスク名]>[表示する]を選択します。

    [編集画面図2]

3.ヒストグラム表示

接続処理設定

  1. ヒストグラム用データの作成
  2. [グラフデータ作成]に引数としてテーブルデータを設定し、項目、系列等に列名 または列番号を指定することでヒストグラム用に整理した テーブルデータを作成します。
    1. 【接続3-1】グラフデータ作成複合コンポーネント内でヒストグラム用データを作成します。

    2. 説明 取得方法 コンポーネント メソッド/値
      引数0 テーブルデータ メソッド戻り値 テーブル(作業工程一覧) テーブルデータを取得する
      引数1 集計対象列 固定値
      作業時間(分)
      引数2 区間幅 固定値
      50
  3. ヒストグラムへデータ設定
    1. 【接続3-2】作成されたテーブルデータをヒストグラムに設定します。
  4. 属性設定の変更
    1. ヒストグラム上で右クリック>[ヒストグラム]>[数値軸の方向]>[横]を選択します。
    2. ヒストグラム上で右クリック>[ヒストグラム]>[データラベルの表示有無]>[表示しない]を選択します。
    3. ヒストグラム上で右クリック>[凡例]>[表示有無]>[表示しない]を選択します。
    4. ヒストグラム上で右クリック>[数値軸]>[タイトル...]
      設定窓で「作業時間」と入力し、「適用」ボタンを押します。

    [編集画面図3]

ボタンを押したときに、同時にタブの選択を切り替えます。
一つ目の接続を作ったら、コピー&ペーストし、引数の値だけ変更すると簡単です。
各ボタンの 接続の最後に処理を追加します。

接続処理設定

  1. タブ(積上棒グラフ)の選択
    1. 【接続1-4】タブの選択位置0を指定します。
      [ボタン(積上げ棒グラフ設定)]の接続処理の最後に追加します。
  1. タブ(ガントチャート)の選択
    1. 【接続2-6】タブの選択位置1を指定します。
      [ボタン(ガントチャート設定)]の接続処理の最後に追加します。
  1. タブ(ヒストグラム)の選択
    1. 【接続3-3】タブの選択位置2を指定します。
      [ボタン(ヒストグラム設定)]の接続処理の最後に追加します。

    [編集画面図4]

1.4開始/終了処理の作成

終了前に画面構成部品であるグラフのクリアが必要です。
また、[グラフデータ作成]複合コンポーネントの初期化と終了処理を設定します。

1.グラフのクリアの設定

コンポーネント追加

  1. 複数の処理をまとめるために、[サブルーチン]を追加し、コンポーネントキーを「グラフクリア」に変更します。

接続処理設定
  1. グラフのクリア、終了処理
    1. 【接続4-1】サブルーチンを先頭に積み上げ棒グラフクリアの処理を設定します。
    2. 【接続4-2】サブルーチンを先頭にガントチャートクリアの処理を設定します。
    3. 【接続4-3】サブルーチンを先頭にヒストグラムクリアの処理を設定します。
    4. 【接続5-1】アプリケーション終了イベントに[サブルーチン(グラフクリア)]を接続します。
    5. 【接続5-2】アプリケーション終了イベントに[グラフ作成]複合コンポーネントの終了処理を設定します。
  2. 初期化処理
    1. 【接続0-2】アプリケーション開始イベントに[グラフ作成]複合コンポーネントの初期化処理を設定しま す。

    [編集画面図5]

2.グラフ化複合コンポーネントの引数設定方法

  1. [分類テーブル作成]コンポーネント
  2. この複合コンポーネントの内部では[分類テーブル作成]を使用しています。
    引数で指定した値により[分類テーブル作成]データを分類します。
    ※デフォルトではデータはソートされていますが、属性 情報の「unsorted=true」にすることで並び替えしないようにできます。

  3. 系列グラフ
    1. 対象グラフ メソッド
      棒グラフ
      積上棒グラフ
      折れ線グラフ
      面グラフ
      積上面グラフ
      重ね合わせ系列グラフ
      与えられたテーブル データを整理し、系列グラフ用のテーブルデータを作成する。

      メソッド:系列グラフテーブル作成 (Object, Object, Object,Object)
      引数0 : テーブルデータ
      引数1 : 分類 対象の項目となる列名あるいは列インデックス
      引数2 : 分類対象の系列となる列名あるいは列インデックス
      引数3 : 系列グラフテーブルのセル値となる列名あるいは 列インデックス
      戻り値 : 系列グラフテーブルデータ

      メソッド:系列グラフテーブルの取得()
      メソッド:系列グラフ用に分類したテーブルの取得()
      メソッド:系列グラフの色リスト取得()

    2. XYグラフ
    3. 対象グラフ メソッド
      散布図
      バブルチャート
      与えられたテーブルデータを整理し、 XY グラフ用のテーブルデータを作 成する。

      メソッド:散布図テーブル作成(Object, Object, Object, Object)
      メソッド:バブルチャートテーブル作成 (Object, Object, Object, Object,Object)
      引数0 : テーブルデータ
      引数1 : 系列となる列名あるいは列インデックス
      引数2 : X 座標データとなる列名あるいは列インデックス
      引数3 : Y 座標データとなる列名あるいは列インデックス
      引数4 : 点の半径(バブルチャートの場合)
      戻り値 : XY グラフテーブルデータ

      メソッド:散布図テーブルの取得()
      メソッド:散布図用に分類したテーブルの取得()
      メソッド:散 布図の色リスト取得()
      メソッド:バブルチャートテーブルの取得()
      メソッド:バブルチャート用に分類したテーブルの取得()
      メソッド:バブルチャートの色リスト取得()

    4. 円グラフ
    5. 対象グラフ メソッド
      円グラフ 与えられたテーブルデータ から、円グラフ用のテーブルデータを作成する。

      メソッド:円グラフテーブル作成(Object, Object, Object)
      引数0: テーブルデータ
      引数1: 系列名データの入った列名あるいは列インデックス
      引数2: 系列値データの入った列名あるいは列インデックス
      戻り値: 円グラフ用テー ブルデータ

      メソッド:円グラフテーブルの取得()

    6. ヒストグラム
    7. 対象グラフ メソッド
      ヒストグラム 与えられたテーブルデータ を集計し、ヒストグラム用のテーブルデータを作成する。

      メソッド:ヒストグラムテーブル作成(Object, Object, Object)
      メソッド:ヒストグラムテーブル作成(Object, Object, Object, Object)
      引数0: テーブルデータ
      引数1: 集計対象の列名あるいは列インデックス
      引数2: ヒストグラムの区間幅
      引数3: ヒストグラムの基準値(オプション、標準値は 0)
      戻り値: ヒストグ ラム用テーブルデータ

      メソッド:ヒストグラムテーブルの取得()

    8. ガントチャート
    9. 対象グラフ メソッド
      ガントチャート 与えられたテーブルデータ を分類・整理し、ガントチャート用のテーブル
      データを作成する。

      メソッド:ガントチャートテーブル作成(Object, Object, Object, Object, Object)
      引数0: テーブルデータ
      引数1: 分類対象の項目となる列名あるいは列インデックス
      引数2: 分類対象の系列となる列名あるいは列インデックス
      引数3: ガントチャートテーブルの開始時刻となる列名あるいは列インデックス
      引数4: ガントチャートテーブルの終了時刻となる列名あるいは列インデックス
      戻り値: ガントチャートテーブルデータ

      メソッド:ガントチャートタスク名テーブル作成(Object)
      (このメソッドは、ガントチャートテーブルを作成したあとでなければ正しく動作しません。)
      引数0: タスク名を与える列名あるいは列インデックス
      戻り値: タスク名テーブル

      メソッド:ガントチャートテーブルの取得()
      メソッド:ガントチャート用に分類したテーブルの取得()
      メソッド:ガントチャートの系列色リスト取得()
      メソッド:ガントチャートタスク名テーブルの取得()