MZ Platform開発チュートリアルL８（折れ線グラフ）

このチュートリアルは『開発チュートリアル（応用編）』を基に説明しています。
サンプルアプリケーションAP_DATA\Tutorialフォルダ内「Lesson08(気温グラフ).mzax」、「Lesson08(気象情 報).mzax」です。

  1. グラフコンポーネント

    2. MZ Platformで使用できるグラフの種類

    参考: 基本のコンポーネント＞グラフ

    MZ Platformではデータをグラフ化して表示できます。
    １４種類のグラフコンポーネントが標準で提供されています。
    データによっては、テーブル（表）で見るよりもグラフで 見たほうがわかりやすい場合があります。
    数値データなどはグラフ化して、目で見てわかるようにします。

    系列グラフ（折れ線グラフ）とは

    1. 系列グラフとは
      2. 項目ごとの数値をグラフ化したもので
      1. 棒グラフ
      2. 折れ線グラフ
      3. 面グラフ
      4. 積み上げ棒グラフ
      5. 積み上げ面グラフ
        6. などがあります。

    2. 設定するデータの型
      1. 1列目は行の項目名となる文字列データ
        グラフにした場合、この項目が軸の目盛りラベルとして表示されます。
      2. 2列目以降は数値型のテーブルデータを用意します。
        数値データ以外が入っている場合、グラフにはできません。


        3. ※データベース等から取得したテーブルデータが基本の形と違っても、簡単にグラフ化できるように［グラフ データ作成］複 合コンポーネント が用意されています。

    3. 属性の設定
      1. 項目や数値軸、グラフの幅といった属性は、［実行（設定可）］ボタンで実行＞グラフの上で右クリック＞メ ニューから設定し ます。
      2. グラフ類は「実行］ボタンで実行したときや、アプリケーションローダーで実行したときでも右クリックすると表示属性設定 メニューが表示さ れます。
    折れ線グラフ表示例

  2. 折れ線グラフの表示

    3. 完成画面例

    ［フレーム］画面に［テーブル］と［折れ線グラフ］を配置します。
    データは予めチュートリアル用にに用意された複合コンポーネントからデータを取得し、表示します。

    画面編集

    コ ンポーネント追加
      1. 以下のコンポーネントを追加します。
        2. コンポーネント名 必要数 カテゴリー コンポーネントキー
        フレーム １ 画面構成部品＞ウィンドウ 月別平均気温
        テーブル １ 画面構成部品＞テーブル

        折れ線グラフ

        		 1 画面構成部品＞グラフ 平均気温
      ※コンポーネントキーは後でタイトルを設定すると、連動して変更されます。
    画面編集
    1. ツールボタンの［画面編集］を押して、画面編集画面に入ります。
      2. 画面編集画面の編集領域上で右クリック＞［コンポーネント追加］＞から［テーブル］と［折れ線グラフ］を選択し、追加します。
      ［フレーム］の上に横に並んで配置されます。
    2. 配置方法を変更します。
      3. 左下「配置」のコンボボックスをクリックして「横方向整列」から「縦方向整列」に変更します。
    3. 画面編集画面を閉じます。
    画面編集例　縦方向整列に変更

    データ設定処理の作成

    コンポーネント追加
    1. 気象情報データが入った複合コンポーネントを追加します。
      2. ビルダー編集画面で右クリック＞［複合コンポーネント追加］から保存されている複合コンポーネントをロードします。
      コンポーネント名 必要数 カテゴリー
      気象情報（Lesson8) １ チュートリアル＞気象情報（Lesson8).mzax
    接続処理設定
    1. 基本の処理の設定
      1. ［アプリケーション］を開始したら［フレーム］を表示する、［フレーム］を閉じたら［アプリケーション］を終了する、基本の 処理を作成します。
        参考： 使ってみよう＞画面を作ってみよう＞基本の接続処理
    2. テーブルデータの設定
      1. 【接続1】アプリケーション開始時にテーブルにテーブルデータを設定します。
        2. 参 考：基本操 作＞接続処理の作成＞接続先コンポーネントの設定　
        参考：基本 操作＞ 接続処理の作成＞起動メソッド設定
        1. アプリケーション開始イベントに［テーブル］を接続します。
        2. ダブルクリック、または右クリックメニューから起動メソッドを設定します。
          起動メソッド情報欄で、メソッド「テーブルデータを設定する （PFObjectTable)」を選択します。
        3. メソッドの引数を設定します。
          1. 引数設定欄のコンポーネント欄をクリックします。
            表示されるコンポーネント選択窓で、［気象情報（Lesson８）」を選択します。
          2. メソッド／値欄をクリックします。
            表示されるメソッド選択窓で、「各地の月別気温データを取得する」を選択します。

          ※下図［編集画面図1］を参照のこと
        4. 【接続2】折れ線グラフにテーブルデータを設定します。
          5. １と同様に引数には複合コンポーネントからデータを取得します。
        5. ［フレーム］を表示する前に上記【接続１】と【接続２】が行われるように、接続先をドラッグして処理の順番を入替えま す。
          6. ［テーブル］と［折れ線グラフ］にデータが設定されてから、画面が表示されるように、［フレーム］の接続処理を3番目に移動しま す。

    確認 ここまで設定して実行し、［テーブル］や［折れ線グラフ］に何らかの表がされれば、データが設定されています。
    次項の表示属性の調整をする必要があります。

    メソッド設定➀：メソッド欄をクリック
    引数設定➁：コンポーネント欄をクリック
    コンポーネント名を選択
    引数設定➂：メソッド／値欄の選択
    ドラッグして順番を入替

    ［編集画面図1］ 　接続１、接続２以外の起動メソッド情報設定画面図は省 略

    画面表示の調整

    テーブル表示領域の調整

    画面編集
    1. 画面編集画面に入り、テーブルの表示領域を調整します。
    端にカーソルを合わせてサイズを調整

    グラフの表示属性の調整

    属性情報の設定
      ［実行（設定可）］ボタンで実行し、画面を表示します。
      以下は設定例です。
    1. 折れ線グラフの設定
      2. ［折れ線グラフ］の上で右クリックして表示されるポップアップメニューから設定します。
      1. グラフのタイトル［ヘッダ］－［タイトル...］
        2. 「平均気温」と入力します。
      2. グラフタイトルのフォントサイズ［ヘッダ］－［フォント］－［設定する…］
        3. フォントの「サイズ」を「20」に設定します。
      3. グラフ表示の項目数［項目軸］－［表示項目数…］
        4. 表示項目数を「12」に設定します。12月まで表示されるようになります。
      4. グラフの数値軸のタイトル［数値軸］－［タイトル…］
        5. 　数値軸のタイトルを「気温（℃）」と入力します。
      5. グラフの数値軸の最大値　［数値軸］－［最大値…］
        6. 「35」に設定します。
      6. グラフの数値軸の最小値　［数値軸］－［最小値…］
        7. 「-10」に設定します。
      7. グラフの折れ線のデータラベルの表示　［折れ線グラフ］－［データラベルの表示有無］－［表示しない］
        8. 表示されていた値が表示されなくなります。
      8. パネルの背景色　［パネル］－［背景色］－［設定する…］
        9. 白色を選択します。
    2. フレームの設定
      3. ［フレーム］画面の領域上で右クリックして表示されるポップアップメニューから設定します。
      ※属性情報設定窓からも変更できます。
      1. フレームのタイトル　
        2. ［タイトル...］から「月別平均気温」と入力します。
    確認ここまで設定すると、完成画面図のようなグラフが表示されます。
    表示項目数の変更

    数値軸の最大値の設定

  3. データ変更の連動


    4. 完成画面例

    テーブルのデータを変更したら折れ線グラフに反映されるように、または折れ線グラフのデータを変更したらテーブルに反映されるように設 定を変更してみましょう 。

    1. ［折れ線グラフ］の値をマウスでドラッグして動かすと、［テーブル］の値も連動して変わります。
    2. ［テーブル］の値を入力して変更すると、［折れ線グラフ］の表示も変わります。
    完成画面例

    接続処理の作成

    接続処理設定
    1. ［テーブル］の更新データを［折れ線グラフ］へ設定する
      1. 【接続3】［テーブル］のデータ更新イベントの接続先を［折れ線グラフ］に設定します。
        2. 引数の取得方法に「イベント内包」、メソッド／値に「イベント対象データ」を選択します。
    2. ［折れ線グラフ］の更新データを［テーブル］へ設定する
      1. 【接続4】［折れ線グラフ］のデータ更新イベントの接続先を［テーブル］に設定します。
        2. 引数の取得方法に「イベント内包」、メソッド／値に「イベント対象データ」を選択します。

        ※このとき、「１」で作成した接続をコピーして利用すると簡単です。
        参考：基 本操作２＞コンポーネントのコピー＆ペースト＞イベント処理のコピー＆ペースト
        1. 【接続3】のデータ更新イベントの赤丸の上で右クリック＞コピーを選択します。
        2. 左側接続元［折れ線グラフ］を右クリック＞［イベント処理追加］＞［データ更新イベント］を選択します。
          3. イベントが追 加されます。
        3. 選択したイベントの赤丸の上で右クリック＞［貼り付け］を選択します。
          4. 接続先が貼り付けられます。
        4. 接続先を再選択します。
          5. 接続先の上で右クリック＞［接続コンポーネント選択］から［テーブル］を選択します。

    確認 ここまで設定し実行するとデータの連動ができますが、まだ完成ではなく、次項のイベント番号を設定する必要があります。

    イベント対象データを選択する

    イベントの接続処理のコピー

    接続先の再選択
    ［編集画面図2］

    イベント番号とは

    1. テーブルのイベント番号
      2. 　接続元コンポーネントと処理の接続先コンポーネントは「イベント」で接続しています。
      ここでは［テーブル］コンポーネントと［グラフ］コンポーネントを接続し、 一方のデータを変更したときにもう一方のデータも変更するように［データ更新イベント］を利用します。
       　テーブルデータの更新の種類は複数のケースがあります。
      キーボードから値を修正した場合も、行や列の追加／削除のようにデータ構造を変更する場合 も同じようにデータ更新イベントが発生します。
      　こうした複数のイベントの内容を識別するために『イベント番号』というものがあります。
      『イベント番号』とは同じイベントで複数の意味を持つ場合、それぞれのイベントに番号が振ってあり、どの意味なのか識別することができる というも のです。
      イベント番号を用いて、条件分けをして処理を行うことができます。
    2. データ更新イベントのイベント番号
      3. L8では「セルの値が更新されたケース」のみグラフに値を反映させたいので「イベント番号０」を設定します。
      イベント番号 内容
      ０ セルの値が更新されたケース
      １ 行が更新されたケース
      ２ 列が更新されたケース
      １０ 行が追加されたケース
      １１ 複数行が追加されたケース
      １２ 列が追加されたケース
      １３ 複数列が追加されたケース
      ２０ 行が削除されたケース
      ２１ 全行が削除されたケース
      ２２ 列が削除されたケース
      ２３ 全列が削除されたケース
      ２４ 全行列が削除されたケース
    3. グラフのイベント番号
      グラフのデータ更新は「マウスでドラッグした場合」のみイベントが発生しますので､複数のケースはありません。

    イベント番号の設定

    イベント番号設定処理

    【接続3】の［テーブル］が更新されたら［折れ線グラフ］を更新する処理に設定します。

    1. 右側接続先［折れ線グラフ］の上で右クリックします。
      2. ポップアップメニューから［イベント番号設定］－［イベント番号設定…］を選択します。
      イベント番号設定窓が表示されます。
    2. 設定窓左上［定常起動］のチェックをオフにします。
      No.「０」［セルが更新されたとき］の［起動する］のチェックをオンにし、「設定」ボタンを押します。
    3. 接続先コンポーネントの左側に、青字でイベント番号が表示されます。
    確認
    ここまで設定するとL８折れ線グラフのアプリケーションは完成です。
    イベント番号設定を選択

    イベント番号設定画面例

    イベント番号設定例

  4. 重ね合わせ系列グラフの表示

    5. 重ね合わせ系列グラフとは

    重ね合わせ系列グラフは系列グラフの1種で、１つのコンポーネントで２種類のグラフを重ねて表示することができます。
    参考：コンポーネン ト＞ グラフ＞重ね合わせ系列グラフ
    メソッドの引数の設定時に、使用するグラフの種類と数値軸を番号で指定します。
    コンポーネント追加
    1. 新しくアプリケーションを作成します。
      以下のコンポーネントを追加します。
      2. コンポーネント名 必要数 カテゴリー タイトル
      フレーム 1 画面構成部品＞ウィンドウ 月別気象情報
      重ね合わせ系列グラフ １ 画面構成部品＞グラフ 月別平均気温／降水量
      気象情報（Lesson8） １ 複合コンポーネント追加＞チュートリアル
    画面編集
    1. ツールボタン「画面編集」を押し、画面編集画面に入ります。
      ［フレーム］の領域の上に［重ね合わせ系列グラフ］を配置します。
    接続処理設定

    参考：コ ンポーネン ト＞ グラフ＞重ね合わせ系列グラフ

    1. 月別平均気温データを折れ線グラフに表示し ます。
      1. 【接続1】メソッド「テーブルデータを設定する（PFObjectTable, int, int）」を選択します。引数0には［気象情報（Lesson8）］から「各地の月別平均気温データを取得」します。
      2. 引数１にグラフの種類を番号で指定します。
        3. 折れ線グラフを示す番号「1」を固定値で設定します。
      3. 引数2に使用する数値軸（第一数値軸：左側、第二数値軸：右側）を指定します。
        第一数値軸を示す「0」を固定値で指定します。
    2. 月別降水量データを棒グラフに表示し ます。
      1. 【接続2】メソッド「テーブルデータを設定する（PFObjectTable, int, int）」を選択します。引数0には［気象情報（Lesson8）］から「各地の月別降水量データを取得」します。
      2. 引数１にグラフの種類を番号で指定します。
        棒グラフを示す番号「0」を固定値で設定します。
      3. 引数2に使用する数値軸（第一数値軸：左側、第二数値軸：右側）を指定します。
        第二数値軸を示す「1」を固定値で指定します。
    3. 基本の処理を作成します。
      1. ［アプリケーション］を開始したら［フレーム］を表示する、［フレーム］を閉じたら［アプリケーション］を終了 する、基本の処理を作成します。

    確認 ここまで設定するとグラフにデータが表示されます が、画面表示の属性を調整する必要があります。

    完成画面例
    ［編集画面図3］ 　基本の処理の起動メソッド情報設定画面図は省略

    グラフの属性設定調整

    属性情報の設定
      ［実行（設定可）］ボタンで実行し、画面を表示します。
      以下は設定例です。
    1. 折れ線グラフの設定
      2. ［折れ線グラフ］の上で右クリックして表示されるポップアップメニューから設定します。
      1. グラフのタイトル［ヘッダ］－［タイトル...］
        2. 「月別平均気温／降水量」と入力します。
      2. グラフタイトルのフォントサイズ［ヘッダ］－［フォント］－［設定する…］
        3. フォントの「サイズ」を「20」に設定します。
      3. グラフ表示の項目数［項目軸］－［表示項目数…］
        4. 表示項目数を「12」に設定します。12月まで表示されるようになります。
      4. グラフの数値軸のタイトル［第一数値軸］または［第二数値軸］－［タイトル…］
        5. 第一数値軸のタイトルを「気温（℃）」と入力します。
        第二数値軸のタイトルを「降水量（mm）」と入力します。
      5. グラフの数値軸の最大値　［第一数値軸］または［第二数値軸］－［最大値…］
        6. 第一数値軸の最大値を「35」に設定します。
        第二数値軸の最大値を「450」に設定します。
      6. グラフの数値軸の最小値　［第一数値軸］または［第二数値軸］－［最小値…］
        7. 第一数値軸の最小値を「-10」に設定します。
        第二数値軸の最小値を「0」に設定します。
      7. グラフの折れ線のデータラベルの表示　
        8. ［折れ線グラフ］－［データラベルの表示有無］－［表示しない］ （グラフの値を示す点の上で右クリックします）　
        ［棒グラフ］－［データラベルの表示有無］－［表示しない］
        表示されていた値が表示されなくなります。
      8. グラフのグリッド線の間隔　［第二数値軸］－［グリッド線の間隔］
        9. グリッド線の間隔を「50」に設定します。
      9. パネルの背景色　［パネル］－［背景色］－［設定する…］
        10. 白色を選択します。
    確認ここまで設定すると、完成画面図のようなグラフが表示されます。
    完成画面例