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

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

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

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

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

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

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

  2. 画面作成例

    3. 画面作成例

    コンポーネント追加

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

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

    1. 「画面編集画面」に入り、「手動配置」で［フレーム］にコンポーネントを追加、配置します。
      上部に［ラベル］と［テーブル］、その下の中央部分に３つの［ボタン］を配置します。

    2. フレーム画面下部に［タブ］を追加します。
      コンポーネント追加でフレーム画面下部にタブを追加後、左側ツリー図の［タブ］名の上で右クリックし、［（新規）コンポーネント 追 加］からパネルを３つ追加します。
      各パネルの上で右クリックして、各一つずつグラフを追加します。

    3. 「実行（設定可）」ボタンで実行し、右の図を参考ボタン名等を変更します。
      1. ボタン名をそれぞれ「積上棒グラフ設定」、「ガントチャート設定」、「ヒストグラ ム設定」に変更します。
      2. タブの各タイトルを右クリックして、「積上棒グラフ」、「ガントチャート」、「ヒストグラム」に変更します。
      3. ［ラベル］名を［作業工程一覧］に変更します。
      4. パネルのコンポーネントキーをそれぞれ「工程別作業時間」、「生産計画表」、「単工程作業時間」に変更します。
    完成画面例　
    画面編集パネル追加例

  3. グラフ表示処理の作成

    4. 積上棒グラフ表示

    接続処理設定

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

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

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

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

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

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

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

      ［編集画面図２］ 　

    ヒストグラム表示

    接続処理設定

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


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

      ［編集画面図3］ 　

    タブ切替表示

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

    接続処理設定

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

      ［編集画面図4］ 　

  4. 開始／終了処理の作成

    5. 開始／終了処理の作成

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

    コンポーネント追加

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

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

      ［編集画面図5］ 　

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

    1. ［分類テーブル作成］コンポーネント
      2. この複合コンポーネントの内部では［分類テーブル作成］を使用しています。
      このコンポーネントの中でテーブルデータを分類し、グラフ用データに整理しています。
      デフォルトではデータはソートされています。
      例えばソートして元のテーブルデータの表示順と変わってしまうのを回避するためには、属性情報の「unsorted＝true」にするこ とで並び替えしないようにできます。

    2. 系列グラフ

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

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

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

      1. XYグラフ

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

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

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

      2. 円グラフ

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

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

        メソッド：円グラフテーブルの取得（）

      3. ヒストグラム

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

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

        メソッド：ヒストグラムテーブルの取得（）

      4. ガントチャート

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

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

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

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