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

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

  1. 複合コンポーネントを使ったグラフ表示
  2. グラフデータ作成複合コンポーネントとは

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

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

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

  3. 画面作成例
  4. 画面作成例

    コンポーネント追加

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

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

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

  5. グラフ表示処理の作成
  6. 積上棒グラフ表示

    接続処理設定

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

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

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

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

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

    接続処理の 作成
    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]  

    ヒストグラム表示

    接続処理設定

    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]  

  7. 開始/終了処理の作成
  8. 開始/終了処理の作成

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

    コンポーネント追加

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

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

  9. グラフ化複合コンポーネントの引数設定方法
    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: タスク名を与える列名あるいは列インデックス
        戻り値: タスク名テーブル

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