MZ Platform開発チュートリアルL11（ガントチャート）

このチュートリアルは『開発チュートリアル（実践編）』を基に説明しています。
サンプルアプリケーションAP_DATA\Tutorialフォルダ内「Lesson11(ガントチャート).mzax」です。

  1. ガントチャートとは

    2. ガントチャートとは

    参考： 基本のコンポーネント＞グラフ ＞ガントチャート

    工場などで人 や工程などの管理に用いられる帯状のグラフです。横軸では時間などの期間、縦軸では人・製造工程・作業工程 等を表し、それぞれ開始日（時間）、完了日（時間）といった情報を帯状に示します。
    MZ Platformでは標準コンポーネントでガントチャートを提供しています。

    ガントチャートで使用するデータ

    1. 1列目が項目名となる文字列型、2列目以降に開始日時と終了日時の2列一組の日付型または文字列型のテーブルデー タを用意します。
      2組の列のうち第一列の列名が系列名となります。
      系列データが文字列型の場合は「年/月/日 時:分:秒 」の書式（例：2022/12/12 12:00:00)で書きます。
      2. WorkName 神立
      		石岡
      		高萩
      見積り 2023/6/8 8:30:00 2023/6/8 12:30:00



      設計

      		2023/6/9 11:30:00 2023/6/10 14:30:00

      調達



      		2023/6/11 8:30:00 2023/6/12 17:30:00


    折れ線グラフ表示例

  2. テーブルデータの入力

    3. 完成画面例

    ［フレーム］画面に［テーブル］を配置します。
    列と行を追加し、列名を入力します。
    セルに項目名や時刻を入力します。

    テーブルの配置

    コ ンポーネント追加
      1. 以下のコンポーネントを追加します。
        2. コンポーネント名 必要数 カテゴリー コンポーネントキー
        フレーム １ 画面構成部品＞ウィンドウ 作業予定表
        テーブル １ 画面構成部品＞テーブル
    画面編集
    1. ツールボタンの［画面編集］ボタンを押して、画面編集画面に入ります。
      2. 画面編集画面の編集領域上で右クリック＞［コンポーネント追加］＞から［テーブル］を選択し、追加します。
      画面編集画面を閉じます。
    2. 基本の接続処理を作成します。
      3. アプリケーションを開始したらフレームを表示する、フレームを閉じたらアプリケーションを終了する、基本の接続を作成します。
      参考： 使ってみよう＞画面を作ってみよう（L4）＞基本の接続処理
    画面配置例　

    列と行の作成

    参考：使ってみよう＞テーブ ルを使ってみよう＞列と行の作成
    1. 列の追加
      1. テーブルの上で右クリック＞[ テーブル］＞［列］＞［追加］＞［一列］＞［文字列］を選びます。
        列数を入力する窓が表示されます。
      2. 追加列数を「1」と入力します。
        一列だけ列が表示されます。
        項目名を入力する列となります。
      3. もう一度テーブルの上で右クリック＞[ テーブル］＞［列］＞［追加］＞［複数列］＞［日付］を選びます。
      4. 追加列数を「6」と入力します。
        5.  2列一組で日付を入れる列となります。
        灰色の列ヘッダーが追加されて表示されます。
        行はまだ表示されま せん。
    2. 行の追加
      1. テーブルの上で右クリック＞[ テーブル］＞［行］＞［追加］＞［複数行…］を選びます。
        行数を入力する窓が表示されます。
      2. 追加行数を「3」と入力します。
        行が追加されて表示されます。
    3. テーブル表示領域の調整
      4. 画面編集
      1. 画面編集画面に入り、テーブルの表示領域を横長に調整します。
    列と行の作成例

    工程データの入力

    ここでは手入力でデータを入力します。

    列名の入力

    1. 列の上で右クリック＞列＞列名…を選び、列名の入力窓で列名を入力します。
      2. 左端の列名には 「WorkName」と入力します。
    2. 以降の列には2列一組のうち左側の列名に、それぞれ工程担当者名を入力します（例：「神立」「石岡」「高萩」）。
      3. ※2列とも列名を入力した場合 は、左側の列の列名が優先して工程名として使用されます。
    3. 列と列の間にマウスカーソルを合わせて、列幅を調整します。

    日時データの入力

    1. 完成画面例を参考に、左端の列に作業項目名を入力します。
      例：「見積り」「設計」「調達」
    2. 2列目から開始日時と終了日時のデータを入力します。
      3. ［テーブル］の日付型列の既定の表示属性は「日付と時間」になっ ており、「年/月/日 時:分:秒」の形式で入力します。


  3. ガントチャートの表示

    4. ガントチャートへのデータ設定

    画面編集
    1. 画面編集画面に入り［ガントチャート］を［フレーム］上に配置します。
      2. 配置方法は「縦方向整列」または「手動配置」に変更します。
      ガントチャートの表示領域を［テーブル］に合わせて調整します。
    接続処理設定
    1. ［テーブル］のデータを［ガントチャート］へ設定する
      1. 【接続1】アプリケーション開始時に、［テーブル］からテーブルデータを取得して、［ガントチャート］に設定します。
      2. ［フレームを表示する］接続と順番を入れ替えて、フレーム画面表示前にデータが設定されるようにします。
    確認実 行するとガントチャートが表示されます。
    次項を参考に表示属性を変更する必要があります。


    画面配置例
    ［編集画面図1］

    グラフの属性設定の調整

    属性情報の設定

    以下を参考にガントチャート表示の調整をします。
    グラフエリアで右クリックし、メニューを表示します。

    ※赤色で縦に表示されている線は現在日時を表しています。

    1. グラフ表示の開始日時 ［ガントチャート］－［時間軸］－［表示開始日時…］
      データの始まりとずれている場合には調整します。
    2. グラフの表示期間 ［ガントチャート］－［時間軸］－［表示期間…］
      3. 例：「1週」に設定します。
    3. 数値軸の目盛り間隔 ［ガントチャート］－［時間軸］－［大目盛間隔…］
      4. 例：「1日」に設定します。
    4. ［ガントチャート］－［時間軸］－［小目盛間隔…］
      5. 例：「6時間」に設定します。

    属性設定メニュー例

    データ連動の設定

    L8の折れ線グラフでも設定したのと同じように、［テーブル］と［ガントチャート］のどちら一方が変更されたときに、連動してもう一方も変更 される処理を設定します。
    参考：使ってみよ う＞L8（グラフを使ってみよう）

    接続処理設定
    1. ［テーブル］の更新データを［折れ線グラフ］へ設定する
      1. 【接続2】［テーブル］のデータ更新イベントの接続先を［ガントチャート］に設定します。
        引数の取得方法に「イベント内包」、メソッド／値に「イベント対象データ」を選択します。
    2. ［ガントチャート］の更新データを［テーブル］へ設定する
      1. 【接続3】メソッド「テーブルデータを設定する引数の取得方法引数の取得方法に「イベント内包」、メソッド／値に「イベント 対象データ」を選択します
    確認［テーブル］や［ガントチャート］のデータを変更すると連動して表 示が変わることを確認します。

    完成画面例
    ［編集画面図2］ 　

  4. ガントチャートの属性メニュー

    5. ガントチャートの属性設定

    ［ガントチャート］を右クリックして表示されるポップアップメニューから表示属性の設定ができます。

    1. タスクの移動、分割
      2. ※［ガントチャート］内部 のテーブルデータも変更されます。
      1. タスクの縦移動
        2. 　［ガントチャート］＞［縦ドラッグ］＞［有効］を選択すると、マウスでドラッグしてタスクの帯を移動することができます。
      2. タスクの分割
        3. タスクを選択状態にし、ポップアップメニューから［ガントチャート］＞［タスク］＞［タスク分割...］を選択すると、確認画面が表 示され、「はい」を選択すると選択中のタスクが２ つに分割されます。
    2. 稼働・非稼働日時の設定
      3. ［ガントチャート］＞［その他］で稼働日時に関する設定ができます。
      1. 週の初めの曜日
        2. 週の初めを曜日を任意に設定することができます。
      2. 稼働日時
        3. 通常の稼働日時として、曜日や時間帯を設定できます。
        また、特定の非稼働日時・稼働日時もリストで設定できます。
      3. 非稼働日の背景、非稼働日の背景色
        4. ［非稼働日の背景］＞［描画する］を選択すると、設定した非稼働日の背景色になります。
    3. 作業項目軸
      4. 項目ラベルや目盛線について設定ができます。
      表示項目数はデータに合わせて変更します。
    4. 時間軸
      1. 基準日時
        2. 時間軸の起点となる日時です。
      2. 表示開始日時
        3. 画面表示の開始の日時です。
      3. 表示期間
        4. 画面表示期間を設定します。
      4. 最小単位
        5. マウスで左右にドラッグしたときの、タスクが移動する最小単位を設定します。
      5. 大項目ラベル、大項目ラベル形式、大項目目盛線、大目盛間隔
        6. ラベル表示の有無、表示形式（例：yy/MM/dd）を設定できます。
        また、目盛線表示の有無や間隔を設定します。
      6. 小項目ラベル、小項目ラベル形式、小項目目盛線、小目盛間隔
        7. ラベル表示の有無、表示形式（例：HH:mm）を設定できます。
        また、目盛線表示の有無や間隔を設定します。
      7. ラベル表示高さ
        8. ガントチャート画面で数値軸ラベルが表示される位置を設定します。
    5. タスク
      1. マウス操作
        2. マウスでドラッグして移動させるか設定します。
      2. バーの高さ
        3. タスクの項目欄の高さに対するタスクバーの高さの割合を設定します。
      3. 開始日時ラベル、終了日時ラベル、日時表示形式
        4. タスクの前後に表示形式を指定して開始、終了日時のラベルを付けることができます。
      4. タスク名、タスクフォント
        5. タスク名の表示有無とフォントを設定します。
        ※タスク名は一つずつタスクを選択して、［タスクデータ］から設定する他に、テーブル形式のタスク名データを用意して設定できます。
      5. 透明度
        6. タスクを透過させることができます。
      6. 系列の色
        7. 選択したタスクの色を設定します。

      ※以下のメニューはタスク選択時に右クリックしたときに表示されます。

      1. タスク分割
        2. 選択したタスクを分割します。
      2. タスク削除
        3. 選択したタスクを削除します。
      3. タスクデータ
        4. 開始日時、終了日時、タスク名を変更することができます。
    6. 現在日時、特定日時
      7. 既定では赤色の線でで現在日時が表示されます。
       表示の有無、線の色と太さが設定します。
      日時を指定して特定日時の線も表示できます。
    7. 縦ドラッグ
    8. コネクター
      9. 1つのタスクの上で右クリックし、もう一つのタスクの上までドラッグして放すと2つのタスクの間にコネクターを設定できます。
      表示有無、先端形状、色を設定します。
    9. アイコン
      10. 各タスクを選択しアイコンをタスクの左右または中央に設定することができます。
    10. パネル、ヘッダ、フッタ、凡例
      11. 前景色、背景色やタイトル等設定することができます。
    タスク移動例：赤色のタスクを移動
    稼働日時設定画面
    透明度、コネクター、アイコンを設定

  5. ガントチャート表示の実際

    6. 基本形式以外のガントチャート用データ

    ガントチャートで使用するデータ項で紹介した 基本のデータ形式だけではなく、5 列ないし 4 列（「タスク名」の設定は任意）の テーブルデータを［ガントチャート］に設定できます。
    順に「項目名」、「系列名」、「開始日時」、「終了日時」、「タスク名」となる列データを持つ必要があります。
    このメソッドでデータを設定した時はテーブル とガントチャートの連動の設定も前項とは違った設定方法になります。

    接続処理設定
    1. ガントチャートデータの設定
      1. 【接続1】、【接続2】で［ガントチャート］のデータ設定のメソッドを変更して 「setRecordTable（PFObjectTale）」を 選択します。
        2. 起動メソッド設定の際に「全メソッド対象」にチェックを入れると、英語名のメソッドが選択できます。

    画面編集
    1. 表示属性の調整
        2. 「実行（設定可）」ボタンで実行します。
      1. 前項で設定したのと同じように、表示期間等を変更します。
      2. ［ガントチャート］＞［作業項目軸］＞［表示項目数…］をデータに合わせて調整します。
      3. ［ガントチャート］＞［タスク］＞［タスク名］＞［表示する］を選択すると、タスク名が表示されま す。
        4. ※タスク名は各タスクデータの上で右クリック＞［ガントチャート］＞［タスク］＞［タスクデータ...］から「タスクデータ」窓で設 定することができますが、通常はテーブルデータで一括して設定します。
    2. 属性設定の変更
      1. 「ChartDataAutoAdjustment」の項を「true」に設定します。
        2. ［ビルダー 編集画面上でコンポーネントを右クリックし＞［属性情報設定...］で属性情報設定画面を開きます。
        同項目で同系列のデータがある場合系列の判例が複数の色で表示されていたのが、同系列は同じ系列色に変わり ます。

    テーブルデータ例
    系列が複数できる場合がある
    ［編集画面図3］起動メソッド情報は上の図を参照

    ※［ガントチャート］のデータ更新イベントから取得できるテーブルデータは基本の形のテーブルデータで、［テーブル］に設定された形式と違ってしまうので、［ガントチャー ト］が更新されたときのイベント処理は設定しません。

    グラフデータ作成複合コンポーネントの利用

    参考：グラフ化複合コン ポーネントチュートリアル

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

    完成画面例